Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    custom CSS clock module

    Development
    2
    2
    1992
    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.
    • PointPubMedia
      PointPubMedia last edited by

      Hey guys…

      Would like to do some custom CSS for the clock module, but just for the time.

      Currently HH and MM are the same size and SS is smaller! I would like to have the MM bigger than the HH!

      strawberry 3.141 1 Reply Last reply Reply Quote 0
      • strawberry 3.141
        strawberry 3.141 Project Sponsor Module Developer @PointPubMedia last edited by strawberry 3.141

        @PointPubMedia the hour and the minute are in the same div which makes it not possible to do it just in css, but
        there is a config option which adds a wrapper around the minutes, which is perfect for this task.

        the selector would be probably something like this:

        .clock div.time.bright.large.light span.bold {
          //set the font size here
        }
        

        therefore you also have to add clockBold: true to the config

        if you dont like the bold effect you can overwrite it as well where you change the font size

        1 Reply Last reply Reply Quote 1
        • 1 / 1
        • First post
          Last post
        Enjoying MagicMirror? Please consider a donation!
        MagicMirror created by Michael Teeuw.
        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
        This forum is using NodeBB as its core | Contributors
        Contact | Privacy Policy