Increasing size on (default) Clock module the right way?

sdetweil

@joey there is a sample custom.css in the css folder in 2.16

joey

I did find the custom.css.sample (https://github.com/MichMich/MagicMirror/blob/master/css/custom.css.sample), which was where I found the :root and --font-size to edit. However, changing anything in :root seems to affect all modules. I was unable to determine how to edit the custom.css to only affect one module.

Can you help me determine what to add/change in custom.css.sample so that I can affect individual modules in my own custom.css (which itself is just a copy of custom.css.sample)?

Thank you.

sdetweil

@joey see this

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

joey

@sdetweil

Thank you for that. I learned a number of things I did not know, including the pointer for the Inspector window!

I also learned that I needed to put the font-size in rem instead of px. (I especially did not think about this, since the :root defines font-size in px units.)

On the little-closer-to-expected size, I also discovered that I had to specify both the module and the class. For clock, this meant doing “.clock .time” and “.clock .date”, as follows:

.clock   .time {
   font-size: 10rem;
}
.clock   .date {
   font-size: 4rem;
}

Again, thanks for the link to the lesson on how to use the Inspector to find this information. I would personally still see the value in including this in the custom.css.sample (or something similar) to demonstrate the need to call both the module and class, and the terminology to use.

Please ignore the ugliness. This is using the default config, and was just for the sake of demoing the effect of the custom.css addition.

sdetweil

@joey u must ALWAYS use module and class… this is just a web page… .time means ALL uses across the entire page… (not what you might want)

you’ll note that the module content is wrapped in a div with the modulename as a classname…

also the cheatsheet on css selectors
https://www.w3schools.com/cssref/css_selectors.asp

simple knowledge… when there is a class u want to target .classname
if there is an element u want to target, NO dot

and selectors are ALL occurrances of that combo across the ENTIRE page.
sometimes that is very tricky to handle…

and one thing I didn’t know when I wrote that other post…

if u have the settings in the top right window, you can mark the whole area with the mouse and copy paste that to custom.css , not having to type it all!!.

(inside the selector clause)