Custom colors for specific device tile

📝 Dashboards Hubitat Dashboard
1

I've searched and unfortunately I haven't found a specific answer, but as far as I can tell it is not possible, but wanted to post to make sure.

I know I can change specific templates tile colors using customColors in the JSON settings, but if you want to change for a specific device only based on state this isn't possible?

I have tried CSS styles as well in combination with state. I was hoping that device state would be part of the CSS generated by Dashboard, but state only gets added in the tile-primary area of the tile.

Is the only way to achieve this to create a custom template, say clone the "switch" template and then have custom colors added in the JSON config?

2

I just add the state to tile-primary in css:

#tile-40 .tile-primary.on{
background-color: rgba(75, 75, 75, 0.4) !important;
}

State can be on, off, open, closed, etc...

Edit: Sorry, I forgot that is going to give you a box that does not fill the borders, which is probably what you mean by only the tile-primary gets area gets changed with what you were doing with css.

3

Yes, but thank you. That part highlights where the icon is presented.

I wish Hubitat would place the state higher up in the HTML rendering so we could customize dashboard elements by state using css. I guess if I find a way to inject javascript into the page, I could do a parent reference of the .tile-primary object

4

yeah, the main tile background is set with a style, so it is out of reach to change.

There is a convoluted way to do this for one switch... by making the switch tile transparent and adding another tile under it with a lower z-index to provide the background color. You can use the "attribute" tile template in JSON to color its background based on the attribute value of the switch. So you can set attribute "on" and attribute "off" background colors for the attribute tile in JSON, and make a background attribute tile that uses switch attribute to put under the transparent switch tile.

This works, but you can only make one switch have different colors this way, once you use up the switch attribute values in JSON.

5

Try the following:

#tile-2[style*="background-color"] {
  width: 120px; 
  height: 120px;
  background-color: rgba(25,25,112,1) !important;
}
6

Yeah, I can change the color of a tile, but not based on the state (on, off, enabled, disabled, etc.). As noted above, the only place that Hubitat places the state in the DOM is in inside the tile. I can only change the tile background color based on state for an entire template, not a specific tile.

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
8

Although there are some limitations, I’ve successfully worked with nearly every tile I’ve encountered so far, including handling transitions between states.

image

you may also want to visit:

The Noob’s (in)complete guide to CSS for Hubitat

1 Like
9

Thanks, but I am changing specific devices, not templates to a color based on the state of the individual device. See my earlier post for what, at least for the moment, is a solution for this. Thanks again for your help.

10

Nice! That is a very handy trick to know about, glad you figured it out!

I suggest you post it to the CSS Hacks thread - others will want to use this as well, and this post may get buried.

1 Like