help with colors custom css

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

BKeyport

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

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

ifzer0c00lsucked

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

ifzer0c00lsucked

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;
}

lavolp3

@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