String variable change tile color

[croweflight]

I have been working on dashbords. I want a tile to display the status of my Abode alarm system. I was able to do that using a String Hub Variable with a variable tile. So I am thinking it would be nice if I could get that variable tile to change color based on the String.

Not being very well practiced at dashboard yet, I thought of adding an action to the rule which controls the value in the string variable.

That imagined action does not exist. So I did more research and noticed that css may be the solution and going off of some similar

tile-11:has(.Standby) { background-color: rgba(192,0,0,.5)!important; }

I added this to css and nothing at all happened. Like it was not even there.

So that brings me here. With a variable tile, if it is possible, how would I go about it?

Thanks

[chrisbvt]

You can do that by manually editing the JSON Template in the dashboard settings under advanced.

You can add to the "customColors" section. Add sections for each value color you want. In this Case, the color is changed based on "OK" value in the state line:

{
  "template": "variable-string",
  "bgColor": "rgba(37,156,39,0.52)",
  "iconColor": "",
  "state": "OK",
  "customIcon": ""
}

Note, if you use rgba, the last value is opacity. 0-1. Also, each section must be comma separated, as you will see in the format.

You can also add to the CSS file to change the title, if desired.

/* change the title of variable string tile*/
#tile-36 div.flex-grow-0 {
visibility: hidden;
white-space: nowrap !important;
overflow: unset;
}
#tile-36 div.flex-grow-0:after { visibility: visible !important; position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); overflow: hidden;
white-space: nowrap !important; content: "My New Title" !important; }

[croweflight]

Thank you for taking the time to write an example. I added in three additions to the custom color section. Json took it.

I reloaded the dashboard but when the string value changes and it does in the tile, the back ground color stays grey.

What did I miss?

[chrisbvt]

@croweflight

What did I miss?

I'm thinking now it must be made into a variable connector on the Hub Variables page for this to work. Then you add the variable connector device to the dashboard, and choose Variable String template for that device.

I haven't tried it with a non connector variable, apparently. That also explains why I felt the need to throw in the CSS to change the title that I use, as when you use a connector device on the dashboard, it just gets the title of "variable".

Sorry about that, it adds a bit more to it to have to add the CSS to change the title of the tile so it will not just read variable. If the title does not look like it is in the right place, play with the left and top % to get it where you want it.

[croweflight]

Turns out all I needed to do after converting to a connector, was to relocate the default "state" to the bottom of the custom color section. The CSS part was not needed. Thank you for pointing me in the right direction. I learned a lot from this exercise.

[chrisbvt]

Ah yes, I have seen where the default state messes with custom colors for templates like string-variable and attribute. You could just get rid of default state as well. Glad you got it working! Attribute template is handy with modified json too, to change colors based on any attribute value from any device.