Sir, I still do not use it )))
My 2nd experience was solving this issue about the very same problem, and the 1st test was solving this discussion, nothing else )). Today is my 3rd test of tile card.
@boheme61
In the morning I think you are right.
May be I should have been more patient and explain with details in the very beginning.
Please accept my apologize if I was rude.
For the record:
Tile card has nice default features:
– icon’s color depends on a domain & state;
– card’s background gets the same color (with transparency) on hover.
So there are possible ways to style this behaviour.
Disclaimer: I am not an expert on the Tile card, so more possible ways of styling could be possible.
- Set a color for the whole card:
– icon = red
– card’s background = reddish on hover.
A native “color” option is used.
type: tile
entity: sensor.processor_use
color: var(--red-color)
- Set a color for the whole card:
– icon = red
– card’s background = reddish on hover.
To set a static color there is no need to use card-mod - see pt. 1 above.
But this way (as well as all ways described below) allows to set a color dynamically dependently on conditions defined by jinja templates.
type: tile
entity: sensor.processor_use
card_mod:
style: |
ha-card {
--tile-color: red !important;
}
- Set a color for the icon only:
– icon = red
– card’s background = default on hover.
type: tile
entity: sensor.processor_use
card_mod:
style: |
ha-tile-icon {
--tile-color: red;
}
- Set different colors for the icon & the card:
– icon = red
– card’s background = greenish on hover.
type: tile
entity: sensor.processor_use
card_mod:
style: |
ha-tile-icon {
--tile-color: red;
}
ha-card {
--tile-color: green !important;
}
Update 10.02.24: replaced “.icon” with “ha-tile-icon” after 2024.2.
5 Likes
Yeah, Tile has gone through some nice changes/enhancements , since it first came out , i have only “followed” it by briefly reading the various “release notes” , And im less an expert in CSS than you 
… ( But i can be more rude 
) so accept my apologize as-well
( and i haven’t “found” time to change some of all my “mushrooms” to equals Tiles, yet )
But, my “solution” actually breaks the Tile’s native functionality ( As you mentioned ) , i was just focused on the Icon color
1 Like
For all cards I am using (or tried) I usually create a short/long post “how to style card XYZ” in the epic card-mod thread.
So, whenever someone asks “how to …” - my answer is simple, like “go to card-mod thread → find there and there”.
Since I am not using Tiles → no ready card-mod solutions → need to explain each time…
Should have probably prepared a similar post about styling Tiles.
1 Like
Yes, i use/check in your “List” now and then, and with all ( more and more frequent ) “Post’s” from people who haven’t figured out how to use Search, i understand why you “reference” that way.
Lately there has been alot “New” Topic’s on “solved” Howto Questions. ( In various Categories )
What/which changes (in the Tile/front-end ) that caused OP’s “experience” , i don’t know , but i know/understand Dev’s can’t really care about Card-Mod, when building/enhance the frontend, and native cards.
I Do feel there is a need for “additional” Categories here in the Forum. Maybe I.e " Latest Update " and why not " Styling "
OP used/tagged the most “natural/intuitive” Categories for his issue ( And is very clear in his Header ) , when in fact it was "broken 3rd part (Styling ) , doo to changes in native-card/frontend, in a release (Latest Update)
So i think HA’s “renomé” would benefit from if “Issues” in the Forum is more clearly “separated”
In this case, it’s not a common/specific “Configuration” issue, and i assume the Frontend ( and Tile-Card ) changes in Latest Release works as intended.
So such and future, should/could be in Categories, which specifies clearly ( It’s about ( Styling ) & 3rd part (in this case) , And the ( Latest Update ) Category would also fit in this case, to “raise” the attention for other users with same experience/use-case
if you want to see ideas, techniques etc for Tile, probably useful to checkup on these sources
https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily in which @rhysb is doing an amazing job, do also find his guide for animated icons, it is so cool.
There is also this
Aware Mushroom is not Tile, but they are essentially the same and made by the same designer.
O, and please change the title of this topic to reflect it is your styling that does not work. Card-mod is not broken at all, and this title keeps pulling me in…
how could you change that?? have you received overlord capacities lately
haha, you better, otherwise youll be thrown back to us mere Members…
Amazing. Thank you for that. I used this but since 2024.2.0 this does not work anymore. It did pre-update. Any ideas?
The new version provided above works. Thank you
Hi, I use this mod but only modifies the light-brightness, but I want to modify the second line (light-color-temp) any suggestions?
card_mod:
style: |
ha-card {
--tile-color: red !important;
}
I’m trying to find the name of the property for the little percent bubble that shows above the slider when you move it, anyone that can provide it to change it’s color?
Negative, when you grab the slider the bubble that shows above it while you are sliding/adjusting.
Ildar, thanks for this post, especially for tiles. Do you have a post about (e.g.) changing the icon color of the features for a tile card? I looked in the main card mod thread too, but couldn’t find anything there, though I’m sure there must be.
Pieter, I am not using tiles… Tell me via PM what do you want to style?
1 Like
Hi there,
Thanks for the nice info.
Can I ask you how can you change the icon place holder (the round area where the icon is). Size and borders, so ir can be changed to a more square format. I had that until the changes in 2024.02.
Thank you very much.
Pedro.
Share your code, as a first step, sometimes it’s i.e even relevant if it’s in nested cards
Thank you for your quick reply.
Right until 2024.01 I used the following code that draw almost square shapes around the icon. Now the code is not producing any effect on the shape:
card_mod:
style:
.icon-container .icon$: |
.shape {
border-radius: 15px !important;
height: 50px !important;
width: 50px !important;
margin-top: 8px !important;
margin-bottom: 5px !important;
margin-left: -5px;
margin-right: -5px;
}
Not using tiles.
What happened here:
- Tile card is added to HA.
- A card-mod code for customizing Tile card was made.
- You started using this code.
- The Tile card was changed (which is normal fact).
- The old card-mod is not working.
Suggest to be LESS dependent on it.
Learn how to use Code Inspector & see what changed in a card.
Also, suggest to ask similar card-mod questions in a huge card-mod thread.
1 Like
Thanks, yes I know that there have been some changes in the tile card and that changed the behaviour of my code,
I already done that a few days ago 
(on the large card_mod thread).