MMM-homeassistant-sensors Text Color

[scuppasteve]

So i have this module working great, but the text is grey and is almost invisible. I tried to edit it via custom.css. Any advice would be great.

My custom.css looks like this:

.MMM-homeassistant-sensors {
  color: #FFFFFF;
}

[sdetweil]

@scuppasteve said in MMM-homeassistant-sensors Text Color:

.MMM-homeassistant-sensors {

u need the class name of the text… u are going to override the class values…

wrapper.className = ‘dimmed small’;

.MMM-homeassistant-sensors.dimmed {
color: #FFFFFF;
}

[scuppasteve]

@sdetweil

I tried what you suggested and it didn’t seem to have an effect. Is there something that i need to do in the /css/main.css to make the /css/custom.css load?

[sdetweil]

@scuppasteve no… custom.css is force loaded by the runtime.

try a space between the module name and the .dimmed

[scuppasteve]

I tried the following to no effect, not sure what the issue is.

wrapper.className = 'dimmed small';

.module.MMM-homeassistant-sensors .dimmed {
  color: #FFFFFF;
}

and

wrapper.className = 'dimmed small';

.MMM-homeassistant-sensors .dimmed {
  color: #FFFFFF;
}

[sdetweil]

@scuppasteve said in MMM-homeassistant-sensors Text Color:

.module.MMM-homeassistant-sensors .dimmed {
color: #FFFFFF;
}
that one is wrong for sure

[scuppasteve]

I got it figured out, i appreciate the help in getting this figured out.

.MMM-homeassistant-sensors .dimmed {
  color: #FFFFFF;
}

[sdetweil]

@scuppasteve cool… how is that one different than your second one?

[edd189]

@sdetweil

Any idea how I can change the text color of one specific word in this module?

I want “peak” to be red, “shoulder” yellow, and “off-peak” green.

I messed around with the custom.css file, but it doesnt look like it accepts conditional formatting.

[sdetweil]

@edd189 find the element, see if it has a class, if so use it

if not, figure the html path to get there and use that

either in custom.css

each entry for magicmirror
starts with the module name as a class

.modulename xxxx {
   styles
}

xxx is a selector clause (selects the elements the enclosed styles will apply to
they can be quite explicit…
here is one from my MMM-Config module, to hide a generated element I don’t want to show

.possibly-hidden-tab div:nth-child(2)  > div > div >div >ul >li:only-child >a[rel*="Item 1"] {
  display: none;
}

I use this to remind me of the css selector clause elements
https://www.w3schools.com/cssref/css_selectors.php

there is currently no selector clause attribute that can examine the text content of an element… there is a spec proposal to extend .has() to allow text elements…