• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

change current weather colors - time and wind

Scheduled Pinned Locked Moved Development
16 Posts 5 Posters 15.5k Views 5 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.
  • K Offline
    karde @strawberry 3.141
    last edited by Oct 28, 2016, 4:24 PM

    @strawberry-3.141 I’ll be happy to!
    But, to be honest, the picture I have included in the post isn’t my actual mirror, I’ve sent you a private message :)!

    S 1 Reply Last reply Oct 28, 2016, 6:27 PM Reply Quote 0
    • S Offline
      strawberry 3.141 Project Sponsor Module Developer @karde
      last edited by strawberry 3.141 Oct 28, 2016, 6:38 PM Oct 28, 2016, 6:27 PM

      @karde this is for the default module currentweather and not as I thought MMM-WunderGround

      /* wind speed selector */
      .currentweather > .module-content > div > div.normal.medium > *:nth-child(2),
      /* wind direction selector */
      .currentweather > .module-content > div > div.normal.medium > *:nth-child(3),
      /* sunset/sunrise time selector */
      .currentweather > .module-content > div > div.normal.medium > *:nth-child(6){
          color: orange;
      }
      

      Please create a github issue if you need help, so I can keep track

      1 Reply Last reply Reply Quote 1
      • K Offline
        karde
        last edited by karde Oct 28, 2016, 6:38 PM Oct 28, 2016, 6:36 PM

        THANK YOU! And thanks everyone for all your time, I really appreciate it - alot!!!

        1 Reply Last reply Reply Quote 0
        • ? Offline
          A Former User
          last edited by A Former User Oct 28, 2016, 8:56 PM Oct 28, 2016, 8:51 PM

          2_1477687812010_Screenshot 2016-10-29 03.45.42.png 1_1477687812010_Screenshot 2016-10-29 03.45.36.png 0_1477687812008_Screenshot 2016-10-29 03.45.31.png

          Does anyone know where the CSS is managed for these Icons so can edit the colours?

          Also has anyone done this already? and is there anything that needs special attention when doing?

          Guessing custom CSS against

          “01d”: “wi-day-sunny”,
          “02d”: “wi-day-cloudy”,
          “03d”: “wi-cloudy”,
          “04d”: “wi-cloudy-windy”,
          “09d”: “wi-showers”,
          “10d”: “wi-rain”,
          “11d”: “wi-thunderstorm”,
          “13d”: “wi-snow”,
          “50d”: “wi-fog”,
          “01n”: “wi-night-clear”,
          “02n”: “wi-night-cloudy”,
          “03n”: “wi-night-cloudy”,
          “04n”: “wi-night-cloudy”,
          “09n”: “wi-night-showers”,
          “10n”: “wi-night-rain”,
          “11n”: “wi-night-thunderstorm”,
          “13n”: “wi-night-snow”,
          “50n”: “wi-night-alt-cloudy-windy”
          },

          ? 1 Reply Last reply Oct 28, 2016, 9:12 PM Reply Quote 0
          • ? Offline
            A Former User @Guest
            last edited by Oct 28, 2016, 9:12 PM

            @wjdw87 said in change current weather colors - time and wind:

            2_1477687812010_Screenshot 2016-10-29 03.45.42.png 1_1477687812010_Screenshot 2016-10-29 03.45.36.png 0_1477687812008_Screenshot 2016-10-29 03.45.31.png

            Does anyone know where the CSS is managed for these Icons so can edit the colours?

            Also has anyone done this already? and is there anything that needs special attention when doing?

            Guessing custom CSS against

            “01d”: “wi-day-sunny”,
            “02d”: “wi-day-cloudy”,
            “03d”: “wi-cloudy”,
            “04d”: “wi-cloudy-windy”,
            “09d”: “wi-showers”,
            “10d”: “wi-rain”,
            “11d”: “wi-thunderstorm”,
            “13d”: “wi-snow”,
            “50d”: “wi-fog”,
            “01n”: “wi-night-clear”,
            “02n”: “wi-night-cloudy”,
            “03n”: “wi-night-cloudy”,
            “04n”: “wi-night-cloudy”,
            “09n”: “wi-night-showers”,
            “10n”: “wi-night-rain”,
            “11n”: “wi-night-thunderstorm”,
            “13n”: “wi-night-snow”,
            “50n”: “wi-night-alt-cloudy-windy”
            },

            Yep some, getting there slowly…0_1477689106951_Screenshot 2016-10-29 04.10.57.png

            body {

            }
            .wi.dimmed.wi-sunset {
            color: orange;
            }
            .wi.dimmed.wi-sunrise {
            color: yellow;
            }
            .wi-day-sunny {
            color: yellow;
            }
            .wi-day-cloudy {
            color: yellow;
            }
            .wi-rain {
            color: grey;
            }
            .wi-thunderstorm {
            color: grey;
            }
            .wi-snow {
            color: white;
            }
            .wi-fog {
            color: white;
            }
            .wi-night-clear {
            color: white;
            }
            .wi-night-cloudy {
            color: grey;
            }
            .wi-night-showers {
            color: blue;
            }
            .wi-night-rain {
            color: blue;
            }
            .wi-thunderstorm {
            color: yelow;
            }
            .wi-night-snow {
            color: white;
            }
            .wi-night-alt-cloudy-windy {
            color: grey;
            }

            1 Reply Last reply Reply Quote 0
            • K Offline
              karde
              last edited by karde Oct 29, 2016, 11:47 AM Oct 29, 2016, 11:45 AM

              I’m no expert on CSS, got my information from @Anachor’s post:
              https://forum.magicmirror.builders/topic/356/change-currentweather-colors,

              But you seem to have the hang on it, not sure if it helps you, but look in:
              ~/MagicMirror/modules/default/currentweather/ and do a grep in the .js file:
              cat currentweather.js | grep wi-

              To find out what the icons look at/represent, look at:
              https://erikflowers.github.io/weather-icons/

              I have also done some of this with the following code:

              #module_4_currentweather header {
              color: #FFFFFF;
              border-bottom: 1px solid #FFFFFF;
              }

              #module_4_currentweather .wi-sunrise {
              color: #F2E791;
              }

              Not sure what’s best, the module number is from your config.js file and the module_4 is the just module number from your config file, the fourth module.
              But like I said, might be some better way to do things, but It works for me :).

              1 Reply Last reply Reply Quote 0
              • ? Offline
                A Former User
                last edited by Oct 29, 2016, 11:48 AM

                Many thanks, actually just removed CW in exchange for WeatherUnderground (feed directly from the property and API’d down) so more realistic for us.

                Got to do the colours there next, for the icons, currently having troubles with the “C” instead of Celsius symbol :/

                1 Reply Last reply Reply Quote 0
                • 1
                • 2
                • 2 / 2
                2 / 2
                • First post
                  14/16
                  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