Changing icons of the modules Current Weather and Weather Forecast

Genosphere

Nice set up here, tried out the code and worked the first time. My only issue is I am only getting 3 days showing in the forecast. I tried adding “maxNumberOfDays: 5,” but nothing happened… Any idea what it could be?

				{
			module: "currentweather",
			position: "top_right",
			config: {
				onlyTemp:true,
				maxNumberOfDays: 5,
				location: "Swissvale",
				locationID: "5215064", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				appid: "appid"
			}
		},
		{
			module: "weatherforecast",
			position: "top_right",
			header: "Weather Forecast",
			config: {
				maxNumberOfDays: 5,
				location: "Swissvale",
				locationID: "5215064", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				appid: "appid"
			}
		},

Still new here, so let me know if you need me to provide any thing else.

Skol

Wenike

@Genosphere try the fix that @oemel09 mentioned here and see if that fixes the number of days issue

Genosphere

@Wenike Perfect fix! Well it does what it needs to anyway. haha

Skol!

PhilReis

hello @santiago5 @trividar can you send me a link from the icon, which you want to implemented?

trividar

@PhilReis I wrote you a direct message.

manu85340

Hello everyone, I put a message on this forum and I hope it is still active… I am trying to change the icons of the original weather module and it does not work, I created an “icons” file "in the css folder I made a git clone of the link address for the animated modules, I copied the lines in the custom.css file and despite all this the icons on the mirror remain identical, if you could Helping me would be really nice, thank you

sdetweil

@manu85340 can u show us the stuff you added in custom.css

manu85340

Hello @sdetweil and thank you for your response, I follow the lines that I added in the custom folder, I also have the impression that the icon download is not I did a git pull https ://www.amcharts.com/free-animated-svg-weather-icons/
and I put this in the custom:

/* 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");
}

/* 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");
}

.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: 50px;
padding-left: 5px;
padding-top: 7px;
}

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

.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;
}

manu85340

Sorry si not a « git pull » but a « git clone »

sdetweil

@manu85340 currentweather and weatherforecast were old modules no longer shipped.

so the class prefix won’t work.

I’m on my phone now. so it’s slow to figure out what it should be…

I would open the developers window and see what the class names used are
.see here for how to use the dev window

https://forum.magicmirror.builders/post/90135