Custom Card Mod - Change Icon & Colour on State

Configuration Frontend
1

Hi Guys

I’m really struggling with this one… I want to change the icon and colour based on a state of input boolean.

If I can get this working i can figure it out…

{{ if states ('input_boolean.stove_enabled', "on"), ('sensor.flue_sensor_stove_flue_temp' |float <= 190) }: mdi:thermometer-minus;}
{% endif %}}

Any tips?

Thanks in advance

2

I should proabably explain better… I only want the icon to be a certain colour and icon type when the input booleon is on. When its off I just want it to be white

Thanks

3

Suggest to discuss card-mod in the dedicated thread.

4

Not sure… its more to do with template rather than card mod. I’m in developer tools trying different things. It should return the state regardless of card mod

5

Have you tried

{% if ... %}
color: red;
{% else %}
color: green;
{% endif %}

As for changing an icon itself by card-mod - try setting a “–card-mod-icon” variable similarly (but this may not work in some cases).

6

Fixed it… needed the ‘and’. I don’t think I explained myself very well in the origional post. The template didnt bring back what I expected as it was looking for a float from the input boolean. I needed the ‘and’ inbetween the input boolean and sensor

Thanks for assisting though… I’m slowly getting there with templates

{% if is_state ('input_boolean.stove_enabled', "on") and states ('sensor.flue_sensor_stove_flue_temp') |float <= 190 %}
7

Suggest to use it as “is_state(” & “states(” to avoid errors.

8

Hello,

I’m trying to make the icon flash around when I open the garage but it doesn’t work, can you please review my code and tell me what I’m doing wrong?

type: custom:mushroom-template-card
        primary: Garage
        secondary: ''
        icon: |
          {% set state=states('cover.garage_door') %}
                {% if state=='closed' %}
                mdi:garage
                {% elif state=='open' %}
                mdi:garage-open
                {% else %}
                mdi:garage-alert
                {% endif %}
        entity: cover.garage_door
        icon_color: |-
          {% set state=states('cover.garage_door') %}
                {% if state=='closed' %}
                green
                {% elif state=='open' %}
                red
                {% else %}
                yellow
                {% endif %}
        layout: vertical
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: >
              .shape {

              --shape-animation: ping 2s infinite; {% if is_state
              ('cover.garage_door', "open") %}
               }
              @keyframes ping {

              0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}

              70% {box-shadow: 0 0 0 10px transparent;}

              100% {box-shadow: 0 0 0 0 transparent;}

              }