The Noob's (in)complete guide to CSS for Hubitat

Mobile Apps
#251

I am lost and frustrated. I am simply trying to replace some of the text on the tiles in the Dashboards. I have tried to copy/past the suggested CSS using "visibility: hidden" and "::after w/ content=" with no luck. I can get the ::after to work (it adds the new text after the existing text), but as soon as I add the "visibility: hidden" all of the text for that element disappears. Any suggestions? Here is a sample of the CSS I've using:

#tile-3 .tile-secondary {
visibility: hidden;
}
#tile-3 .tile-secondary:after {
content: 'Main';
}

#252

The "visibility: hidden" will hide that part of the tile, at least that is my understanding. Could you not just remove that part of the CSS? Sorry if I am missing the point here... Were you wanting to only see "Main"? Perhaps some screenshots may also help?

#253

Try:

#tile-3 .tile-secondary {
font-size:0px;
}
#tile-3 .tile-secondary:after {
content: 'Main';
font-size:8px;
}
1 Like
#254

Could you not adjust the secondary content to be an empty string as another alternative?

#255

Maybe I over looked this. Adding a custom color to the background of a tile. I have a set of four switches and would like each one to be a different color background.

#256 
#tile-xx {
background-color: #xxxxxx;
}
1 Like
#257

I would like to ask for help/assistance to configure one of my dashboard tile that is reporting pollen status. What I want to set is the tile color that will change according to the pollen status (Very High=red, High=orange, Moderate=yellow , Low=light yellow, None=transparent).
Is it possible to set such a tile color change?

#258

What tile template are you using for this?

#259

I'm using the attribute template.

#260

That’s what I was afraid of. No real way to key off of the tile content to set the CSS that I know of as the :contains selector never made it off the proposed list.

#261

Thanks for the info.
Maybe I'll try to change the template type to something else.
Via webcore piston I'm collecting pollen status from web api and saving it to the virtual device with device driver Dashboard Variable Device that you developed.

#262

Since you’re constructing the output, you could try to add the CSS with the data, i.e.

<div style=“background-color:red”>High</div>
#263

Is this the correct CSS format to add the suggested line please?

#tile-122 {
<div style=“background-color:red”>Very High</div>
}
#264

Sorry, not in the CSS section of the Dashboard, but in webCoRE instead of just setting the very to Very High include everthing from the opening div through the closing one.

#265

I'm trying to set the variable value to the suggested div line but it still save just the "Very High" string without the extras.

image
image769×532 8.71 KB

When I check in the virtual device variable I see just this:

image

#266

The tags are hidden, but still there; how does it look on the tile?

#267

Still the same :frowning:

image

#268

The variable seems to be reporting what was set in the webcore piston :

image

#269

@thebearmay
What I found out is that there are double quotation marks for background color:
When I change them to the below:

image

I got this tile:

image

I was not able to find why there is double quotation marks while there isn't double in piston webcore.
We definitely moved forward but would like to have the whole tile to be red if possible :frowning:

#270

Figured it out. When I removed the quotation marks from the piston variable value I got the working tile with red color but still just the text of "Very High" is red and not the whole tile.
Is it possible to change it somehow to get in red color the tile of Pollen?

Download the Hubitat app