change current weather colors - time and wind

[pugsly]

@karde I know its .normal in main.css but I do not know how to make it only change color for only one module. if you change .normal it will be for everything that uses .normal.

Is that even possible that you do a .module.normal {color:blue;} in your custom.css. Even so you would be changing all the text in that module, as there is no ‘code’ for just that one section.

Im no programer, so no clue. I only just figured out how to do the icons recently.

[cowboysdude]

Hey @pugsly any help is good help!

[strawberry 3.141]

@karde I’m assuming you’re using this module https://github.com/RedNax67/MMM-WunderGround

due to the sunset and sunrise time is a span element and the following sibling of the icon you can apply this css rule in custom.css

.wi.dimmed.wi-sunrise + span, .wi.dimmed.wi-sunset + span {
    color: orange;
}

[karde]

THANKS YOU @pugsly and @cowboysdude!!!
You guys are great!! Thanks for all your help!

I got the text next to the wind icon to work as well, with:
.dimmed.wi-strong-wind + span {
color: #FFFFFF;
}

But… I missed one thing in my picture, you also have a wind direction next to the windspeed, say: “1.5 VNV”, anyone know who to change the “VNV” as well, couldn’t get it to work…:(

[strawberry 3.141]

@karde could you share your modules config i can’t get the same result as your screenshot in the first post. don’t forget to remove your api_key before posting

[karde]

@strawberry-3.141 I’ll be happy to!
But, to be honest, the picture I have included in the post isn’t my actual mirror, I’ve sent you a private message :)!

[strawberry 3.141]

@karde this is for the default module currentweather and not as I thought MMM-WunderGround

/* wind speed selector */
.currentweather > .module-content > div > div.normal.medium > *:nth-child(2),
/* wind direction selector */
.currentweather > .module-content > div > div.normal.medium > *:nth-child(3),
/* sunset/sunrise time selector */
.currentweather > .module-content > div > div.normal.medium > *:nth-child(6){
    color: orange;
}

[karde]

THANK YOU! And thanks everyone for all your time, I really appreciate it - alot!!!

[A Former User]

Does anyone know where the CSS is managed for these Icons so can edit the colours?

Also has anyone done this already? and is there anything that needs special attention when doing?

Guessing custom CSS against

“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”
},

[A Former User]

@wjdw87 said in change current weather colors - time and wind:

Does anyone know where the CSS is managed for these Icons so can edit the colours?

Also has anyone done this already? and is there anything that needs special attention when doing?

Guessing custom CSS against

“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”
},

Yep some, getting there slowly…

body {

}
.wi.dimmed.wi-sunset {
color: orange;
}
.wi.dimmed.wi-sunrise {
color: yellow;
}
.wi-day-sunny {
color: yellow;
}
.wi-day-cloudy {
color: yellow;
}
.wi-rain {
color: grey;
}
.wi-thunderstorm {
color: grey;
}
.wi-snow {
color: white;
}
.wi-fog {
color: white;
}
.wi-night-clear {
color: white;
}
.wi-night-cloudy {
color: grey;
}
.wi-night-showers {
color: blue;
}
.wi-night-rain {
color: blue;
}
.wi-thunderstorm {
color: yelow;
}
.wi-night-snow {
color: white;
}
.wi-night-alt-cloudy-windy {
color: grey;
}