showHumidity

[zkab]

Thanks - now I get a yellow sun rise icon.
If I want the same thing for forecast icons do I change ‘currentweather’ to ‘weatherforecast’ and add it to my custom.css

}
.weatherforecast .wi-night-showers {
color: #07f;

My custom.css looks like this - I am not sure if the { … } are right.

body {
}
.brightb {
color: #55acee;
}
.currentweather .wi-sunrise {
color: #ff0;
}
.currentweather .wi-sunset {
color: #eb0;
}
.currentweather .wi-night-showers {
color: #07f;
}
.currentweather .wi-degrees {
color: #415;
}
.currentweather .wi-rain {
color: #00f;
}
.currentweather .wi-showers {
color: #07f;
}
.currentweather .wi-night-showers {
color: #07f;
}
.currentweather .wi-night-alt-cloudy-windy {
color: #aaa;
}
.currentweather .wi-night-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy {
color: #aaa;
}
.currentweather .wi-day-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy-windy {
color: #aaa;
}
.currentweather .wi-showers {
color: #00f;
}
.currentweather .wi-thunderstorm {
color: #ff0;
}
.currentweather .wi-snow {
color: #fff;
}
.currentweather .wi-fog {
color: #999;
}
.currentweather .wi-night-clear {
color: #fff;
}
.currentweather .wi-night-rain {
color: #00f;
}
.currentweather .wi-night-thunderstorm {
color: #ff0;
}
.currentweather .wi-night-snow {
color: #fff;
}
}

[Wedee]

Yes it appears both utilize the same icon table, so it should work.

each entry should be…

.MODULENAME .ICONNAME {
color: XXXX;
}

For each color you can do it several ways… check out http://www.w3schools.com/colors/colors_names.asp for the options on colors I find it easier to use the names vs the color hex codes or RBG values.

color: white;

[zkab]

OK - a question though … I can’t find .wi-degrees in the iconTable for Current Weather

.currentweather .wi-degrees {
color: #415;
}

[Wedee]

I believe it comes from the Icon Package source.

https://erikflowers.github.io/weather-icons/

In the vendor/weather-icon/ folder he is loading erikflowers weather icon package.

On that page “Link Above” there is a wi-degrees icon.

Does it work?

[cowboysdude]

LOL that is why I only added the one entry to the custom.css… css not my thing…

[zkab]

Wedee, you are right - there is wi-degrees icon in the package but it doesn’t matter what color I choose it still is white … hmm

.currentweather .wi-degrees {
color: #f00;
}

[cowboysdude]

@zkab Yes I noticed that too. I would like them to be different colors but they appear not to like the custom.css overrides.

Not too sure what package they are using because I’ve looked into the weathericon.css and nothing equates to what is in the currentweather.js file…

“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”
is the currentweather.js but none of these are the same in the weathericons.css…

I’ve been trying to add the one for humidity but it’s not working so I went to check these and that’s what I found.

[Wedee]

Looking at currentweather.js the degree symbol is not declared, and the symbol is only being appended to the temperature “&deg”.

var temperature = document.createElement(“span”);
temperature.className = “bright”;
temperature.innerHTML = " " + this.temperature + “°”;
large.appendChild(temperature);

So I guess there are two options. Change it to use the icon from the icon package, or change the color of the symbol.

Sorry don’t have a direct answer, but might find some time to play and see if I can make it work. Someone heer should know exactly what to change.

Thanks,

[cowboysdude]

@zkab just use this:

.wi-sunrise {
color: #ff0;
}
.wi-sunset {
color: #eb0;
}
.wi-night-showers {
color: #07f;
}
.wi-degrees {
color: #415;
}
.wi-rain {
color: #00f;
}
.wi-showers {
color: #07f;
}
.wi-night-showers {
color: #07f;
}
.wi-night-alt-cloudy-windy {
color: #aaa;
}
.wi-night-cloudy {
color: #aaa;
}
.wi-cloudy {
color: #aaa;
}
.wi-day-cloudy {
color: #aaa;
}
.wi-cloudy {
color: #aaa;
}
.wi-cloudy-windy {
color: #aaa;
}
.wi-showers {
color: #00f;
}
.wi-thunderstorm {
color: #ff0;
}
.wi-snow {
color: #fff;
}
.wi-fog {
color: #999;
}
.wi-night-clear {
color: #F4F8A9;
}
.wi-night-rain {
color: #00f;
}
.wi-night-thunderstorm {
color: #ff0;
}
.wi-night-snow {
color: #fff;
}

Get rid of the currentweather from in front of the css… then you can change colors ;)