Custom colors for specific device tile

📝 Dashboards Hubitat Dashboard
7

I may have found a CSS solution after all. Still testing to do, and again Hubitat if you are listening, it would be nice to have the device state further up in the parent DOM so it would be easier to do, but after digging out my old website tricks notes, I found a pseudo class that may do the trick.

This searches the current DOM element for an occurrence of a specified child, I included the full class reference that the state style class is assigned to just in case, not sure if .tile-primary would be needed until I see how dashboard tiles are rendered for other devices??)

#tile-5:has(.tile-primary.off) {
    background-color: rgba(255,0,0,.5) !important;
}

#tile-5:has(.tile-primary.on) {
    background-color: rgba(0,0,255,.5) !important;
}

This seems to do it! At least it works on my browser devices using the latest browsers (ios, chrome). :has() - CSS | MDN

2 Likes