Card-mod for Tile card: icon & tile color

Configuration Frontend
1

I just upgraded from 2023.12.0 to .3 and since the upgrade all my card-mod settings are broke on the tiles I set up the last days… Anyone else had this experience? I didn’t find anything regarding to this problem, maybe some of you can help me.

Example which worked for me till todays update:

type: tile
name: aktuelle Strompreis
icon: mdi:currency-eur
color: green
hide_state: false
entity: sensor.electricity_price_REDACTED_home
state_content: state
tap_action:
  action: navigate
  navigation_path: /lovelace/strompreisdiagramm
card_mod:
  style: |
    .tile {
        {% 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 %}
    }
2

Learn how to use Code Inspector. Then it will be much easier to sort things out.

    ha-card {
1 Like
3

As I said, my solution worked before.

As you suggested I changed .tile to ha-card, but it didn’t help and I can also see, that they are called ha-card, but I found the .tile here on the Forum as a suggestion and it worked (till now). All my conditional formats, which are applied on tile cards aren’t working any more. Strangely the ones on badges still work without a problem.

4

change .tile to .icon

1 Like
5

only to change an icon color, not a tile.

Add “!important”

Stopped working 'cause a structure of the tile card changed

6

17.12.2023_22.57.30_REC

17.12.2023_23.05.00_REC
17.12.2023_23.05.00_REC744×571 7.4 KB

7

Your screenshot proves that “.icon” is used to style ICON, not a CARD.

8

Who is talking about changing color on a card, it’s his “Card-Mod” i copy/pasted and change .tile to .icon… And it works !

It dont work with .tile !

9

ok, do what you like)

10

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 %}
      }
11

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.

12

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.

13

Please explain, instead of accusing ! ,because now you are just "Distracting "

14

Already explained earlier.
Remove card-mod customization and see the intended behaviour.
Then add MY customization and compare with YOURS.

15

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 "

16

Not funny at all.
Solution was already provided.
Once again: “ha-card” + “!important”.
Not gonna convince you.

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