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.6m 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.
    • L Offline
      LucianoMag @PhilReis
      last edited by

      @philreis Nice !!!:clapping_hands_light_skin_tone: :clapping_hands_light_skin_tone: :clapping_hands_light_skin_tone:

      1 Reply Last reply Reply Quote 0
      • S Offline
        SoleLo @Vulcain
        last edited by

        @vulcain I can’t seem to find the icon folder… could it be in another location?

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

          I try this icons: https://www.amcharts.com/free-animated-svg-weather-icons/

          0_1530823925424_icon.JPG

          But at the moment only the 3 icons on the picture works.

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

            @philreis said in Changing icons of the modules Current Weather and Weather Forecast:

            https://www.amcharts.com/free-animated-svg-weather-icons/

            These are awesome, can you walk me through how you did it?

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

              @SoleLo in the next few days i will implement the other icon. Then I’ll tell you how I did it.

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

                @philreis sounds great. Thanks!

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

                  I have add the other icons. But not all are properly positioned yet.
                  And a there is no icon for fog.
                  In the next few weeks I will position the icon correctly.
                  This solution is maybe not the best but it works!

                  Picture:

                  0_1531077724549_Mirror.JPG

                  For this icons you need this icon package:
                  https://www.amcharts.com/free-animated-svg-weather-icons/

                  Copy the icon from the folder “animated” to the folder “MagicMirror/css/icons”

                  Then you have to add this code to your “custom.css” file.

                  /* 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");
}

/* 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");
}

.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: 50px;
padding-left: 5px;
padding-top: 7px;
}

.weatherforecast .wi-cloudy {
content: url("/css/icons/cloudy.svg");
}

.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;
}

                  As I said not completely finished.

                  S K S T S 6 Replies Last reply Reply Quote 3
                  • S Offline
                    SoleLo @PhilReis
                    last edited by

                    @philreis said in Changing icons of the modules Current Weather and Weather Forecast:

                    https://www.amcharts.com/free-animated-svg-weather-icons/
                    This looks great so far. I’ll give it a try

                    1 Reply Last reply Reply Quote 0
                    • cowboysdudeC Offline
                      cowboysdude Module Developer
                      last edited by

                      Would be nice to find a free set of animated icons but anything worth having they are charging for sooooooooooooo…

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

                        @philreis ok got them changed, how did you get rid of the sun rise and sun rise time, along with wind speed, I tried a few custom.css codes but none seem to work

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

                          @solelo here is my currentweather config:

                                          {
                        "module": "currentweather",
                        "position": "top_right",
                        "config": {
                                "onlyTemp": "true",
                                "location": "Berlin",
                                "locationID": "1234567890",
                                "appid": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
                                }
                },

                          You have to add only “onlyTemp”: “true” to your config.js

                          1 Reply Last reply Reply Quote 0
                          • VulcainV Offline
                            Vulcain @SoleLo
                            last edited by

                            @solelo You have to create it, naviguate to css folder then execute “mkdir icon”, you’r done.

                            1 Reply Last reply Reply Quote 0
                            • K Offline
                              Kecko @PhilReis
                              last edited by

                              @philreis said in Changing icons of the modules Current Weather and Weather Forecast:

                              I have add the other icons. But not all are properly positioned yet.
                              And a there is no icon for fog.
                              In the next few weeks I will position the icon correctly.
                              This solution is maybe not the best but it works!

                              Picture:

                              0_1531077724549_Mirror.JPG

                              For this icons you need this icon package:
                              https://www.amcharts.com/free-animated-svg-weather-icons/

                              Copy the icon from the folder “animated” to the folder “MagicMirror/css/icons”

                              Then you have to add this code to your “custom.css” file.

                              /* 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");
}

/* 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");
}

.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: 50px;
padding-left: 5px;
padding-top: 7px;
}

.weatherforecast .wi-cloudy {
content: url("/css/icons/cloudy.svg");
}

.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;
}

                              As I said not completely finished.

                              hey man, thanks a lot! this makes things much easier.
                              TY for sharing your work :)

                              1 Reply Last reply Reply Quote 3
                              • 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

                                            Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                            Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                            With your input, this post could be even better 💗

                                            Register Login
                                            • 1
                                            • 2
                                            • 5
                                            • 6
                                            • 7
                                            • 8
                                            • 9
                                            • 15
                                            • 16
                                            • 7 / 16
                                            • 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