MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Change digit fonts for default clock module

    Scheduled Pinned Locked Moved Custom CSS
    4 Posts 2 Posters 905 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • L Offline
      leomirror
      last edited by

      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

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @leomirror
        last edited by sdetweil

        @leomirror you could change only the time

        .clock .time {
        
        ...
        
        }
        

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • L Offline
          leomirror
          last edited by

          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

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @leomirror
            last edited by 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

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Sam, technical setup by Karsten.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy