Customize tile card icon background using card-mod

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!

Vahaldor · December 9, 2023, 9:54am

I am trying to use the examples above to completely hide icon and the title, to keep only buttons for target temperature using climate entity but cannot reach the result. Any one with a little time to provide me with card mod code please?

using following yaml, I could achieve the following, but need to edit CSS directly to get rid of the icon background and the tiny icon.

name: ' '
icon: none

Olivier1974 · December 9, 2023, 11:40am

Please open a new thread, this is not related to my initial question.
I have an answer for you but I’ll give it in the new thread, for other people to find it when needed.

Vahaldor · December 9, 2023, 12:32pm

“Customize” is not make it transparent?

Olivier1974 · December 9, 2023, 1:49pm

No, the customization was about changing the icon color, solved in post 2.
What you’re asking is to remove the title and icon completely, which is a totally different card-mod code.

Vahaldor · December 9, 2023, 2:06pm

ok, thank you for your help

R_A_L_F · December 13, 2023, 4:37pm

How can I change the icon background color if the quantity is greater than 0?
This way it does not change.

Olivier1974 · December 13, 2023, 4:42pm

Look at the solution.
Icon background is

.icon-container .icon$: |
  .shape { 
    background: something !important;
  }

R_A_L_F · December 13, 2023, 4:50pm

Thanks, but this doesnt’ work:

type: tile
entity: sensor.Fenster_AnzahlOffeneFenster
tap_action:
  action: navigate
  navigation_path: /lovelace/fenster-turen
icon: mdi:door-sliding-lock
name: Anzahl offener Fenster/Türen
show_entity_picture: false
icon_tap_action:
  action: navigate
  navigation_path: /lovelace/fenster-turen
card-mod:
  style: 
    .icon-container .icon$: |
		.shape { 
			{% if states(config.entity) | float(0) > 0 %}
			background-color: var(--red-color);
			{% else %}  
			background-color: var(--grey-color);
			{% endif %}
		}

What am I doing wrong here? Sorry, I’m not that fit in YAML yet

Olivier1974 · December 13, 2023, 4:56pm

My config, working

type: tile
entity: binary_sensor.zigbee_ping
name: Passerelle Zigbee
icon: mdi:z-wave
hide_state: true
card_mod:
  style:
    .icon-container .icon$: |
      .shape { 
        background: 
          {% if is_state(config.entity, 'on') %}
            rgba(0,255,0,0.15)
          {% else %}
            rgba(255,0,0,0.15)
          {% endif %} !important;
      }

EDIT: I should write it another way (sorry Ildar_Gabdullin)

type: tile
entity: binary_sensor.zigbee_ping
name: Passerelle Zigbee
icon: mdi:z-wave
hide_state: true
card_mod:
  style:
    .icon-container .icon$: |
      .shape { 
        {% if is_state(config.entity, 'on') %}
          background: rgba(0,255,0,0.15) !important;
        {% else %}
          background: rgba(255,0,0,0.15) !important;
        {% endif %}
      }

R_A_L_F · December 13, 2023, 4:58pm

Thanks. You are asking an on/off question. How can I compare the number to > 0?

Olivier1974 · December 13, 2023, 5:00pm

Replace is_state(config.entity,'on')
with states(config.entity) | float(0) > 0

R_A_L_F · December 13, 2023, 5:03pm

Like this?

card_mod:
  style:
    .icon-container .icon$: |
      .shape { 
        background: 
          {% if states(config.entity) | float(0) > 0) %}
            rgba(0,255,0,0.15)
          {% else %}
            rgba(255,0,0,0.15)
          {% endif %} !important;
      }

This doesnt work.

Ildar_Gabdullin · December 13, 2023, 5:06pm

check your templates in Dev tools → Templates

Olivier1974 · December 13, 2023, 5:24pm

TemplateSyntaxError: unexpected ‘)’

R_A_L_F · December 14, 2023, 4:19pm

Perfect, Thanks

joeyar · September 24, 2024, 1:52pm

For anyone like myself who struggled to get this working. This worked perfectly for me

card_mod:
  style: |
    {% if states('switch.pool') == 'on' %}
      ha-card {
        background: lightblue;
        }
      ha-state-icon {
        color: white;
        }
      ha-tile-icon {
        --tile-color: var(--state-icon-color);
        }
    {% else %}
    {% endif %}
    }

You can also change var(–state-icon-color) to a color like white, or leave blank and it removes the icon background.