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.

    Changing icons of the modules Current Weather and Weather Forecast

    Scheduled Pinned Locked Moved Development
    301 Posts 30 Posters 1.3m Views 33 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
      mmille40
      last edited by

      @philreis Thank you for taking the time to show your code! I copied and pasted your code exactly and made sure all of my folders holding the icons are in the right place. My “Current Weather” has the new icon, but for the life of me I cannot get the “Weather Forecast” to show the new icons. Was there another step to get it to work?

      P 1 Reply Last reply Reply Quote 0
      • S Offline
        Smotx @PhilReis
        last edited by

        @philreis Thanks for code !

        P 1 Reply Last reply Reply Quote 0
        • P Offline
          PhilReis @mmille40
          last edited by PhilReis

          @mmille40 you must copy the icons in the CSS folder (/css/icons/) and add the code to your custom.css only.
          But it works only with the standard weatherforecast module.

          Here is my current config for the custom icon.

          /* 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");
          padding-right: 20px;
          padding-top: 10px;
          }
          
          /* 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");
          height: 45px;
          padding-left: 8px;
          padding-top: 10px;
          }
          
          .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: 45px;
          padding-left: 5px;
          padding-top: 7px;
          }
          
          .weatherforecast .wi-cloudy {
          content: url("/css/icons/cloudy.svg");
          height: 50px;
          padding-left: 5px;
          padding-top: 7px;
          }
          
          .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;
          }
          
          M 1 Reply Last reply Reply Quote 0
          • P Offline
            PhilReis @Smotx
            last edited by

            @smotx you’re welcome, no problem

            1 Reply Last reply Reply Quote 0
            • M Offline
              mmille40 @PhilReis
              last edited by

              @philreis I’ll try that out, I’m unsure what you mean by “you must copy the icons in the CSS folder”. Thank you for your response!

              1 Reply Last reply Reply Quote 0
              • T Offline
                Tagriel @PhilReis
                last edited by

                @philreis wow man it’s beautiful!!! I have a question for you, I’ve been wondering if instead of having an svg it could be done via js and css, like this project here:
                https://codepen.io/anon/pen/JmQqOw

                P 1 Reply Last reply Reply Quote 0
                • P Offline
                  PhilReis @Tagriel
                  last edited by

                  @tagriel i have used svg Icons because it was easier for me.
                  I can try to make a solution with the CSS Icons which you have linked here.

                  T 1 Reply Last reply Reply Quote 0
                  • T Offline
                    Tagriel @PhilReis
                    last edited by

                    @philreis I’m wondering because my raspberry heat goes way up after displaying the new weather icons. I thought it might be bc of the svg files, does it happen to you? (are you using a raspberry?). I also wanted to share something with you, if I don’t have any modules, lets say, on my top_left screen, the current weather module only displays the degree without any icons, and if I add any other module to the top-left screen, then I can see the icons, its pretty strange :( do you happen to know what might be happening? I’ve been reading the code almost line by line trying to find if there is a table or div anywhere missing but I can’t seem to find anything.

                    P 1 Reply Last reply Reply Quote 0
                    • P Offline
                      PhilReis @Tagriel
                      last edited by

                      @tagriel i will test it.

                      1 Reply Last reply Reply Quote 0
                      • T Offline
                        Tagriel
                        last edited by

                        Thanks man! I’ve also got a question for you, it’s breaking my head, I’ve given a lot of days of debugging and searching what might be happening but I don’t find an answer.

                        If I have my currentweather module on top_left alone, there’s no weather icon
                        0_1541452997075_Captura de pantalla 2018-11-05 a las 22.20.25.png

                        BUT if I put any other module on top_left below my current weather module, I can see the icon :'(
                        0_1541453036867_Captura de pantalla 2018-11-05 a las 22.19.38.png

                        I just don’t understand what I’m doing wrong, do you have any ideas?

                        Thanks in advance!

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 30
                        • 31
                        • 3 / 31
                        • 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