Special Switch Template in Dashboard to mimic Modes

[dan1]

Thanks for the reply! So I've gone down the rabbit hole of adding CSS to change the look of an individual tile, and I'm close but I can't quite nail it.

(The Tile ID I'm working with is 57)

If I do this:

#tile-57 .on {
background-color: blue !important;
}

#tile-57 .off {
background-color: black !important;
}

I get almost the behaviour I want, but the image looks weird:

Now, I read a number of threads, many of which you replied to - I tweaked the CSS a bit, if I do as somebody said in this post:

Custom dashboard colors per dashboard

That is the fallacy of the switch tile. if you don't mind testing a few changes to see if we can get rid of the box in the box. So that you don't have to clear what you already have done, comment them out, then copy and paste the following: /* ON */ #tile-2[style*="background-color"] { width: 120px; height: 120px; background-color: red !important; animation: animate 1s linear infinite; } @keyframes animate { 0%{ opacity: 0.3; } 50%{ opacity: 0.7; } 100%{ opacity: 0…

/* ON /
#tile-57[style="background-color"] {
background-color: blue !important;
}
/* OFF */
#tile-57 {
background-color: black !important;
}

The tile looks fine, but there is no way to reference the on or off state.... it just stays blue regardless of state.

I also cannot figure out the attribute to show a custom icon (even one from the default repository) that I can reference in the CSS? customIcon does not seem to have any effect.