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!
-
It’s been covered many times on this forum, Here is one thread for an example :
https://forum.magicmirror.builders/topic/2447/css-basics/2But 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?
-
-
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…
