Help With Custom CSS on my Dashboard

📝 Dashboards Hubitat Dashboard
1

Hello,

I've been trying to use custom CSS on my Dashboard for the Openweathermap-alerts weather driver tile with description as the attribute. It's background color is now blue. I'd like to change it. I've tried custom CSS for the tile #64. I've tried CSS for the tile-contents, tile-primary, and tile-edits. Nothing seems to work on this particular tile. Although I am not a CSS coder. I am trying trial and error. My other CSS does seem to work on other tiles. How do I change the backgroun d color on this tile?

Here is the CSS that does work on my dashboard:

.tile-title::after {
visibility: visible;
position: absolute;
text-align: center;
left: inherit;
right: 0;
bottom: 0;
white-space: pre-wrap;
}

#tile-36 .tile-title, #tile-37 .tile-title, #tile-46 .tile-title {
visibility: hidden;
white-space: nowrap !important;
overflow: unset;
}

#tile-36 .tile-title:after {
content: 'Weather Alerts';
}

#tile-37 .tile-title:after {
content: 'Current Temperature';
}

#tile-46 .tile-title:after {
content: 'Low Temperature';
}

/*
#tile-60 .tile-primary {
color: rgb(0, 0, 0);
background-color: rgb(255,255,240);
}
*/

#tile-60 .tile-title {
color: rgb(0, 0, 0);
background-color: rgb(255,255,102);
}
#tile-61 .tile-title {
visibility: hidden;
}
#tile-62 .tile-title {
visibility: hidden;
}

2 
#tile-64 {
      background:linear-gradient(180deg,black,navy,blue,gray);
}

or

#tile-64 {
      background-color:orange;
}

or

#tile-64 {
      background-color: rgb(127,255,255);
}

all should be valid combinations.

1 Like
3

Tried all. No effect on the background color of the tile. Don't I have to specify a tile class like content or primary, etc.

4

#tile-64 should affect the entire tile (it's the id parameter for the high level div).

5

Thanks. Not sure what's wrong but no big deal. I just can't figure it out. No matter what I put in the CSS, the background color does not change. Here is the tile, the Inspect, and the CSS. It is the lower right tile and is tile-64.

Capture1
Capture11318×654 98.6 KB

Here is the CSS with a Yellow RGB value:

Capture2

I give. LOL

Ron

6

I see the issue.... the tile has a hardcoded style for the background color already. Try

div#tile-64 [style*="background-color: rgb(21, 66, 293);"] {
background-color: rgb(255,255,102);
}

1 Like
7

Thanks. I tried this. No effect. It appears from the Inspect that the background color is inherited from the "Tile Attribute" Not sure how this works. I'm learning. here are the CSS, the Tile, and the tile-64 Inspect screens:

Capture css
Capture css694×287 15.2 KB

Capture inspect
Capture inspect1313×947 123 KB

8

Can anyone figure this out? Help?

Thanks,

Ron

9

Let's take another swing at this, how about:

div#tile-64.tile.attribute[style*="background-color: rgb(21, 66, 293);"] {
background-color: rgb(255,255,102);
}
10

Tried it and it did not work.

Here is the CSS and Inspect:

Capture css
Capture css840×258 14.3 KB

Capture inspect
Capture inspect1453×1111 193 KB

I give up. Not sure why this won't work. But I do appreciate all of your help and assistance. I doubt you can get it working unless you install the tile on a Desktop of your and play with it on your machine. The dashboard tile is: OpenWeatherMap-Alerts Driver with the attribute chosen of "alertDescr" to display.

OpenWeatherMap-Alerts Weather Driver that is installed from Hubitat Package Manager.

Capture
Capture2296×1140 92.2 KB

Thanks for all of your help.

Ron

11

I actually have that driver installed but don't have a default background color for the attribute tile unless I modify the template.

12

My tile has the dark blue as the default from the driver.