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.

    help with colors custom css

    Scheduled Pinned Locked Moved Custom CSS
    6 Posts 3 Posters 1.3k Views 4 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.
    • I Offline
      ifzer0c00lsucked
      last edited by ifzer0c00lsucked

      i am new to css and js files about two days in honestly. i can understand what i am looking at for the most part and research has helped me figure out much of what i am trying to get done. but as you can see in my picture for the current weather a few things are left grey still. feels like, current temp wind direction and wind icon. i am sure this has been covered ad nauseam so i apologise. i know it goes in my custom.css but i dont know the tags !

      lhere

      1 Reply Last reply Reply Quote 0
      • BKeyportB Offline
        BKeyport Module Developer
        last edited by

        is that darksky for the weather module? I’d ask @j-e-f-f for help on that.

        The "E" in "Javascript" stands for "Easy"

        1 Reply Last reply Reply Quote 0
        • lavolp3L Offline
          lavolp3 Module Developer
          last edited by lavolp3

          Since texts on my mirror are usually too dark I brightened up all generally styled texts in the custom.css. That works quite well for me.

          .dimmed {
            color: #f5f5f5;
          }
          
          .normal {
            color: #fbfbfb;
          }
          
          .bright {
            color: #ffffff;
          }
          

          Put this in your css/custom.css.
          You can try to change these color values to your liking.
          Everything that is not specifically colored by the module css and/or has .dimmed or .bright as class will be changed.

          For specifically styled texts that are not to your liking, you need to find out their class or id. Use your browser and its devtools for that.
          Find out the respective class/id and reference it in your custom.css like this:

          .MMM-Module .textClass (or #textID) {
            color: #fafafa
          }
          

          There’s some tutorials on css around here.
          Let us know if you need more help

          How to troubleshoot modules
          MMM-soccer v2, MMM-AVStock

          1 Reply Last reply Reply Quote 0
          • I Offline
            ifzer0c00lsucked
            last edited by

            TY! this has worked mostly making it easier while i mess around more to keep the news feed white. i appreciate the help

            1 Reply Last reply Reply Quote 0
            • I Offline
              ifzer0c00lsucked
              last edited by lavolp3

              1 step forward 2 steps back, still looking for help. so that worked well. however i am trying to leave the compliments white.
              i added a line for it but it does not seem to be working. check out my customer.css

              /* colors basic */
              
              dimmed {
                color: red;
              }
              
              .normal {
                color: red;
              }
              
              .bright {
                color: red;
              }
              
              /* compliment colors, currntly not working properly */
              
              .compliments .morning {
              color: white;
              }
              .compliments .afternoon {
              color: white;
              }
              .compliments .evening {
              color: white;
              }
              
              
              /* clock colors */
              
              .clock .time {
              color: red;
              }
              
              .clock .date {
              color: red;
              }
              
              .newsfeed .dimmed {
              	color: grey; 
              }
              
              .newsfeed .bright {
              	color: red; 
              }
              
              /* weather colors */
              
              .wi.dimmed.wi-sunrise + span, .wi.dimmed.wi-sunset + span {
                  color: red;
              }
              .dimmed.wi-strong-wind + span {
              color: red;
              
              }
               
               body {
              
              }
              .wi.dimmed.wi-sunset {
              color: red;
              }
              .wi.dimmed.wi-sunrise {
              color: red;
              }
              .wi-day-sunny {
              color: red
              }
              .wi-day-cloudy {
              color: red;
              }
              .wi-rain {
              color: red;
              }
              .wi-thunderstorm {
              color: red;
              }
              .wi-snow {
              color: red;
              }
              .wi-fog {
              color: red;
              }
              .wi-night-clear {
              color: red;
              }
              .wi-night-cloudy {
              color: grey;
              }
              .wi-night-showers {
              color: red;
              }
              .wi-night-rain {
              color: red;
              }
              .wi-thunderstorm {
              color: red;
              }
              .wi-night-snow {
              color: red;
              }
              .wi-night-alt-cloudy-windy {
              color: red;
              }
              .weatherforecast .wi-sunrise {
              color: red;
              }
              .weatherforecast .wi-sunset {
              color: red;
              }
              .weatherforecast .wi-day-sunny {
              color: red;
              }
              .weatherforecast .wi-night-showers {
              color: red;
              }
              .weatherforecast .wi-degrees {
              color: red;
              }
              .weatherforecast .wi-rain {
              color: red;
              }
              .weatherforecast .wi-showers {
              color: red;
              }
              .weatherforecast .wi-night-showers {
              color: red;
              }
              .weatherforecast .wi-night-alt-cloudy-windy {
              color: red;
              }
              .weatherforecast .wi-night-cloudy {
              color: red;
              }
              .weatherforecast .wi-cloudy {
              color: red;
              }
              .weatherforecast .wi-day-cloudy {
              color: red;
              }
              .weatherforecast .wi-cloudy {
              color: red;
              }
              .weatherforecast .wi-cloudy-windy {
              color: red;
              }
              .weatherforecast .wi-showers {
              color: red;
              }
              .weatherforecast .wi-thunderstorm {
              color: red;
              }
              .weatherforecast .wi-snow {
              color: red;
              }
              .weatherforecast .wi-fog {
              color: red;
              }
              .weatherforecast .wi-night-clear {
              color: red;
              }
              .weatherforecast .wi-night-rain {
              color: red;
              }
              .weatherforecast .wi-night-thunderstorm {
              color: red;
              }
              .weatherforecast .max-temp {
              	color: red;
              }
              
              
              1 Reply Last reply Reply Quote 0
              • lavolp3L Offline
                lavolp3 Module Developer
                last edited by

                @ifzer0c00lsucked said in help with colors custom css:

                however i am trying to leave the compliments white.
                i added a line for it but it does not seem to be working

                There is no class .morning or .afternoon in the compliments.
                You need to stick to classes, id’s or dom elements for css to apply.
                You can try

                .compliments span{
                color: white;
                }
                

                Every module can be referenced as a class.
                Here I tried to reference all < span > elements in the compliments module

                How to troubleshoot modules
                MMM-soccer v2, MMM-AVStock

                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