Dashboard Tile Defaults

Is there a way to determine the default RGB and opacity values for dashboard tiles? I simply want to change a switch template icon, for example. However, when I do so, it changes the background color for "ON" to match the color for "OFF". Therefore it no longer turns yellow when "ON". If that is the case, that is fine, but I want to match the default colors and opacity if I need to manually change it back.

Have you looked in Settings> Templates

You can make changes and reset default in there , or did I misunderstand the question?

I did do this, however, I want to just change the icon and it is changing the background color as well. Then I don't know the exact RGB and opacity values to change back.

If you have Chrome on desktop it's easy.

  • Right click a tile and choose to inspect it.
  • This will open the developer console and a bunch of HTML. It will also probably highlight the incorrect div.
  • If it highlights the incorrect div move your mouse over the HTML code and watch until you are highlighting ALL of the tile you want to get the color of. The id of this div should be tile-X where X is the position on the dashboard.
    image
  • Once you have found the correct div left click it so that its attributes are pinned to the second panel in the developer console.
  • From there it's super easy. If you don't see it already...
    image
    If you want to verify that you are looking at the correct background color you can uncheck and check the box next to it and it will clear the color.
1 Like

Great instructions. That helped a lot! I have all the info I need now. Thank you.

1 Like

The version of Firefox I'm using lists a rgba value:

image

so I used a RGBA to RGB converter to identify the RGB value of this 'Hubitat red'.

Excellent @Busthead... I was struggling with why when I put in RGB values, the color was different. Didn't know about RGB A.
@codahq had excellent advice.
Using Firefox, I tried "add attribute" in the code Inspector. I was able to uncheck the box for the value I put in for my "outlet", added the new attribute, with the RGB A. But I dont know how to save this. When I close the Style Inspector, the changes are lost.
Thoughts? Thanks. Bill
image

You cannot save anything from the inspector screen. It's just for testing and such. You need to add the code your dashboard CSS.

You'll need something like

#tile-1 {
background-color : rgba (0,255,0,0.78);
}

If you not sure what any of that is, this is great place to start.

@TechMedX Thanks very much, Look like CSS will prob be too much for me, but I will read.

Was simply trying (like @DBoenz927 about) to just get the original Hubitat default colors for a tile. So that I could put the values in on other tiles, for identical colors.
Or, like was said, just revert back to original.
The RGB A values are difficult, but I am trying @Busthead converter.
Thanks very much for the response!

in that case, on a dashboard click the settings cog, then go to templates. Each template state color is listed, and can be change as you like.

Pro tip - the "A" in RGBA stands for "Alpha" which sets opacity. The 'transparency' slider shown with the checker on left side, is the visual representation of that number.

In this example it translates to 0.75 or 75% full. Hope this helps.

image

@TechMedX
I really want to say thank you, sincerely. You will be happy to know, I have started reading CSS info! :slight_smile:
I'm getting there on (regular) dashboards, but I think I'm missing something.
You mentioned "then go to templates. Each template state color is listed, and can be change"...
I know I was instructed (& learned) how to use "Inspector", to find (either) RGB or RGBA values. And you just taught me about the slider (in "templates") for opacity.
I guess I was just wishing that looking at a brand new dashboard, and inside "templates", the original, default, out of the Hubitat box values would be right there.
But thank you VERY much for helping a new guy in the CSS world!
Bill
:slight_smile:
image

1 Like

My pleasure. Feel free to tag me for help

Make sure you know "that" value is "right there" rgba (0, 0, 0, 1) is absolute black at 100% :wink:

Pro tip - think of each slider as a scale from left to right

0.0-1.0 (or 0% to 100%) is "A" at the top (one down from top, very top one is just a guide line)

0-255 for RGB (Red, Green, and Blue)

Can anyone tell me what the rgba value of a hubitat default state dashboard tile actually is? This thread has talked about it but not actually stated the results of the inspections :slight_smile: (NB I don't see it in the inspector - only for those tiles that are not default colour). I've made a solid colour that looks just like it, but I'd rather set up a template that is identical to default