Changing icons of the modules Current Weather and Weather Forecast

[PhilReis]

@mmille40 you must copy the icons in the CSS folder (/css/icons/) and add the code to your custom.css only.
But it works only with the standard weatherforecast module.

Here is my current config for the custom icon.

/* Aenderungen Wetter Icon */
/* Aenderungen aktuelles Wetter */

.currentweather .weathericon {
  position: absolute;
  z-index: 0;
  height: 200px;
  right: 180px;
  margin-top: -65px;
}

.currentweather .wi-day-sunny {
content: url("/css/icons/day.svg");
}

.currentweather .wi-day-cloudy {
content: url("/css/icons/cloudy-day-1.svg");
}

.currentweather .wi-rain {
content: url("/css/icons/rainy-6.svg");
}

.currentweather .wi-night-clear {
content: url("/css/icons/night.svg");
}

.currentweather .wi-night-cloudy {
content: url("/css/icons/cloudy-night-2.svg");
padding-right: 15px;
padding-top: 10px;
}

.currentweather .wi-cloudy {
content: url("/css/icons/cloudy.svg");
}

.currentweather .wi-showers {
content: url("/css/icons/rainy-7.svg");
}

.currentweather .wi-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.currentweather .wi-snow {
content: url("/css/icons/snowy-6.svg");
}

.currentweather .wi-cloudy-windy {
content: url("/css/icons/cloudy-day-3.svg");
}

.currentweather .wi-night-rain {
content: url("/css/icons/rainy-6.svg");
}

.currentweather .wi-night-snow {
content: url("/css/icons/snowy-6.svg");
}

.currentweather .wi-night-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.currentweather .wi-night-showers {
content: url("/css/icons/rainy-7.svg");
}

.currentweather .wi-fog {
content: url("/css/icons/cloudy.svg");
}

.currentweather .wi-night-alt-cloudy-windy {
content: url("/css/icons/cloudy-night-1.svg");
padding-right: 20px;
padding-top: 10px;
}

/* Aenderungen Wettervorhersage */

.weatherforecast .weathericon {
  position: absolute;
  left: 35px;
  z-index: 1;
  margin-top: -30px;
  height: 60px;
}

.weatherforecast .wi-day-sunny {
content: url("/css/icons/day.svg");
padding-left: 6px;
padding-top: 5px;
height: 50px;
}

.weatherforecast .wi-day-cloudy {
content: url("/css/icons/cloudy-day-1.svg");
height: 45px;
padding-left: 8px;
padding-top: 10px;
}

.weatherforecast .wi-rain {
content: url("/css/icons/rainy-6.svg");
padding-left: 8px;
padding-top: 5px;
height: 45px;
}

.weatherforecast .wi-night-clear {
content: url("/css/icons/night.svg");
}

.weatherforecast .wi-night-cloudy {
content: url("/css/icons/cloudy-night-2.svg");
height: 45px;
padding-left: 5px;
padding-top: 7px;
}

.weatherforecast .wi-cloudy {
content: url("/css/icons/cloudy.svg");
height: 50px;
padding-left: 5px;
padding-top: 7px;
}

.weatherforecast .wi-showers {
content: url("/css/icons/rainy-7.svg");
}

.weatherforecast .wi-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.weatherforecast .wi-snow {
content: url("/css/icons/snowy-6.svg");
}

.weatherforecast .wi-cloudy-windy {
content: url("/css/icons/cloudy-day-3.svg");
height: 45px;
padding-left: 8px;
padding-top: 7px;
}

.weatherforecast .wi-night-rain {
content: url("/css/icons/rainy-6.svg");
padding-left: 8px;
padding-top: 5px;
height: 45px;
}

.weatherforecast .wi-night-snow {
content: url("/css/icons/snowy-6.svg");
}

.weatherforecast .wi-night-thunderstorm {
content: url("/css/icons/thunder.svg");
}

.weatherforecast .wi-night-showers {
content: url("/css/icons/rainy-7.svg");
}

.weatherforecast .wi-fog {
content: url("/css/icons/cloudy.svg");
}

.weatherforecast .wi-night-alt-cloudy-windy {
content: url("/css/icons/cloudy-night-1.svg");
height: 50px;
padding-left: 5px;
padding-top: 7px;
}

[PhilReis]

@smotx you’re welcome, no problem

[mmille40]

@philreis I’ll try that out, I’m unsure what you mean by “you must copy the icons in the CSS folder”. Thank you for your response!

[Tagriel]

@philreis wow man it’s beautiful!!! I have a question for you, I’ve been wondering if instead of having an svg it could be done via js and css, like this project here:
https://codepen.io/anon/pen/JmQqOw

[PhilReis]

@tagriel i have used svg Icons because it was easier for me.
I can try to make a solution with the CSS Icons which you have linked here.

[Tagriel]

@philreis I’m wondering because my raspberry heat goes way up after displaying the new weather icons. I thought it might be bc of the svg files, does it happen to you? (are you using a raspberry?). I also wanted to share something with you, if I don’t have any modules, lets say, on my top_left screen, the current weather module only displays the degree without any icons, and if I add any other module to the top-left screen, then I can see the icons, its pretty strange :( do you happen to know what might be happening? I’ve been reading the code almost line by line trying to find if there is a table or div anywhere missing but I can’t seem to find anything.

[PhilReis]

@tagriel i will test it.

[Tagriel]

Thanks man! I’ve also got a question for you, it’s breaking my head, I’ve given a lot of days of debugging and searching what might be happening but I don’t find an answer.

If I have my currentweather module on top_left alone, there’s no weather icon

BUT if I put any other module on top_left below my current weather module, I can see the icon :'(

I just don’t understand what I’m doing wrong, do you have any ideas?

Thanks in advance!

[Tagriel]

Hi all,

I just found the issue. Just check there’s height and width on your custom.css

.currentweather .weathericon {
position: absolute;
z-index: 0;
height: 200px;
width: 400px
right: 180px;
margin-top: -65px;
margin-left: 30px;
}

[homerj99]

looks great, thanks so much