I have a tile in my dashboard that uses the "Attribute" template to display a particular attribute value of a device. I'd like to color the background of the tile based on the text of that attribute value. For example, if my garage door status is "closed" i'd like to color the background of that tile green. If the door is open, the background of that tile is red. This is just an example of what I would like to do with an attribute tile.
I've searched through the Hubitat Forums and read the Noob's incomplete guide to CSS (which was very helpful for other customizations), but I didn't find anything for what I'm wanting to do. Any ideas or suggestions? Thanks.
I'm curious why use Attribute tile for this purpose? Doesn't the Garage template already do this for you? Or you could use your tilt sensor to also give the red/green status.
I don't see what you gain by using the Attribute tile?
Oh, and if you post in that CSS thread, it seems like there are a couple people that know CSS who respond there.
The garage template is just an example. I like to look at my dashboard and see all green with the tiles for a device template value instead of just gray.
The problem with trying to do that with an attribute tile is that the “content” is several layers inside the tile. So, while you can ascertain its value, only using CSS to change the color (or any other attribute) of the tile is higly problematic using the standard dashboard.
1 Like
My understanding is that abilities to change various settings on a tile based on state / value, whether it be the "simple" ones like color through the normal dashboard interface or even CSS "magic", most are based on states that are known and understood for the type of template being used, e.g. on and off states for a switch.
The best I can offer would be to create a virtual device using a driver that best matches the kind of states your attribute is likely to move through, such as closed and open like you mentioned for a garage door, then setup a rule to maintain the virtual device in line with the attribute values.
I know this sounds cumbersome. The "expected" approach as far as I am aware would be that the device driver you are using should indicate that it implements the right capability (template) to allow it to be used for the appropriate tile template, allowing you to use something like a contact sensor or similar template, showing an open / closed door, which would then allow you to set the CSS based on the states available for that template.
This certainly would not have made sense to me when I started out, so happy to elaborate on any part that doesn't make sense....
Simon
Alternatives to the approach from my last post, if you have multiple devices you would like to see as a group, would be to use either Average All from @Cobra or Device Watchdog from @bptworld. I use Average All to provide me a notification if doors are open in my garage when I transition to Night Mode, not that it is limited to that use case, it can also be used for a Dashboard tile. I use Device Watchdog to provide me with a group output of the state for multiple devices with colour-coding for their state:
Simon
Thanks for your suggestions. Currently, I'm actually doing something as you've described for my clothes washer status. My washer is plugged into a zigbee outlet which can monitor power. I've created a virtual on/off switch where I have a rule that turns it on if the power level is > 100 watts, else it is turned off. I have a tile on my dashboard for this virtual switch, and another transparent image tile on top of the virtual switch tile to prevent the switch from being manually turned on/off. I believe I also may have a little bit of custom CSS in there to color the background of the virtual switch green when on, gray when off. This all works fine, but takes a lot of effort. It would be nice if I could somehow color the background of a tile displaying an attribute instead of using a virtual switch (hence, my original question).
1 Like
The question of your last question would lead to the question of tile template I posed.... What template are you trying to use for your last devices...?
Sorry, I don't understand what you're asking.
Hmm, neither do I... 
I must have either posted late at night, on my phone with some kind of auto-correct, or both.
I think what I was wanting to know is what device drivers are you using for the different devices you are talking about in your original post. I mentioned earlier about how different drivers implement what HE calls capabilities, such as a switch, temperature, etc. This is what drives what states (if any) are available for you to use in applying formatting changes like you are describing. Knowing the driver, both whether they are Community developed ones or built-in, as well as what they are, may dictate the solutions that are available.
Simon
