Customize tile card icon background using card-mod

Olivier1974 · November 8, 2022, 11:23am

Hello community,

New card, new configuration, new question.
I’d like to colorize the icon of the new Tile card.
I know that there is a color tag but on one hand the state is not something understood by the card natively and on the other hand, it is not the icon that I want to colorize but the background.
Therefore, I tried this but it was not changing the background:

color: >
  {% if is_state('sensor.vaillant', 'démarrée') and is_state('input_select.hass_theme', 'default') %}
    #E1FFE1 
  {% elif is_state('sensor.vaillant', 'démarrée') and not is_state('input_select.hass_theme', 'default') %}
    #004000
  {% elif not is_state('sensor.vaillant', 'démarrée') and is_state('input_select.hass_theme', 'default') %}
    #FFE1E1 
  {% else %}
    #400000
  {% endif %}

So I came back to the basics : card-mod

style: 
#something, something, something
  --shape-color:
    {% if is_state('sensor.vaillant', 'démarrée') and is_state('input_select.hass_theme', 'default') %}
      #E1FFE1 
    {% elif is_state('sensor.vaillant', 'démarrée') and not is_state('input_select.hass_theme', 'default') %}
      #004000
    {% elif not is_state('sensor.vaillant', 'démarrée') and is_state('input_select.hass_theme', 'default') %}
      #FFE1E1 
    {% else %}
      #400000
    {% endif %}

Do any of you know how to access the right CSS here?

