• 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 color change

Scheduled Pinned Locked Moved Custom CSS
2 Posts 2 Posters 1.5k Views 2 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.
  • X Offline
    xTITUS MAXIMUSx
    last edited by Jan 2, 2022, 9:48 PM

    I am posting to hopefully solve the problem and some headache of changing the color or size to all the components for the default weather module. Below are all the sections with a short description of what they are. Make sure to place this code in the custom CSS file. Enjoy!

    .dimmed {
    color: DarkSlateGrey;  /* Feels like Temp section */
    }
    
    .module-header {
    color: DarkSlateGrey; /* Waether Forecase City, State section */
    }
    
    .dimmed.wi-strong-wind + span {
    color: DarkSlateGrey; /* text for the wind symbol */
    }
    
    .dimmed.wi-strong-wind {
    color: DarkSlateGrey; /* Wind symbol */
    }
    
    .weather .wi-sunset + span {
    color: DarkSlateGrey; /* sunset time */
    }
    
    .weather .wi-sunset {
    color: DarkOrange; /* sunset symbol */
    }
    
    .weather .wi-sunrise + span 
    color: DarkSlateGrey; /* sunrise time */
    }
    
    .weather. .wi-sunrise {
    color: DarkYellow; /* sunrise symbol */
    }
    
    .weather .day {
    color: DarkSlateGray; /* days list */ 
    }
    
    .weather .weathericon + span {
    color: DarkSlateGray; /* current temp */
    }
    
    .weather .weathericon {
    color: DarkSlateGray; /* icon nect to current temp (sets all icons the same color) */
    }
    
    .weather .min-temp {
    color: DarkSlateGray; /* minimum temp */
    }
    
    .weather .max-temp {
    color: DimGray; /* maximum temp */
    }
    
    

    MMM-Weather.png

    1 Reply Last reply Reply Quote 0
    • B Offline
      bigschucks
      last edited by Jan 14, 2022, 1:29 PM

      Thank you. Really looks cool. Genuinely emotional over how brilliant this looks. Recently started programming and am currently doing a small project.

      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