CSS stumped

Being working to fine tune dashboards using extra CSS code on traditional dashboards.

After some experimenting was able to get a toggle switch icon to turn from white to black and bold font when the switch is on (because background is yellow). Seems to work fine.

.tile-primary.on .material-icons {
color: black;
font-weight: bold;
}

I wanted to change the tile title to black as well when the switch is on but I can't seem to get that to work. I thought the code below would work but only the switch toggle changes color and font size..

.tile-primary.on .material-icons,
,tile-primary.on .tile-title {
color: black;
font-weight: bold;
}

Then I tried separating things and still no luck

.tile-primary.on .material-icons {
color: black;
font-weight: bold;
}

.tile-primary.on .tile-title {
color: black !important;
}

But this works to change title color to black

.tile .tile-title {
color: black !important;
}

I thought .tile-primary.on would trigger on the active switch but the rest would be the resultant action. Maybe I can;t do this across different classes?

Any help appreciated.. I'm a newbee at CSS...

image

image

Background color changes based on state are probably best done in the Template Editor or directly in the JSON Layout under customColors. Is there a reason you are not using background colors set that way?

1 Like

Ahhh yes a newbee error. That fixed it... Thanks....