Trying to change size of currentweather module driving me nuts...

magicmarc

I have my currentweather module set to only show the weather icon and the degrees. I’m trying to make it smaller.

So, this should work right? In custom.css:

.currentweather {
   font-size: 20px;
}

No, it doesn’t.

Saw someone adding tableClass to config.js. How about now!?:

{
                        module: "currentweather",
                        position: "top_center",
                                config: {
                                        location: "my-location",
                                        appid: "my-api-key",
                                        tableClass: "small",
                                        onlyTemp: true,
                                        }
                
},

Nope.

Ok, let’s try copying currentweather.css into my custom.css and changing it from there?:

.currentweather .weathericon,
.currentweather .fa-home {
  font-size: 75%; /*I TRIED CHANGING THIS!!!*/
  line-height: 65px;
  display: inline-block;
  -ms-transform: translate(0, -3px); /* IE 9 */
  -webkit-transform: translate(0, -3px); /* Safari */
  transform: translate(0, -3px);
}

.currentweather .humidityIcon {
  padding-right: 4px;
}

.currentweather .humidity-padding {
  padding-bottom: 6px;
}

Sorry bro, doesn’t work.

Anyone with an answer to this? Thank you so much in advance…

broberg

@magicmarc

.currentweather .small {
   font-size: 10px;
}
.currentweather .medium {
   font-size: 15px;
}
.currentweather .large {
   font-size: 20px;
}

sdetweil

@magicmarc the code does

		var large = document.createElement("div");
		large.className = "large light";
.....
                wrapper.appendChild(large);
                return wrapper.

so you want to override the class “large” in your custom.css

.currentweather .large {
whatever
}

one thing you can do, by yourself, is look at the generated html

open the developers window, either on the pi (ctrl-shift-i) or some other system accessing the pi (if address:“0.0.0.0” and ipWhiteList: [] in config.js) , also -ctrl-shift-i in chrome)

then selelect the elements tab, and find the div in the body that corresponds to to the module position, then drill in to find the module id, and its content, and look at the classes assigned for the elements…

magicmarc

Right… Thank u guys very much. This clarifies so many things!