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

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.
  • D Offline
    DanielAntos90
    last edited by Apr 10, 2021, 10:09 AM

    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 Apr 10, 2021, 2:32 PM Reply Quote 0
    • G Offline
      George @DanielAntos90
      last edited by Apr 10, 2021, 2:32 PM

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

      1 Reply Last reply Reply Quote 0
      • D Offline
        DanielAntos90
        last edited by Apr 10, 2021, 3:21 PM

        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 Apr 15, 2021, 3:33 PM Reply Quote 1
        • B Offline
          bachoo786 @DanielAntos90
          last edited by Apr 15, 2021, 3:33 PM

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

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