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.

    Default Clock SunTimes icon - color change?

    Scheduled Pinned Locked Moved Solved Troubleshooting
    4 Posts 2 Posters 804 Views 3 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.
    • B Offline
      brgracer
      last edited by

      For the default clock module, I am able to change the color and format of date and time. I was also able to change the color of the sunrise/sunset times, but I cannot figure out how to change the color of the sun icon (see screenshot) and the daylight left time next to it. Any assistance is greatly appreciated.
      PXL_20250909_200914923~2.jpg

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

        @brgracer
        icon color only

        .clock .fa-sun  {
                color: red;
        }
        

        for both icon and text the same color

        .clock div.sun span.bright  {
                color: blue;
        }
        

        for each different, order here is important

        .clock div.sun span.bright  {
                color: red;
        }
        .clock .fa-sun  {
                color: blue;
        }
        

        this works for me…

        set clock to displaySeconds:false,
        for debugging, so it doesn’t update the UI every second

        then use the developers window, elements tab…
        for a short starter , see the second link in my signature below…

        once working, remove the displaySeconds:false

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 1
        • B Offline
          brgracer
          last edited by

          @sdetweil That worked and thank you.

          Separately, your older posts have been super helpful in tracking down other issues, so thank you for all those prior answers as well. Several of your older posts/answers have helped me so much in tracking down issues that were driving me nuts. You are a treasure to the community!

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

            @brgracer you are welcome… I am the moderator here, and I feel my job is to help, and teach you how to solve problems on your own as much as I can.

            and as I see recurring problems, try to document them, and find solutions,
            my install/upgrade scripts,
            my backup/restore scripts,
            my MMM-Config module that does form based MM and module config, and module install (MMM-Config allows you to disable a module, effectively same as uninstall)

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • S sdetweil has marked this topic as solved
            • 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