Change digit fonts for default clock module

leomirror

Hi,

I recently started with MagicMirror!

I want to change the digits for digital clock (default clock module)

I used below code in custom.css -

.clock {
font-family: MyFont;
}

When I set a custom font in custom.css for clock module - it sets MyFont for the date line but the time digits remain Roboto Condensed which is default font in main.css - I want to do the exact opposite of this!

How do I set different fonts for the date and time in clock module? Or should I use different modules for this? Or same module twice with different name (if this is possible) so that I can set different fonts for each?

Please help!

Thanks,
Leo

sdetweil

@leomirror you could change only the time

.clock .time {

...

}

leomirror

Thank you so much! This worked and I can set fonts as I want :)

Can you please tell me how to figure out the name for the parts of module to use in css? i.e. in this case how to figure out that we need to put .time after .clock

~Leo

sdetweil

@leomirror there are three or four approaches

1 the module documents the classes it uses
2 the module provides a css file that uses the classes it uses
3 you read the source code of the module ( I did this)
4 you use the developers window to examine the content to get the classes
see
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1680719852507

clock module does not do 1 or 2
I wasn’t near a system to do 4

if you had two instances of the clock module and wanted the styles to be different, you would use the module identifier as the key selector

#id_name1 .time {
    color:red;
}
#id_name2 .time {
     color:blue;
}

you could find that name thru option 4

also the css thing before the { is called the selector clause, operated left to right
https://www.w3schools.com/cssref/css_selectors.php