Help With Custom CSS on my Dashboard

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;
}

#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

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.

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

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.

Here is the CSS with a Yellow RGB value:

Capture2

I give. LOL

Ron

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

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:

Can anyone figure this out? Help?

Thanks,

Ron

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);
}

Tried it and it did not work.

Here is the CSS and Inspect:

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.

Thanks for all of your help.

Ron

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

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

Download the Hubitat app