MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Weatherunderground - currently - hourly - daily - configurable

    Scheduled Pinned Locked Moved Utilities
    182 Posts 47 Posters 357.6k Views 51 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M Offline
      maestro82 @maestro82
      last edited by

      @maestro82 Got it, a little trail and error.

      Mykle1M 1 Reply Last reply Reply Quote 1
      • Mykle1M Offline
        Mykle1 Project Sponsor Module Developer @maestro82
        last edited by

        @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? :-)

        Create a working config
        How to add modules

        M 1 Reply Last reply Reply Quote 0
        • M Offline
          maestro82 @Mykle1
          last edited by

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

          1 Reply Last reply Reply Quote 1
          • Mykle1M Offline
            Mykle1 Project Sponsor Module Developer
            last edited by

            Well done mate!

            Create a working config
            How to add modules

            1 Reply Last reply Reply Quote 0
            • M Offline
              maestro82
              last edited by

              Myke1

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

              Thanks

              Mykle1M 1 Reply Last reply Reply Quote 0
              • Mykle1M Offline
                Mykle1 Project Sponsor Module Developer @maestro82
                last edited by

                @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%;
                }
                
                

                Create a working config
                How to add modules

                M 1 Reply Last reply Reply Quote 0
                • M Offline
                  maestro82 @Mykle1
                  last edited by

                  @Mykle1 thanx

                  1 Reply Last reply Reply Quote 0
                  • M Offline
                    maestro82
                    last edited by

                    Trying to tighten up my weather module.
                    See picture.

                    Any hints on changing those areas/fonts?

                    Thanks0_1516485078813_IMG_6169.JPG

                    A 1 Reply Last reply Reply Quote 0
                    • M Offline
                      MrRodz
                      last edited by

                      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

                      1 Reply Last reply Reply Quote 0
                      • S Offline
                        sek_is_back
                        last edited by

                        0_1517383419416_IMG_0862.JPG

                        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?

                        A 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 15
                        • 16
                        • 17
                        • 18
                        • 19
                        • 17 / 19
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy