MagicMirror: Changing font colors

sandyh10

OK…I am new and I know it probably has been answered already but I can’t find it so how do I change the Time or the temperature to be the color green or whatever?

j.e.f.f

@sandyh10 You can write rules css/custom.css to change all sorts of stuff. Here’s an example for the time:

.module.clock .time {
  color: #82bae5; /* nice, light blue colour */
}

You can figure out the class names of the various items by starting MagicMirror in developer mode with npm start dev. At the top-left of the white window you’ll see an icon that looks like a square with an arrow pointing into it. Click it, then click an element in MagicMirror’s layout. That will highlight its HTML markup in the white window, where you can see class names you can target, and what the parent elements are.

If you need help with CSS, there are plenty of resources on the web. You can Google for “CSS 101”. Here’s a good one to start with:
http://www.css-101.org/

AliAS

I am extremely new to all this (close to zero programming experience, learning quickly though). Wondering if that example is written correctly, specifically the space in between .clock and .time? I tried this example and loaded the mirror and nothing happened. Do i need to reboot or implement a specific command for it to load the custom css script?

P.s. I’ve already read a lot of great tips and suggestions for troubleshooting to get where I am now and i just wanted to say what a great group of people I see participating in this forum.

AliAS

After checking the structure of the main.css file I see that it is indeed correct. Any other reason why it isn’t working would still be helpful though:)

Mykle1

@AliAS

The above example does work. It can even be shortened, as such.

.clock .time {
  color: yellow;  /*#82bae5;  nice, light blue colour */
}


.calendar {
  width: 300px;
}

html {
	cursor: default;
}

Just to confirm. These are being added to your custom.css file (and saved). And that file resides within the css folder.

doubleT

Check my answer to that ~~exact same~~ question here, learning css, to learn a bit about addressing elements in css.

Basically, .module.clock addresses the element with both classes .module and .clock. And .module.clock .time addresses the element with the class .time sitting inside that element with both classes .module and .clock.

You don’t have to restart the Pi, not even the MM app, for some css changes. A refresh should do it. I don’t know why it shouldn’t work if you got the correct file css/custom.css and copied that exact code from j.e.f.f.

AliAS

Thanks to both of you for the quick replys. As I said, I’m very new but learning quickly. After seeing Mykel’s post (sorry if I’m spelling that incorrectly as I cannot see the post while typing a reply on my android) I reopened the custom.css file and noticed I made a syntax error. I replaced the colon after yellow with a semicolon and I was good to go.

What does the body[ ] part do?

doubleT

It’s body {}, it addresses the whole html body (everything) and is empty in this case. It’s probably just an example.

AliAS

Thanks for the clarification DoubleT. Again, im typing from my phone so those brackets are not available, but you did get my reference.

Mykle1

@AliAS said in MagicMirror: Changing font colors:

I made a syntax error.

Yeah, I hate when that happens. :-)