MagicMirror² v2.14.0 is available! For more information about this release, check out this topic.

Change the color of the font of various modules.

  • 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!


  • Project Sponsor

    It’s been covered many times on this forum, Here is one thread for an example :

    But here is the solution for the time and date :

    blue time :

    .clock .time {
    color: blue;

    red date:

    .clock .date {
    color: red;

  • 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?

  • @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?

  • Project Sponsor Module Developer

  • Project Sponsor Module Developer

    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…

Log in to reply