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 the color of the font of various modules.

    Scheduled Pinned Locked Moved Development
    6 Posts 5 Posters 7.7k Views 4 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.
    • R Offline
      rodofrn
      last edited by

      Hello guys, over the last couple of days I have been setting up a MagicMirror as a gift for my gf birthday, I already have most of the modules that I want installed, (still working on choosing an alexa module to display info like msong info, video, etc, if you know of one lmk) What I want to do right now is to have the ability to change the color of the FONT of various modules.
      For example, I want the CLOCK numbers (2:35 [23] pm) to be blue. And Tuesday, May 30, 2017 to be red (ar any other color that I choose).
      Also, the SUN in the current weather module, to be yellow, etc…

      I have searched all over google, and have tried 10+ solutions, NONE have worked so far, I am now familiar with the custom.css file and can edit it, but i need the right CSS code. How can I do that, please help me!

      Thanks!

      1 Reply Last reply Reply Quote 0
      • brobergB Offline
        broberg Project Sponsor
        last edited by

        It’s been covered many times on this forum, Here is one thread for an example :
        https://forum.magicmirror.builders/topic/2447/css-basics/2

        But here is the solution for the time and date :

        blue time :

        .clock .time {
        color: blue;
        }
        

        red date:

        .clock .date {
        color: red;
        }
        
        1 Reply Last reply Reply Quote 1
        • R Offline
          rodofrn
          last edited by rodofrn

          Thank you very much @broberg
          BUT, the “Seconds” in the clock, don’t change color, they stay grey. Do you know how to change that? I looked in the .js file, but didn’t see any variable for seconds.

          Nevermid, GOT IT! THANK YOU SO MUCH! Thanks mate, so the “dateWrapper.className” are the classes? And that i what is printed in the screen, so I can change the color of them?

          1 Reply Last reply Reply Quote 0
          • A Offline
            alang
            last edited by

            @rodofrn what did you discover? I’m two days new to MM and the ‘seconds’ in the clock time confound me. Long term I’d like to reformat so seconds and am/pm are above/below each other. But that’s postponed until I learn more.

            For my immediate needs I’d like to turn the seconds off. What can I add to my custom.css to turn off the seconds display in the default digital clock time?

            Mykle1M 1 Reply Last reply Reply Quote 0
            • Mykle1M Offline
              Mykle1 Project Sponsor Module Developer @alang
              last edited by

              @alang

              https://forum.magicmirror.builders/topic/5206/how-to-disable-seconds-in-clock-time/2

              Create a working config
              How to add modules

              cowboysdudeC 1 Reply Last reply Reply Quote 1
              • cowboysdudeC Offline
                cowboysdude Module Developer @Mykle1
                last edited by

                There is kinda a cool feature here on the forum… it’s at the top right… I think they call it the Search feature… LOL People are afraid of it I think…

                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 Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy