Resizing font size of modules

[sdetweil]

@Rags the css is a hierarchy

last defined is selected first, lifo search order

css/custom.css
any module provided css files
css/main.css

top down first one, MOST SPECIFIC, wins

that last example

in custom.css

you said all module font size is 20px;
but also said the text in this module ‘header’
is 24px;

regardless of order in custom.css, the more specific one wins. module header setting

in a css entry, the stuff to the left of {
is called the element selector clause.

it selects ALL the elements in the document that match the rules. the browser thinks this is one webpage. (aka document)

this is the cheatsheet I use for the rules
https://www.w3schools.com/cssref/css_selectors.php

because everything is a stack, a module’s css overrides the base css, and custom.css overrides both.

the developers window ctrl-shift-i will help save time.

see
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1682355292588

[Rags]

@sdetweil I inspected the developer page for newsfeed and it indicates that the font size configuration is being picked up from main.css. So changing the font size here is messing up all the sizes and consequently all the MM modules. How to resize only for the font size of newsfeed. How to make the custom.css priority or the newsfeed.css as the priority.

[sdetweil]

@Rags

so,you select the module (class)
from the doc
https://docs.magicmirror.builders/modules/customcss.html#target-a-specific-module

.newsfeed                 {
  font-size: ???;
}

custom.css ALWAYS wins when the selector clause is correct

[Rags]

@sdetweil I have made changes to both custom.css file and newsfeed.css file. I also copied the custom.css file into newsfeed module folder. Nothing seems to work.

css/custom.css configuration;

.MMM-pihole-stats {
color: #fff; /* change the font color */
}

.MMM-pihole-stats .dimmed {
color: #aaa; /* change the color of dimmed elements */
}

.MMM-pihole-stats .bright {
color: #ff0; /* change the color of bright elements */
}
.MMM-pihole-stats .small.bright {
color: red;
}
.MMM-pihole-stats {
font-size: 60px;
}

**.newsfeed {

font-size:70px;
margin-bottom: 0.5em;
}**

newsfeed.css configuration;

iframe.newsfeed-fullarticle {
width: 100vw;
/* very large height value to allow scrolling */
height: 3000px;
top: 0;
left: 0;
border: none;
z-index: 1;
}

.region.bottom.bar.newsfeed-fullarticle {
bottom: inherit;
top: -90px;
}

.newsfeed-list {
list-style: none;
}

.newsfeed-list li {
text-align: justify;
font-size:70px;
margin-bottom: 0.5em;
}

Need further help please.

[MMRIZE]

@Rags
custom.css should be placed in your ~/MagicMirror/css, where the custom.css.sample exists still or had existed once.

[Rags]

@MMRIZE It is still placed there ( /home/pi/MagicMirror/css/custom.css) , and configured with font-size:60px. I only copied that file into newsfeed module folder since the font size was not increasing, and thought to just try if it works by placing it into the newsfeed module folder.

[MMRIZE]

@Rags

Try this in your custom.css

.newsfeed-title {
  font-size: 60px;
  color: green;
}

.newsfeed-source {
  font-size: 40px;
  color: magenta;
}

[sdetweil]

@MMRIZE you should follow the correct model

.modulename ....... {

}

while it didn’t make acdifference here, it will sometime

[sdetweil]

@Rags in the case where there is no space between the class names

.xxx.yyy

that means they are ALL specified together on the same element

when there IS. space
.xxx. .yyy

that means the element which is a child of the element with the more left

.xxx
.yyy

iframe however is hard, cause you don’t have control of what is inside the iframe, it has its own document and css tree

again the developers window will help

if things are selected I. the custom.css u provide that means I spelled it wrong or the order is wrong…
oh and css is case sensitive just like JavaScript

[Rags]

@MMRIZE I am stumped. The changes to the color happened, but the resizing still not responding.

[sdetweil]

@Rags while in the developers window, with the element u want to change selected , the upper right window in the dev env allows you to apply styles to that element. (green box)

so color, font-size, etc…
in the middle pane pof the dev env, on the bottom row is the selector path to that element (pink box)

[MMRIZE]

@Rags
C of ‘CSS’ is cascading.
Probably somewhere in your css files, the prior selector of the same target would be defined with font-size.

You can watch which selectors and properties are linked to your target element with the frontend dev-console.

Or you can just restart with “clean” custom.css again and just add one rule and check how it works. Then do one-by-one until you can understand what you are doing now.

Good luck.

[Rags]

@sdetweil
Obviously i am doing something wrong.
I am unable to get to the style even when newsfeed element is highlighted. Or, the style is picking up from main.css and changing anything here will impact all styles.

[sdetweil]

@Rags you are in the script section, not the body , click body, bottom left
use the arrow top right to select the part of the MM screen (it will highlight as u move over it)

[Rags]

@sdetweil

[sdetweil]

@Rags expand the module_content element

u are not selecting the title to view

set the module refresh time to 60 seconds (updateInterval:60000) in config.js while you fiddle with the css

I added a custom.css entry

.newsfeed .newsfeed-title {
   font-size: 30px;
}

you can see it was used here
and the style medium (strikethru) has been overridden by something with font-size higher up.

[Rags]

@sdetweil i am sorry but i am unable to follow correctly what u are advising. However, the HTML code does not seem to contain the newsfeed title descrp.
i think i selected the module content to expand, and i also changed the custom.css entry as suggested. The style display window is not showing the newsfeed entry. I am again not sure if i am doing the right thing. Anyways i am learning as we go.
On second thoughts the process of changing the font size is so tedious (as it seems to me now), I wonder if there is an alternate way.

[sdetweil]

@Rags but you didn’t select the actual content (note that it is replaced every updateInterval time cycle… )

if u aren’t looking at the actual element, then you won’t see its classes and styles…

sometimes this is tedious work.

here is an updated image with the areas selected in white,
highlighted content (left screen)
expanded document w selected content (middle)
class tree (right)

and I used the mouse pointer (pink) to allow highlight and click on the newsfeed title

and you can test type the styles in the top box, (green) , to make sure they are right, before you copy/paste that section to the custom.css

[Rags]

@sdetweil
After struggling, this is what i managed to take a screenshot of. It does not show the styles of the selected content in the dev screen.

[MMRIZE]

@Rags
It means your CSS(probably custom.css) is not applied.

The reasons might be;

• Fail to load custom.css (invalid file name or location)
• Syntax error in your custom.css

I can see the red circled X mark in your console. You can check it in Console tab(right of Elements tab) or click that mark directly.