Changing the colour of all text on screen

BKeyport

@boybay7 “Fork” a procedure on github to make a copy of the code under your own username so you can make changes to the code without worrying about messing with the original, or breaking it if you want to back off to the original easily.

but, I understand you’re only changing the custom.css file - that’s great, best way to fix things visually!

Blauenfeldt

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

@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.

Thank you for that info, it helped me greatly.
Instead of asking you to help me with every question I have.
How do i figure out what and how I change other stuff? I want to change the color like the red, as it is more like a red tint than only the red LED being lit up. I would like to change the color of the text, as it is grey and does not work well with the pictures in the background. Same goes for the grey cloudy-sunny-raining icon, or is it a .png file?

Edit: figured out changing color: 'red'; to color: #ff0000; did the trick.

Blauenfeldt

As I figured out how to change the color of the max and min temp, I still struggle with the color of the days.

lavolp3

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

How do i figure out what and how I change other stuff? I want to change the color like the red, as it is more like a red tint than only the red LED being lit up. I would like to change the color of the text, as it is grey and does not work well with the pictures in the background.

If you want to change ciolors of elements, you need to find out their css class or id.
Move into the module.js ( or if it exists the *.njk file which is a nunjucks template and creates the html). To every element you are searching for you will hopefully find some class or id.
In this specific case:

Here is the main .js file:
https://github.com/MichMich/MagicMirror/tree/master/modules/default/weatherforecast
You can of course also look into your local cloned folder /modules/default/weatherforecast/weatherforecast.js

Now let’s find the elements you were looking for. They are often (not always!) created in a document.createElement()function inside the getDom()-function:

Look it this

			var dayCell = document.createElement("td");
			dayCell.className = "day";
			dayCell.innerHTML = forecast.day;
			row.appendChild(dayCell);

Here you find the creation of the day cell in every forecast row. They have a class called “day”.
Now first have a look into the .css file weatherforecast.css and look if there is something referencing the .day-class.

There’s something in there:

.weatherforecast .day {
  padding-left: 0;
  padding-right: 25px;
}

But nothing about the color.
You can add the color in custom.css (it would be overwritten by custom.css if it was already in here)

.weatherforecast .day {
  color: 'green';
}

Want to give every day another color? That’s more difficult, but possible. Google for “css nth element”. You would want to give every nth element inside the forecast table some color.

Want to colorize the symbols? Can be done.
Again, look for the symbol creation part in weatherforecast.js:

			var iconCell = document.createElement("td");
			iconCell.className = "bright weather-icon";
			row.appendChild(iconCell);

			var icon = document.createElement("span");
			icon.className = "wi weathericon " + forecast.icon;
			iconCell.appendChild(icon);

Each cell gets actually a range of classes: “wi weathericon” and the name of the forecast-icon. You find the names of the forecast items at the top of the module-code.

		iconTable: {
			"01d": "wi-day-sunny",
			"02d": "wi-day-cloudy",
			"03d": "wi-cloudy",
			"04d": "wi-cloudy-windy",
			"09d": "wi-showers",
			"10d": "wi-rain",
			"11d": "wi-thunderstorm",
			"13d": "wi-snow",
			"50d": "wi-fog",
			"01n": "wi-night-clear",
			"02n": "wi-night-cloudy",
			"03n": "wi-night-cloudy",
			"04n": "wi-night-cloudy",
			"09n": "wi-night-showers",
			"10n": "wi-night-rain",
			"11n": "wi-night-thunderstorm",
			"13n": "wi-night-snow",
			"50n": "wi-night-alt-cloudy-windy"
		}
	},

Try to give the rainy ones a blue color in custom.css:

.weatherforecast .wi-rain,
.weatherforecast .wi-showers,
.weatherforecast .wi-night-showers,
.weatherforecast .wi-night-rain {
  color: 'blue';
}

Voila!

Same goes for the grey cloudy-sunny-raining icon, or is it a .png file?

The pictures are actually svg (scalable vector graphics). They can be styled as you can see above by css. They are not pictures as they get drawn in the respective element. That way you can manipulate background and color.

lavolp3

@Blauenfeldt BTW, a more efficient way to find out an elements class or id is using the browsers dev tools on your laptop.
And, this guide is very helpful
https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works?_=1603089835577

Blauenfeldt

@lavolp3 You, my friend, are AWESOME!
To be honest, I just expected to giving a link, where i could read it all, like the w3schools.com.
You really went beyond my expectations, on how much work you would put into helping strangers.
I will try that. Thank you for your big help!