Starting from this in edge chromium (with #FF0000; that works in the --shape-color)

I tried this but it is not working

card_mod:
  style: |
    ha-card .tile .icon-container ha-tile-icon $: |
      .shape {
        background-color: #FF0000;
      }

Olivier1974 · November 15, 2022, 6:21pm

Thanks to the help of @arganto, here is the solution:

    card_mod:
      style:
        .icon-container .icon$: |
          .shape { 
            border-radius: 15px !important;
            background: 
              {% if is_state('sensor.vaillant', 'Démarrée') %}
                rgba(0,255,0,0.2)
              {% else %}
                rgba(255,0,0,0.2)
              {% endif %} !important; 
          }

KNXBroker · December 27, 2022, 6:40pm

Hi, I would like to remove the background of the tile card completely. Is this only possible with card-mod or can the background be removed also anyhow overall?

Edit: Just saw that card-mod can also apply changes on theme level, which could be an option as well.
Unfortunately I did not manage to get a respective theme working. If someone has an idea, I would be very grateful. Here the code I have identified so far… don’t know what could be wrong

test-theme:
  card-mod-theme: test-theme
  card-mod-card: |
      ha-tile-icon.icon div.shape { background-color: transparent !important; }

arganto · December 30, 2022, 11:29am

Try this as staring point, what should work with standard layout (masonry).

  card-mod-theme: test-theme
  card-mod-view-yaml: |
    hui-masonry-view:
        $:
          hui-tile-card:
            $: |
              ha-card {
                background-color: transparent;
              }

KNXBroker · December 30, 2022, 8:37pm

Thank you @arganto!

Unfortunately the magic last step is still missing (as yesterday). I’m able to change the background of ha-card, icon-container, etc., however I’m not able to get access to the div class shape with the theme card-mod.

arganto · December 31, 2022, 7:58am

This was, what you asked for and for what I posted the solution.

KNXBroker · December 31, 2022, 8:26am

Sorry maybe a misunderstanding, I agree I should have been more precise. I was referring to the first post (changing the icon background colour) and with completely I was referring to the whole dashboard (instead of doing the card mod).

Edit: here my corresponding feature request: Tile card: Make shaping optionally · home-assistant/frontend · Discussion #14889 · GitHub

Wish you a healthy start into the new year.

arganto · December 31, 2022, 8:50am

  card-mod-view-yaml: |
    hui-masonry-view:
        $:
          hui-tile-card:
            $:
              ha-tile-icon:
                $: |
                  .shape {
                    background-color: transparent !important;
                    transition: none !important;
                  }

Try to see, what I did and compare both examples with your DOM-screenshot. And you will get used to see, how to ingest what and where and how.

BUT: card_mod theme is not my favorite, because it is applied/ingested/activated sometimes delayed and you have sometimes a lot of flickering. So perhaps better to mod the card directly (most of the times faster). So oder so, see, that I have overwritten the transition as well to at least reduce such things.

KNXBroker · January 1, 2023, 7:37pm

Fantastic @arganto. A single | was too much in my code trials.
I have never used card-mod in the past, I appreciate your tips.
Thank you and happy new year

KNXBroker · January 6, 2023, 5:40pm

I know why I do not like card-mod… one home assistant release later the first break. New code:

  card-mod-view-yaml: |
    hui-masonry-view:
        $:
          hui-tile-card:
            $:
              ha-tile-icon:
                $: |
                  .shape::before {
                    background-color: transparent !important;
                    transition: none !important;
                  }

arganto · January 6, 2023, 5:59pm

But this is the problem from all these changes in HA not from card-mod, isn’t it?

KNXBroker · January 6, 2023, 6:18pm

Yes, sure… !

Ildar_Gabdullin · January 6, 2023, 10:14pm

IMHO the icon’s background for the Tile card (depending on the icon’s color, I guess) looks very nice.
Yes, it does look differently from other cards…
May be an option like “disable_icon_background” for Tile card (“false” by default) could a possible way?

Olivier1974 · January 7, 2023, 11:14am

I really like the way I did it with the help of @arganto.
It is much better in my opinion than the colour of the icon itself.
Should it be integrated in HA? I wish but most probably not.
But, as @KNXBroker said, it is always possible that it will break in a next version of HA. Will go back to my configuration then

Mariusthvdb · January 28, 2023, 4:14pm

coming from Mushroom Cards - Build a beautiful dashboard easily 🍄 - #5208 by Mariusthvdb where the same idea was fleshed out using mushroom, I tried the mod above on:

      type: tile
      icon: mdi:water
      name: ' '
      vertical: true
      tap_action:
        action: more-info
      hold_action:
        action: none
      double_tap_action:
        action: none
      card_mod:
        style:
          .icon-container .icon$: |
            .shape {
                background: radial-gradient(var(--card-background-color) 60%,
                            transparent calc(60% + 1px)),
                            conic-gradient(rgb(var(--rgb-{{config.icon_color}})) {{states(config.entity)}}% 0%,
                            var(--card-background-color) 0% 100%);
              }
            .shape:after {
              content: "";
              height: 100%;
              width: 100%;
              position: absolute;
              border-radius: var(--icon-border-radius);
              background: rgba(var(--rgb-{{config.icon_color}}), 0.2);
            }

but it wont work unfortunately, not does the style mentioned here:

      card_mod:
        style:
          ha-tile-icon:
            $: |
              .shape {
                  background: radial-gradient(var(--card-background-color) 60%,
                              transparent calc(60% + 1px)),
                              conic-gradient(rgb(var(--rgb-{{config.icon_color}})) {{states(config.entity)}}% 0%,
                              var(--card-background-color) 0% 100%);
                }
              .shape:after {
                content: "";
                height: 100%;
                width: 100%;
                position: absolute;
                border-radius: var(--icon-border-radius);
                background: rgba(var(--rgb-{{config.icon_color}}), 0.2);
              }

would appreciatie a sharp eye if at all possible.
thx!

btw, the flickering is horrific in the mushroom config in my setup. Maybe that is caused by another custom card, have to find that too ofc. Though I have no other card that does that

Olivier1974 · January 28, 2023, 4:30pm

This is my exact configuration, and it is working:

      - color: secondary
        type: tile
        entity: binary_sensor.tradfri_ping
        name: Passerelle TRÅDFRI
        icon: mdi:dots-vertical-circle-outline
        card_mod:
          style:
            .icon-container .icon$: |
              .shape { 
                border-radius: 15px !important;
                background: 
                  {% if is_state('binary_sensor.tradfri_ping', 'on') %}
                    linear-gradient(145deg, rgba(0,255,0,0.15), rgba(224,255,224,0.15));
                  {% else %}
                    linear-gradient(145deg, rgba(255,0,0,0.15), rgba(255,80,80,0.15));
                  {% endif %} !important;
              }

This is the result at the exact moment that I’m writing this post:

Not sure why you need the “shape:after” tag.

Mariusthvdb · January 28, 2023, 4:38pm

Thanks!
I had made a mistake, and forgot to set the main config item in my card to ‘color’ (it was stil icon_color), and also had that still in the mod…

  - entity: sensor.epson_ink_level_black
    color: black
    <<: &card
      type: tile
      icon: mdi:water
      name: ' '
      vertical: true
      tap_action:
        action: more-info
      card_mod:
        style:
          .icon-container .icon$: |
            .shape {
                background: radial-gradient(var(--card-background-color) 60%,
                            transparent calc(60% + 1px)),
                            conic-gradient(rgb(var(--rgb-{{config.color}})) {{states(config.entity)}}% 0%,
                            var(--card-background-color) 0% 100%);
              }
            .shape:after {
              content: "";
              height: 100%;
              width: 100%;
              position: absolute;
              border-radius: var(--icon-border-radius);
              background: rgba(var(--rgb-{{config.color}}), 0.2);
            }

is already coloring the icon and its background in a gradient. but I still dont get the circular border indicating the %

what I now find out, is that the card_mod doesnt even do anything…

  - entity: sensor.epson_ink_level_black
    color: black
    <<: &card
      type: tile
      icon: mdi:water
      name: ' '
      vertical: true
      tap_action:
        action: more-info

shows exactly the same…

Olivier1974 · January 28, 2023, 4:47pm

Ok, can’t help for the circular border.
You want it like a thermostat icon somehow or gauge, isn’t it?
Something like this?

Better open a new post for that I think as this one is marked as solved

iotmike · November 20, 2023, 9:56am

@arganto do you have any idee how may I change the font-size for all ha-tile-info .primary from the theme configuration file. i’m struggling for more than 10hrs.
Thanks!

Ildar_Gabdullin · November 20, 2023, 12:57pm

Avoid tagging people. See community rules.
Your question is unrelated to the thread’s topic. It is supposed to be asked here:
🔹 Card-mod - Super-charge your themes!