Weatherunderground - currently - hourly - daily - configurable

[Fonfon]

@j.e.f.f ok layout change i’m in a horizontale style not verticale
thanks man ;)

[fredall]

Hi is it possible to combine the horizontal view for the hourly forecast and vertical for daily ?

[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.