ok, do what you like)
ok, it seems abit “lacky” when one “refresh the page”, the default-color appears for a second
btw, it also work with
card_mod:
style: |
ha-card .icon {
{% if states(config.entity)|float(0) >= 0.34 %}
--tile-color:var(--purple-color);
{% elif states(config.entity)|float(0) >= 0.3 %}
--tile-color:var(--red-color);
{% elif states(config.entity)|float(0) >= 0.26%}
--tile-color:var(--amber-color);
{% elif states(config.entity)|float(0) >= 0.22 %}
--tile-color:var(--light-green-color);
{% elif states(config.entity)|float(0) >= 0.18 %}
--tile-color:var(--green-color);
{% elif states(config.entity)|float(0) >= 0.14 %}
--tile-color:var(--teal-color);
{% elif states(config.entity)|float(0) >= 0.1 %}
--tile-color:var(--blue-color);
{% endif %}
}
Thanks! That was it. It looks like before with changing it like you suggested.
Also, can you point me to the page where I can find the docu to these changes? If there’s any.
Boheme, what you just did is called a “distraction with a wrong solution”. Now the person is not getting an intended tile behaviour; it will take time for him to see a difference.
Please explain, instead of accusing ! ,because now you are just "Distracting "
Already explained earlier.
Remove card-mod customization and see the intended behaviour.
Then add MY customization and compare with YOURS.
ok, i did, i don’t see the difference( maybe because the value dont changes) … but keep on keeping people in “the dark” with your "half-solutions, and references to “first post” etc)
However when you accusing me !, Please provide the “Correct Solution” , instead of being "obnoxious "
Not funny at all.
Solution was already provided.
Once again: “ha-card” + “!important”.
Not gonna convince you.
Please, before you take eachothers head because of a question of a novice ha user…
Adding the !important had also made the expected behaviour for the tile card. But it makes me go manually over everything and changing .tile to .icon can I do with an easy 4 click notepad search/change.
So both of you helped, I don’t know which of the solutions are “official” or more elegant or “by the book” but if in future I need to use ha-card with important, I will use it of course.
Sadly there is no option to mark two answers as solution, so I’ll leave the “easier” one marked as it.
Thank you both of you for taking a look at it and finding me (and maybe others) the solution.
My last post here, not gonna teach anyone.
Define a default “green” color, remove card-mod and see yourself HOW it should work.
OMG. I told you in the 1st place about styling a CARD, not an ICON.
Should I have said “icon is INSIDE a card”?
Styling a card means “styling an icon + a card itself”.
- i haven’t used Tile card since 1-trail when it first came out, NO hover-background colors
- Im not the one to define default colors
GitHub - home-assistant/frontend: 🍭 Frontend for Home Assistant (my contributions to “smoke-screen” )
Hint: Battery-level , as in the pic 80
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.
4 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…