Can text color selection be added for tiles?

[tpaairman]

I know that you can change text color for a template, but can this be added to change it for an individual tile please? Black works fine normally for my switches, but I have a couple with custom background pictures, and it would help if I could change those tiles to white.

[william2]

@tpaairman

text color

you can change it using CSS, here is an example using tile 0

#tile-0 .tile-title {
color: green;
} 

you can also use rbg and rgba, as well as hex.

[tpaairman]

Not sure what I'm doing wrong. I went to CSS, and nothing is there. When I go to the layout tab (under advanced) I can see the code for all of the devices, but nothing about text color.

I did go back to CSS, and pasted what you put, but changed green to white. The text color changed, but not the icon, or the state of the switch (on/off). Also, the three dots on the top right of the tile.

EDIT (In case this was read already - I thought the color was changing back on it's own, but I found it was an error I was making.)

[william2]

@tpaairman

but not the icon, or the state of the switch (on/off). Also, the three dots on the top right of the tile.

Add !important to the snip like this

#tile-0 .tile-title {
color: green; !important;
}

If you want to change all of the elements you mentions, it will take a bit more work. In this case I'll have to refer you

@rocketwiz

Everything here is basic 101 stuff for people versed in html/CSS but probably might as well be Greek to everyone else

Many of us have contributed to the guide, you will find everything you need to make those changes.

[tpaairman]

What does adding important do?

Also, on the example they give on the guide, I know what tile-title is from the your other post here, but do you know what each part is - tile-contents, tile-primary, tile-secondary, etc?

[sburke781]

Just to set the scene for some of the recommendations that we make here... these are related to conventions or requirements that are more broadly applied to HTML / CSS within web pages, nothing specific to Hubitat. Not that I thought you were considering these differently, just thought I'd mention it...

@tpaairman

What does adding important do?

My vague understanding is that the "Cascading" nature of Cascading Style Sheets would imply that styling applied to HTML elements have an inherent hierarchy when being applied. The !important option for a setting in a CSS style would seek to override those hierarchies.

CSS !important Property

@tpaairman

do you know what each part is - tile-contents, tile-primary, tile-secondary, etc?

If you want to dig into the CSS rabbit-hole any deeper, you will start by opening the developer tab of your browser of choice. Personally, I feel it would be appropriate for Lawrence Fishburne to greet you at this point to confirm your choice, that or the Dark Knight from Monty Python....

Even if you don't dig into the HTML of a dashboard, to answer your question... in vague way... The contents, primary and secondary sections relate, typically to the different text elements in the tile... You could get a sample of these with my CSS Editor, but I can't quickly / easily give you a reasonable example of these right now.