Card-mod for Tile card: icon & tile color

Configuration Frontend
17

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.

18

My last post here, not gonna teach anyone.
Define a default “green” color, remove card-mod and see yourself HOW it should work.

20

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”.

21
  1. i haven’t used Tile card since 1-trail when it first came out, NO hover-background colors
  2. 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
22

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.

23

@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.

  1. 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)

at2

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

at2

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

at3

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

at4

Update 10.02.24: replaced “.icon” with “ha-tile-icon” after 2024.2.

5 Likes
24

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 :wink: … ( But i can be more rude :blush: :hugs: ) 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
25

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
26

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

27

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… :wink:

29

how could you change that?? have you received overlord capacities lately :wink:

31

haha, you better, otherwise youll be thrown back to us mere Members… :wink:

32

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

33

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

Screenshot 2024-02-11 193457

34

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?

35

Hi @jaswalters are you talking about in the picture 81% number? or you refer to white /gray slider

36

Negative, when you grab the slider the bubble that shows above it while you are sliding/adjusting.

37

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.

38

Pieter, I am not using tiles… Tell me via PM what do you want to style?

1 Like
39

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.