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!

    Thanks!


  • Module Developer

    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;
    }
    


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


Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.