Custom Colors for Legacy Dashboard

Get Help
1

I have edited the customColors section of a Dashboard's JSON to customize tile colors for "variable-string" tiles.

Here are the entries I use:

"customColors": [
{
"template": "variable-string",
"bgColor": "rgb(239,15,127)",
"iconColor": "rgba(0,0,0,1.0)",
"state": "ALARM"
},
{
"template": "variable-string",
"bgColor": "rgb(21,162,42)",
"iconColor": "rgba(255,255,255,1.0)",
"state": "OK"
},
{
"template": "variable-string",
"bgColor": "rgba(55,55,55,0.64)",
"iconColor": "rgba(255,100,100,1.0)",
"state": "default"
},

The first two entries by themselves (without the third) yield the desired colors when the string variable is equal to "OK" or "ALARM".

However, when I add the third, "default" entry to the JSON it seems to negate the other two entries, so that the tile always displays with the "default" colors, even when the variable equals "OK" or "ALARM".

If I remove the third entry, string values other than "OK" and "ALARM" will simply display as white on black. I want my "default" entry to override this white on black behavior for those other values, while still keeping the two custom colors for "OK" and "ALARM"

Is there a way to achieve this that does not involve CSS?

2

I have found that as well, default is what overrides everything, including other set values, probably because "default" is used as the standard template if you go into the template editor on the dashboard settings. If you give default a value there, it overrides anything else, I assume because for that capability, default is the only option defined in the template editor, and it uses that as an override default, and only falls back to the other defined states if default is not defined at all.

I'm afraid your only option is to define your "default" color to every other possible value that may be displayed besides OK or ALARM. You can assign the variable to just be a space when it has no other value, and define that to a color, as a kind-of default color when empty.

"state": " ",

3

You might have to sit a tile underneath with the default colour and use an rgba bgcolor setting for the different states, with the default state left out, i.e. displaying the tile underneath. Would likely need some custom css to adjust the z-index's as well.

Not a "nice" option, but it might work. Although it does not entirely satisfy the last requirement of no css. Plus you wouldn't get control over the text / icon colour for the default state.

4

Yeah, the only issue there is that there is a default color for any tile that does not have a defined color, and that is light gray with white text. To see the tile under it as the correct color, the string-variable would have to be set in css to be transparent, but then you would not see the background colors change for the string-variable tile, as CSS transparent would override any defined template colors in the json.

I tried checking "Do Not Use Default Tile Colors" in the dashboard options, but I don't see where that does anything at all. With that checked, default colors are still used, and if default is not defined it still shows the gray with white default default colors.

5

Is there a "simple" CSS file that might achieve what I am trying to do? Whenever I look at CSS, I'm somewhat overwhelmed.

6

I don't think it is possible to set a background color based on the variable-string state in CSS, since it is a text value in this case, not really a state value the way the CSS presents states for other devices like contact sensors, or switches. You can set CSS based on the state values of those types of devices, since state is part of the class name.

It looks like you would need add some code to the webpage source itself, to run a script that pulls that text value out of that div and then decide what to do with that value to set the background. We cannot edit the source HTML on a dashboard page, so I don't think that is possible in this case.

I think the ability to do that with the json Layout file is as good as it gets.