Changing the colour of all text on screen

boybay7

Still very new to this and know nothing about coding, I’ve seen a few posts regarding changing the colour of text but am still perplexed and need someone to explain it to me. Would just like all text to be white (currently struggling to see text when lights are on, attached a photo.) Also I couldn’t remove the fade off the weather forecast for some reason? Also I’m still confused with how to update the magicmirror, I think you need to use git stash? I don’t know :( Thanks in advance.

MajorC

Add the following to the custom.css to make the text a little brighter:

.normal,
.dimmed,
header,
body {
    color: #fff;
}

boybay7

@MajorC Thanks so much, I will make sure to add this! Also what is the right way to go about updating the MagicMirror program?

lavolp3

@boybay7 said in Changing the colour of all text on screen:

Also I’m still confused with how to update the magicmirror, I think you need to use git stash? I don’t know

You only need git stash when you have made changes to the source code that you want to keep while updating. So don’t worry about that for now.

The usual update procedure is

git pull
npm install

inside the MagicMirror folder.

As a newbie you might want to check out @sdetweil 's scripts. Lots of automation in there.
https://github.com/sdetweil/MagicMirror_scripts

lavolp3

@boybay7 said in Changing the colour of all text on screen:

Also I couldn’t remove the fade off the weather forecast for some reason?

For that you need to have a look at the module docs
https://docs.magicmirror.builders/modules/weather.html#weather-forecast-options
The weather module is a “stock module”, the docs for all stock modules are placed in the official MagicMirror docs. Any 3rd party modules have their own docs on the respective github site.

At the above link you find the fade: option. Set that to false in your config.js
Or set the fadepoint to a higher value: fadePoint: 0.5

boybay7

@lavolp3 So just to confirm, even though I have edited code in like modules or custom.css for the font colour, it won’t be replaced when I update with git pull?

boybay7

@lavolp3 Also thanks, I figured it out, I was editing the wrong module because there is like 3 modules on weather. Okay another question, I want to change the colour on weather forecast. Currently it’s red and blue, but I want it to go blue (min temp) and then red (max temp), so how would I do that? Appreciate all the help

lavolp3

@boybay7 The only files you should change are config.js and custom.css.
These are also disregarded in the updating procedure, so will remain as they are. Everything else will be checked against its version on the servers.

Usually there’s nothing to be done in the module folders as long as you don’t want to manipulate module code.

For all styling options you should use custom.css, e.g. like advised above

lavolp3

@boybay7 said in Changing the colour of all text on screen:

Okay another question, I want to change the colour on weather forecast. Currently it’s red and blue, but I want it to go blue (min temp) and then red (max temp), so how would I do that? Appreciate all the help

That’s a bit more complicated, but can be done via styling.

Without explaining too much, put that in your custom.css

.weatherforecast tr.colored .min-temp {
  color: 'green';  
}

.weatherforecast tr.colored .max-temp {
  color: 'red';  
}

or use hex codes (like ‘#00ff00’) for any color you like.

ronw1309

thanks for this it really helped