MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    help with colors custom css

    Custom CSS
    3
    6
    668
    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
      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
      • BKeyport
        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
        • lavolp3
          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
            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
              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
              • lavolp3
                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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy