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.

    Default weather module modification in custom.css

    Scheduled Pinned Locked Moved Custom CSS
    4 Posts 3 Posters 2.5k Views 3 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.
    • DanielAntos90D Offline
      DanielAntos90
      last edited by

      Hi,

      does anyone know how to modify new default weather module in custom.css? I would like to change weather icon colors and size of ‘feels like’ text in custom.css. I was trying something like this:

      .weather .day-sunny {
           color: #ffff00;
      }
      

      but it doesnt work. Thank you in advance

      G 1 Reply Last reply Reply Quote 0
      • G Offline
        George @DanielAntos90
        last edited by

        @danielantos90 , https://forum.magicmirror.builders/topic/1302/colors-changed?page=1

        1 Reply Last reply Reply Quote 0
        • DanielAntos90D Offline
          DanielAntos90
          last edited by

          I’ve already check this thread. Unfortunatelly this doesn’t work for new weather module. Anyway I finally figure it out:

          .weather .weather-icon .wi-day-sunny{
            color: #ffff00;
          }
          .weather .weather-icon .wi-day-cloudy{
            color: #aaa;
          }
          .weather .weather-icon .wi-cloudy{
            color: #aaa;
          }
          .weather .weather-icon .wi-cloudy-windy{
            color: #aaa;
          }
          .weather .weather-icon .wi-showers{
            color: #55acee;
          }
          .weather .weather-icon .wi-rain{
            color: #55acee;
          }
          .weather .weather-icon .wi-thunderstorm{
            color: #ff00ff;
          }
          .weather .weather-icon .wi-snow{
            color: #fff;
          }
          .weather .weather-icon .wi-fog{
            color: #999;
          }
          .weather .weather-icon .wi-night-clear{
            color: #fff;
          }
          .weather .weather-icon .wi-night-cloudy{
            color: #aaa;
          }
          .weather .weather-icon .wi-night-showers{
            color: #55acee;
          }
          .weather .weather-icon .wi-night-rain{
            color: #55acee;
          }
          .weather .weather-icon .wi-night-thunderstorm{
            color: #ff00ff;
          }
          .weather .weather-icon .wi-night-snow{
            color: #fff;
          }
          .weather .weather-icon .wi-night-alt-cloudy-windy{
            color: #aaa;
          }
          
          .weather .wi-day-sunny{
            color: #ffff00;
          }
          .weather .wi-day-cloudy{
            color: #aaa;
          }
          .weather .wi-cloudy{
            color: #aaa;
          }
          .weather .wi-cloudy-windy{
            color: #aaa;
          }
          .weather .wi-showers{
            color: #55acee;
          }
          .weather .wi-rain{
            color: #55acee;
          }
          .weather .wi-thunderstorm{
            color: #ff00ff;
          }
          .weather .wi-snow{
            color: #fff;
          }
          .weather .wi-fog{
            color: #999;
          }
          .weather .wi-night-clear{
            color: #fff;
          }
          .weather .wi-night-cloudy{
            color: #aaa;
          }
          .weather .wi-night-showers{
            color: #55acee;
          }
          .weather .wi-night-rain{
            color: #55acee;
          }
          .weather .wi-night-thunderstorm{
            color: #ff00ff;
          }
          .weather .wi-night-snow{
            color: #fff;
          }
          .weather .wi-night-alt-cloudy-windy{
            color: #aaa;
          }
          .weather .wi-strong-wind {
            color: #e0fbff;
          }
          .weather .wi-sunset {
            color: #ffa500;
          }
          .weather .wi-sunrise {
            color: #ffa500;
          }
          

          191f70eb-7d5a-40ea-be50-c5ec8b6a2d6b-image.png

          B 1 Reply Last reply Reply Quote 1
          • B Offline
            bachoo786 @DanielAntos90
            last edited by

            @danielantos90 did you manage to change the font size of “feels like” ??

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