Customize tile card icon background using card-mod

Configuration Frontend
21

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

image

22

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.

23

“Customize” is not make it transparent?

24

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.

25

ok, thank you for your help

26

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

image
image899×435 20.2 KB

27

Look at the solution.
Icon background is

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

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 :frowning:

29

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

image
image

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

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

31

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

1 Like
32

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.

33

check your templates in Dev tools → Templates

34

TemplateSyntaxError: unexpected ‘)’

35

Perfect, Thanks :slight_smile:

36

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.