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