Weatherunderground - currently - hourly - daily - configurable

maestro82

What variables control the size of the large current weather icon and the small forecast icons? I was trying to make the current icon slightly smaller and have somehow managed to make the forecast icon micro sized. Can’t seem to get it back now.

Thanks,

maestro82

@maestro82 Got it, a little trail and error.

Mykle1

@maestro82 said in Weatherunderground - currently - hourly - daily - configurable:

Got it, a little trail and error.

Perhaps you’ll share what you have done so that others might benefit from your experience? :-)

maestro82

@Mykle1
So by playing (I do mean playing as I am a newbie) with the MMM_WunderGround.css file, discovered:

.MMM-WunderGround .weather-icon (is the small forecast icon)
I was able to adjust size by changing the width.

.MMM-WunderGround .currentWeatherIcon (is large symbol next to current temp)
I was able to adjust the width and height % to change size.

Mykle1

Well done mate!

maestro82

Myke1

Can’t seem to figure out what controls font size of the forecasted precipitation % field. Any hints?

Thanks

Mykle1

@maestro82 said in Weatherunderground - currently - hourly - daily - configurable:

Any hints?
You can play with these in your custom.css file. GO crazy!

.MMM-WunderGround .weathericon {
  font-size: 45%;
  line-height: 5px;
  display: inline-block;
  -ms-transform: translate(0, -3px); /* IE 9 */
  -webkit-transform: translate(0, -3px); /* Safari */
  transform: translate(0, -3px);
} 
.MMM-WunderGround .day {
  padding-left: 0;
#  padding-right: 10px;
}

.MMM-WunderGround .vcen {
   vertical-align: top;
}

.MMM-WunderGround .weather-icon {
  padding-left: 0px;
  text-align: center;
  width:50px; 
}

.MMM-WunderGround .max-temp {
  padding-left: 0px;
  padding-right: 0;
}

.MMM-WunderGround .min-temp {
#  padding-left: 10px;
#  padding-right: 0;
}

.MMM-WunderGround .forecastText {
# padding-left: 10px;
#  padding-right: 0;
#  word-wrap: break-word;
#  text-align: right;
#  rowspan: 0;
}

.MMM-WunderGround .tableheader {
  font-size: 75%;
  text-align: center;
} 

.MMM-WunderGround .hour {
  font-size: 75%;
  text-align: center;
 } 

.MMM-WunderGround .pop {
  font-size: 86%;
} 
.MMM-WunderGround .mm {
  font-size: 75%;
} 

.MMM-WunderGround .green {
  color: #83FFB3;
}

.MMM-WunderGround .yellow {
  color: yellow;
}

.MMM-WunderGround .red {
  color: #FF4C4C;
}

.MMM-WunderGround .center {
	text-align: center;
	padding-right: 10px; 
}
	
.MMM-WunderGround .left {
	text-align: left;
}

.MMM-WunderGround .lpad {
	padding-left: 10px; 
}

.MMM-WunderGround .currentWeatherIcon {
  font-size: 75%;
  line-height: 45px;
  display: inline-block;
  -ms-transform: translate(0, -3px); /* IE 9 */
  -webkit-transform: translate(0, -3px); /* Safari */
  transform: translate(0, -3px);
  width: 40%;
  height: 40%;
} 

.MMM-WunderGround .forecastWeatherIcon {
  font-size: 75%;
  line-height: 65px;
  display: inline-block;
  -ms-transform: translate(0, -3px); /* IE 9 */
  -webkit-transform: translate(0, -3px); /* Safari */
  transform: translate(0, -3px);
  width: 50%;
} 

.MMM-WunderGround .moonPhaseIcon {
  height: 34px;
  vertical-align: middle;
} 

.MMM-WunderGround .hrDivider {
        font-size: 10px;
}

.MMM-WunderGround .sub {
    vertical-align: sub;
    font-size: smaller;
}

.MMM-WunderGround .smaller {
    font-size: 60%;
}

maestro82

@Mykle1 thanx

maestro82

Trying to tighten up my weather module.
See picture.

Any hints on changing those areas/fonts?

Thanks

MrRodz

Hi, I’m new to this but am trying to increase the number of icons on the horizontal view from 4 to 5. any help would be appreciated.

regards

sek_is_back

And at the end I need help.
In the last 3days i learned a lot about css in this forum.
But i didn’t find how to change the size for the Icons wind direction and speed.
I found in the MMM-WunderGround.js that there should be a weather-icons-wind.css
but I can’t find it.

Can anyone help me how to change the size and maybe the color?

AliAS

@maestro82 The top row is .MMM-WunderGround .pop
This will also affect the row pertaining to rain chance percentage. I’m trying to find a way to address them separately if anyone knows how.

AliAS

@sek_is_back add it into your custom.css file. It is referred to as

.MMM-WunderGround .tableheader

You can change
font-size:
and
color:

Sorry I don’t know how to post the code for you.

Mykle1

@AliAS said in Weatherunderground - currently - hourly - daily - configurable:

Sorry I don’t know how to post the code for you.

https://forum.magicmirror.builders/topic/4247/how-to-post-code-on-the-forum-for-absolute-beginners

sek_is_back

@AliAS thank you for your help, .MMM-WunderGround .tableheader dosn’t work for me. But Mykle1 wrote a post called “How to find and use key commands in MM” and with ctr + shift + i it opens the dev tool and i played around a little. So it was easy to find that the one that I missed, in my case it was .MMM-WunderGround .center

I like to learn new stuff, thanks a lot guys for your help

sebfas

This post is deleted!

D90

In a sad turn of events WeatherUnderground is no longer issuing free API keys :(

https://apicommunity.wunderground.com/weatherapi/topics/weather-underground-api-changes
https://www.wunderground.com/weather/api/

Mykle1

@d90

That has been for some time, I think. Older API keys still seem to work, unless that changes, too.

See weather in bottom bar.

teegray1124

so how can we use wuground without any api, since they longer offer it. i dont even have an old api key

Mykle1

@teegray1124

You can’t use wunderground without a wunderground api key.

You can try other weather modules that don’t use the Wunderground API. There are quite a few, the most popular being @cowboysdude’s MMM-NOAA