Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 2)

structuring like this does the trick for me

card_mod:
  style: 
    mushroom-state-info$: |
      .primary{
        ....
      }
    .: |
      ha-card {
        ....
      }

Ok I’m back in business, I had to change the :host entries to just be ha-card and then I also had to add !important; onto every background image settings. I just need to sort out the chips spacing issue then should be all back to how it was on 2024.6.4

image

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Kitchen
    secondary: >-
      {{ states('sensor.kitchen_temperature') | round (1) }}°C - {{
      states('sensor.kitchen_humidity') }}%
    icon: mdi:tree
    entity: light.kitchen_lights
    hold_action:
      action: toggle
    tap_action:
      action: navigate
      navigation_path: /home-v2/kitchen
    icon_color: '{{ "orange" if is_state("light.kitchen_lights", "on") else "disabled" }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            text-shadow: 0px 0px 5px black;
            --card-primary-font-weight: 350;
           --card-primary-color: white;
            --card-primary-font-size: 20px;
            align-items: end;
            margin-top: 175px;
            margin-left: -40px;
            inline-size: 180px;
            height: 25px;
          }
          .secondary {
            --card-secondary-font-size: 13px;
              text-shadow: 0px 0px 5px black;
           --card-secondary-color: white;
            --card-secondary-font-weight: 350;
              margin-top: -2px;
              margin-left: -40px;
          } 
        .: |
          ha-card {
            background: url('/local/images/areas/kitchen.jpg') center !important;
            background-size: cover !important;
            background-blend-mode: overlay !important;
            height: 220px !important;
            margin-left: -15px !important;
            margin-top: -70px !important;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: lock.back_door
            state: unlocked
        chip:
          type: template
          entity: lock.back_door
          icon_color: red
          icon: mdi:lock-open-variant
          tap_action:
            action: more-info
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.back_door
            state: 'on'
        chip:
          type: template
          entity: binary_sensor.back_door
          icon_color: red
          icon: mdi:door-open
          tap_action:
            action: more-info
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: media_player.kitchen_echo
            state: playing
        chip:
          type: template
          entity: media_player.kitchen_echo
          icon_color: grey
          icon: mdi:music
          tap_action:
            action: more-info
      - type: template
        entity: light.kitchen_lights
        icon: >-
          {{ 'mdi:lightbulb' if expand(area_entities('Kitchen')) |
          selectattr('domain','eq','light') | selectattr('state','eq','on') |
          list | count > 0 else 'mdi:lightbulb-outline' }}
        icon_color: >
          {% set lights_in_kitchen = expand(area_entities('Kitchen')) |
          selectattr('domain', 'eq', 'light') | list %} {{ 'orange' if
          lights_in_kitchen | selectattr('state', 'eq', 'on') | list | count > 0
          else 'grey' }}
        content: >-
          {{ expand(area_entities('kitchen')) |
          selectattr('domain','eq','light') | selectattr('state','eq','on') |
          list | count }}
        tap_action:
          action: call-service
          service: light.toggle
          target:
            area_id: kitchen
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: -5px;
          margin-top: -10px;
        }  
card_mod:
  style: |
    ha-card {
      height: 180px;
      width: 180px;
      margin-left: auto;
      margin-right: auto;
    }

Is there a way to get a “space” in the mushroom-template-card secondrary ?

Hello

I have some issues after updating HA and Mushroom Themes.
Cards gotten bigger like other users here are reporting, and my scrollable chips aint working either.

Here is my code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Benjamin
    secondary: |-
      {{ states('sensor.verisure_rv_benjamin_temp') }}°C |
      {{ states('sensor.verisure_rv_benjamin_fukt') }} %
    icon: mdi:face-man
    entity: light.lysg_benja_tak
    icon_color: |-
      {% if is_state('light.lysg_benja_tak', 'on') %}
        orange 
      {% else %}
        grey
      {% endif %}
    tap_action:
      action: toggle
    hold_action:
      action: navigate
      navigation_path: /lovelace-panel/benja
    multiline_secondary: false
    card_mod:
      style: |
        ha-state-icon::after {
          position: absolute;
          top: -11%;
          right: -11%;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 15px;
          height: 15px;
          font-size: 9px;
          font-weight: 700;
        }
        {% if states('binary_sensor.aqara_motion_benja_1') == 'on' %}
          ha-state-icon::before {
            content: 'directions_walk';
            position: absolute;
            font-family: 'Material Icons';
            top: -11%;
            left: -11%;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 15px;
            height: 15px;
            font-size: 11px;
            background: rgba(var(--rgb-disabled), 0.5);
            color: rgba(var(--rgb-red), 1);
            border-radius: 50%;
            animation: blink 1s linear infinite;
          }
        {% endif %}
        @keyframes blink {
          50% {opacity: 0;}
        }      
    layout: horizontal
    fill_container: false
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: climate.mill_benja
        icon: |-
          {% if is_state('climate.mill_benja', 'heat') %}
            mdi:radiator
          {% else %}
            mdi:radiator-off
          {% endif %}
        icon_color: |-
          {% if is_state('climate.mill_benja', 'heat') %}
          red
          {% else %}
          blue
          {% endif %}
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-icon-size: 0.8em   
      - type: template
        entity: light.lysg_benja_tak
        icon: |-
          {% if is_state('light.lysg_benja_tak', 'on') %}
            mdi:ceiling-light
          {% else %}
            mdi:ceiling-light-outline
          {% endif %}
        icon_color: |-
          {% if is_state('light.lysg_benja_tak', 'on') %}
          orange
          {% else %}
          grey
          {% endif %}
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-icon-size: 0.8em   
      - type: light
        entity: light.lys_benja_led_tak_1
        use_light_color: true
        icon: mdi:led-strip-variant
        content_info: none
        tap_action:
          action: toggle
        card_mod:
          style:
            mushroom-light-chip:nth-child(1)$: |
              ha-state-icon {
                {% if states('light.lys_benja_led_tak_1') == 'off' %}
                  color: grey;
                {% endif %}
              }
            .: |
              ha-card {
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-spacing: 0;
                --chip-icon-size: 0.8em                
              }              
      - type: template
        entity: input_boolean.benjamin_nattlys_10
        icon: |-
          {% if is_state('input_boolean.benjamin_nattlys_10', 'on') %}
            mdi:weather-night
          {% else %}
            mdi:weather-night
          {% endif %}
        icon_color: >-
          {% if is_state('input_boolean.benjamin_nattlys_10', 'on') %} purple {%
          else %} grey {% endif %}
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-icon-size: 0.8em
      - type: template
        entity: input_boolean.boolean_benja_tv_auto
        icon: |-
          {% if is_state('input_boolean.boolean_benja_tv_auto', 'on') %}
            mdi:television
          {% else %}
            mdi:television-off
          {% endif %}
        icon_color: |-
          {% if is_state('input_boolean.boolean_benja_tv_auto', 'on') %}
            green
          {% else %}
            grey
          {% endif %}
        hold_action:
          action: false
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-icon-size: 0.8em                              
      - type: template
        icon_color: blue
        icon: mdi:remote-tv
        hold_action:
          action: false
        tap_action:
          action: call-service
          service: script.1708632757993
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-icon-size: 0.8em               
      - type: template
        entity: input_boolean.benjamin_auto
        icon: |-
          {% if is_state('input_boolean.benjamin_auto', 'on') %}
            mdi:lightbulb-auto
          {% else %}
            mdi:lightbulb-auto-outline
          {% endif %}
        icon_color: |-
          {% if is_state('input_boolean.benjamin_auto', 'on') %}
            green
          {% else %}
            grey
          {% endif %}
        hold_action:
          action: false
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-icon-size: 0.8em   
      - type: template
        entity: switch.aqara_kontakt_benja_1
        icon: |-
          {% if is_state('switch.aqara_kontakt_benja_1', 'on') %}
            mdi:power-plug
          {% else %}
            mdi:power-plug-off
          {% endif %}
        icon_color: |-
          {% if is_state('switch.aqara_kontakt_benja_1', 'on') %}
            green
          {% else %}
            grey
          {% endif %}
        hold_action:
          action: false
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-icon-size: 0.8em              
    alignment: end
    card_mod:
      style: |
        ha-card {
          background: none !important;
          height: 40px;
          flex-wrap: nowrap;
          width: max-content;
          align-items: center;
          display: flex; 
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          margin-top: 10px;            
          padding-bottom: 0px;          

        }
        :host {
          overflow-x: scroll;
          overflow-y: hidden;
          direction: ltr;
          margin: 0px !important;
          padding-left: 12px;
          padding-bottom: 0px;
          margin-top: 10px;          
        }                    

image

Thats amazing, thanks a lot :slight_smile:

Can you help me a bit with:
1.) Get a bit more padding left of the headline and subheadline?
2.) Get the circle around the bottom icons away?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Haus
    secondary: >-
      {{ states('sensor.haus_temperatur_mischung') | replace (".",",")}} °C • {{
      states('sensor.haus_feuchtigkeit_mischung') }} %
    icon: mdi:home
    entity: light.zentral_haus_licht_helper
    tap_action:
      action: navigate
      navigation_path: haus
    hold_action:
      action: more-info
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        ha-card {
          background: rgba(var(--rgb-primary-background-color), 0.3);
          left: -20px;
          top: -20px;
          width: 500px;
          --spacing: 10px 10px 0px 12px;
          --icon-size: 70px;
          --ha-card-border-width: 0;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.zentral_haus_bewegung_prasenz_helper
            state: 'on'
        chip:
          type: template
          icon_color: red
          tap_action:
            action: more-info
          entity: sensor.zentral_haus_bewegung_prasenz
          card_mod:
            style: |
              ha-card {
                animation: blink 1s linear infinite;
              }
              @keyframes blink {
                50% {opacity: 0;}
              }  
          icon: mdi:motion-sensor
      - type: conditional
        conditions:
          - entity: binary_sensor.zentral_haus_fenster_helper
            state: 'on'
        chip:
          type: template
          icon_color: red
          tap_action:
            action: more-info
          entity: sensor.zentral_haus_offene_fenster
          icon: mdi:window-open
          card_mod:
            style: |
              ha-card {
                animation: blink 1s linear infinite;
              }
              @keyframes blink {
                50% {opacity: 0;}
              }
      - type: conditional
        conditions:
          - entity: binary_sensor.zentral_haus_turen_helper
            state: 'on'
        chip:
          type: template
          icon_color: red
          tap_action:
            action: more-info
          entity: sensor.zentral_haus_offene_turen
          icon: mdi:door-open
          card_mod:
            style: |
              ha-card {
                animation: blink 1s linear infinite;
              }
              @keyframes blink {
                50% {opacity: 0;}
              }
      - type: conditional
        conditions:
          - entity: binary_sensor.zentral_haus_tore_helper
            state: 'on'
        chip:
          type: template
          icon_color: red
          tap_action:
            action: more-info
          entity: sensor.zentral_haus_offene_tore
          icon: mdi:gate-open
          card_mod:
            style: |
              ha-card {
                animation: blink 1s linear infinite;
              }
              @keyframes blink {
                50% {opacity: 0;}
              }
      - type: conditional
        conditions:
          - entity: input_boolean.briefkasten
            state: 'on'
        chip:
          type: template
          icon_color: red
          tap_action:
            action: more-info
          entity: input_boolean.briefkasten
          card_mod:
            style: |
              ha-card {
                animation: blink 1s linear infinite;
              }
              @keyframes blink {
                50% {opacity: 0;}
              }  
          icon: mdi:mailbox-open
      - type: template
        icon_color: '{{ ''#f1c232'' if is_state(entity, ''on'') else ''off'' ''#5353ec''}}'
        icon: mdi:sleep-off
        tap_action:
          action: more-info
        entity: switch.wach_schlafen
    alignment: end
    card_mod:
      style: |
        ha-card {
          height: 40px;
        }

1 Like

you can add some right margin to the icon shape

card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                margin-right: 10px;
              }
--chip-box-shadow: none;

I have an orange line around the template card. Can this be disabled ?

type: custom:mushroom-template-card
    primary: Alles uit
    icon: mdi:lightbulb
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup

You are great thanks a lot for the code snippet :slight_smile:

Unfortunately, for me it is not working - can you quickly help me please where to place it?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Haus
    secondary: >-
      {{ states('sensor.haus_temperatur_mischung') | replace (".",",")}} °C • {{
      states('sensor.haus_feuchtigkeit_mischung') }} %
    icon: mdi:home
    entity: light.zentral_haus_licht_helper
    tap_action:
      action: navigate
      navigation_path: haus
    hold_action:
      action: more-info
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        ha-card {
          background: rgba(var(--rgb-primary-background-color), 0.3);
          left: -20px;
          top: -20px;
          width: 500px;
          --spacing: 10px 10px 0px 12px;
          --icon-size: 70px;
          --ha-card-border-width: 0;
          --chip-box-shadow: none;
        }
        mushroom-shape-icon$: |
          .shape {
            margin-right: 50px;
          }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.zentral_haus_bewegung_prasenz_helper
            state: 'on'
        chip:
          type: template
          icon_color: red
          tap_action:
            action: more-info
          entity: sensor.zentral_haus_bewegung_prasenz
          card_mod:
            style: |
              ha-card {
                animation: blink 1s linear infinite;
              }
              @keyframes blink {
                50% {opacity: 0;}
              }  
          icon: mdi:motion-sensor
      - type: conditional
        conditions:
          - entity: binary_sensor.zentral_haus_fenster_helper
            state: 'on'
        chip:
          type: template
          icon_color: red
          tap_action:
            action: more-info
          entity: sensor.zentral_haus_offene_fenster
          icon: mdi:window-open
          card_mod:
            style: |
              ha-card {
                animation: blink 1s linear infinite;
              }
              @keyframes blink {
                50% {opacity: 0;}
              }
      - type: conditional
        conditions:
          - entity: binary_sensor.zentral_haus_turen_helper
            state: 'on'
        chip:
          type: template
          icon_color: red
          tap_action:
            action: more-info
          entity: sensor.zentral_haus_offene_turen
          icon: mdi:door-open
          card_mod:
            style: |
              ha-card {
                animation: blink 1s linear infinite;
              }
              @keyframes blink {
                50% {opacity: 0;}
              }
      - type: conditional
        conditions:
          - entity: binary_sensor.zentral_haus_tore_helper
            state: 'on'
        chip:
          type: template
          icon_color: red
          tap_action:
            action: more-info
          entity: sensor.zentral_haus_offene_tore
          icon: mdi:gate-open
          card_mod:
            style: |
              ha-card {
                animation: blink 1s linear infinite;
              }
              @keyframes blink {
                50% {opacity: 0;}
              }
      - type: conditional
        conditions:
          - entity: input_boolean.briefkasten
            state: 'on'
        chip:
          type: template
          icon_color: red
          tap_action:
            action: more-info
          entity: input_boolean.briefkasten
          card_mod:
            style: |
              ha-card {
                animation: blink 1s linear infinite;
              }
              @keyframes blink {
                50% {opacity: 0;}
              }  
          icon: mdi:mailbox-open
      - type: template
        icon_color: '{{ ''#f1c232'' if is_state(entity, ''on'') else ''off'' ''#5353ec''}}'
        icon: mdi:sleep-off
        tap_action:
          action: more-info
        entity: switch.wach_schlafen
    alignment: end
    card_mod:
      style: |
        ha-card {
          height: 40px;
        }

Bildschirmfoto 2024-07-10 um 08.28.33

i found a post a while ago that helped me with the card-mod code blocks.
it might work like this:

      style: 
        mushroom-shape-icon$: |
          .shape {
            margin-right: 50px;
          }
        .: |
        ha-card {
          background: rgba(var(--rgb-primary-background-color), 0.3);
          left: -20px;
          top: -20px;
          width: 500px;
          --spacing: 10px 10px 0px 12px;
          --icon-size: 70px;
          --ha-card-border-width: 0;
          --chip-box-shadow: none;
        }

Amazing, that does the trick, thanks a lot :slight_smile: :heart:

Hello,
i also have the issue after updating HA with my card:
Before Update:
Bildschirmfoto 2024-07-10 um 10.55.45
After Update:
Bildschirmfoto 2024-07-10 um 10.57.04

Code
type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Kinderzimmer
    secondary: >-
      🌡️ {{ states('sensor.kinderzimmer_raumthermostat_temperature') | round(1)
      }} °C
    icon: mdi:teddy-bear
    entity: light.kinderzimmer
    tap_action:
      action: navigate
      navigation_path: kinderzimmer
    hold_action:
      action: toggle
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
          margin-bottom: -10px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.kinderzimmer_bewegungsmelder_occupancy
            state: 'on'
        chip:
          type: template
          icon_color: blue
          icon: mdi:motion-sensor
          entity: binary_sensor.kinderzimmer_bewegungsmelder_occupancy
          tap_action:
            action: more-info
      - type: conditional
        conditions:
          - entity: binary_sensor.heizung_kinderzimmer
            state_not: 'off'
        chip:
          type: template
          entity: climate.kinderzimmer_thermostat
          icon: |-
            {% if is_state(entity, 'heat') %}
              mdi:fire
            {% endif %} 
          icon_color: red
      - type: conditional
        conditions:
          - entity: binary_sensor.kinderzimmer_balkontur
            state: 'on'
        chip:
          type: template
          icon_color: amber
          icon: mdi:door-open
          entity: binary_sensor.kinderzimmer_balkontur
          tap_action:
            action: more-info
      - type: light
        entity: light.kinderzimmer
        content_info: none
        use_light_color: true
        icon: mdi:lightbulb
        tap_action:
          action: toggle
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        } 
card_mod:
  style: |
    ha-card {
      height: 102px;
      {% if is_state('light.kinderzimmer', 'on') %}
         background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }

Can anyone help here?

still no idea what changed, but it seems the negative values aren’t accepted with margin-xxxx values.
I managed to fix mine somehow by changing and playing with other values INSTEAD of the margin-xxxx - like i posted here

I try to get the amount of battery emptier than 30% into a mushroom chip card.
In Template (Developer Tools) it is working but not in this template.

May some one know a solution.

THX!

type: template
content: |-
  {% set ignore_entities = [] %}
  {{ states.sensor
  | selectattr('attributes.device_class', 'eq', 'battery')
  | rejectattr('entity_id', 'in', ignore_entities)
  | map(attribute='state')
  | reject('in', ['unknown', 'unavailable'])
  | map('int', -1) | select('le', 30)
  | select('ge', 0)
  | list | count
  }}
icon_color: orange
icon: |-
  {% set ignore_entities = [] %}
  {% if states.sensor
  | selectattr('attributes.device_class', 'eq', 'battery')
  | rejectattr('entity_id', 'in', ignore_entities)
  | map(attribute='state')
  | reject('in', ['unknown', 'unavailable'])
  | map('int', -1) | select('le', 30)
  | select('ge', 0)
  | list | count = 0
  %}
  mdi:battery-check
  {% else %}
  mdi:battery-alert
  {% endif %}
tap_action:
  action: navigate
  navigation_path: /lovelace/battery
hold_action:
  action: none
double_tap_action:
  action: none

Check my posts just a few posts above. The old way of resizing / moving items does not work anymore. I found a new that does work.

Can’t seem to get this fix to work on mine. It looks fine in the editor but losing its styling when I save it. Can you see anything that would fix it?

        card_mod:
          style: |
            ha-card {
              --chip-font-size: 0.3em;
              --chip-icon-size: 0.6em;
              --chip-border-width: 0;
              --chip-box-shadow: none;
              --chip-background: none;
              --chip-border: none;
              --chip-spacing: none;
              --chip-font-weight: normal;
            }

I did try this but it didn’t help:

        card_mod:
          style: 
            .: |
              ha-card {
                --chip-font-size: 0.3em;
                --chip-icon-size: 0.6em;
                --chip-border-width: 0;
                --chip-box-shadow: none;
                --chip-background: none;
                --chip-border: none;
                --chip-spacing: none;
                --chip-font-weight: normal;
              }

Same here… doesn‘t work for me. I like to add some space between icon and text.

IMG_0038

      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2) !important;
        } 
        ha-card {
          background: rgba(var(--rgb-primary-text-color), 0.025) !important;
          height: 55px;
          width: 500px;
          position: relative;
          left: -18px;
          top: -18px;
          --spacing: 12px 10px 0 12px;
          --icon-size: 76px;
          --ha-card-border-width: 0;

What card are you applying this to?

afbeelding

afbeelding

How can I make the OK button the size of the ja, nee. and how can I make it centered ?

this is what I have now in the card_mod

          card_mod:
            style:
              mushroom-state-info$: |
                .container {
                  margin: -10px;
                  text-align: center !important;                        
              .: |
                ha-card {
                    background-color: rgb({{ states("input_text.kleur_iconen")}})
                  }

i was thinking adding width but that does not work

                ha-card {
                    background-color: rgb({{ states("input_text.kleur_iconen")}})
                    width: 50px;

                  }

edit : solution

                ha-card {
                    background-color: rgb({{ states("input_text.kleur_iconen")}}) !important;
                    width: 100px;
                    margin-left: 65px;
                  }

Hi all. Some amazing work in here, but I’ve had a bit of search and wasn’t able to find help for this exact scenario.

I have a Mushroom chip with animation based on an entity’s state that’s working fine as is, but I’d love to change it to add additional functionality. I would love if it could be tied into two entities instead of one. I.e. Currently when the dog needs feeding and input boolean is turned on and the icon colours and is animated.

I’d like to change the colour and animation if a second input boolean’s state is on. I’m not exactly sure how it would function if they were both on at the same time, but for these purposes it probably doesn’t matter which is showing. Is that possible?

Here’s my code for the existing working chip, followed by the additional animation frames I intend to include for the second input boolean:

type: vertical-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        double_tap_action:
          action: none
        icon: mdi:dog
        icon_color: |-
          {% set state=states('input_boolean.edie_needs_feeding') %}
          {% if state=='off' %}
            grey
          {% else %}
            brown
          {% endif %}
        tap_action:
          action: more-info
        hold_action:
          action: none
        entity: input_boolean.edie_needs_feeding
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          ha-state-icon {
            {% if is_state('input_boolean.edie_needs_feeding','on') %}
              animation: huh 4s ease infinite; transform-origin: 50% 60%;
            {% else %}
            {% endif %}
          }
          @keyframes huh {
            0%, 10%, 75%, 100% { transform: rotate(0deg); }
            15% { transform: rotate(-25deg); }
            30%, 35% { transform: rotate(-40deg); }
            50% { transform: rotate(12deg); }
            65% { transform: rotate(-8deg); }
          }

‘Surprise’ animation

    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: surprise 3s ease infinite;
      }
      @keyframes surprise {
        0%, 20%, 100% { transform: translateY(0); }
        2.5% { transform: translateY(-6px) rotate(-14deg); }
        5% { transform: translateY(-6px) rotate(11deg); }
        7.5% { transform: translateY(-6px) rotate(-8deg); }
        10% { transform: translateY(-6px) rotate(5deg); }
        12.5% { transform: translateY(0); }
        15% { transform: translateY(-3px) }
      }

Hi, i am trying to animate an icon but it seems that i am missing something, the mdi:fan is working perfectly, but i am not able to pulse the mdi:pi-hole icon, cand anyone halp me please. Thanks

type: vertical-stack
cards:
  - type: custom:button-card
    icon: mdi:cog-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-mushroom/net
    entity: sensor.cpu_temperature
    show_state: true
    name: ' '
    custom_fields:
      btn:
        card:
          type: custom:mushroom-chips-card
          chips:
            - type: template
              tap_action:
                action: toggle
              icon: mdi:pi-hole
              entity: input_boolean.pi_hole_timer
              card_mod:
                style: |
                  ha-card {
                    --chip-background: transparent;
                    padding: 5px !important;
                    border-radius: 100px !important;
                    color: yellow !important;
                    border: none !important;
                    {% if is_state('input_boolean.pi_hole_timer', 'on') %}
                      opacity: 1 !important;
                      animation: pulse 2s infinite !important;
                    {% else %}
                      opacity: 0.4 !important;
                      animation: none !important;
                    {% endif %}
                  }
                  @keyframes pulse {
                    0% { transform: scale(1); }
                    50% { transform: scale(1.1); }
                    100% { transform: scale(1); }
                  }
            - type: template
              tap_action:
                action: toggle
              icon: mdi:fan
              entity: sensor.argon_one_addon_fan_speed
              card_mod:
                style: |
                  ha-card {
                    --chip-background: transparent;
                    padding: 5px!important;
                    border-radius: 100px!important;
                    color: yellow!important;
                    border: none!important;
                    {% set fan_speed = states('sensor.argon_one_addon_fan_speed') %}
                    {% if fan_speed != 'unknown' and fan_speed | int > 0 %}
                      opacity: 1 !important;
                      animation: spin 1s linear infinite !important;
                     {% else %}
                      opacity: 0.4 !important;
                      animation: none !important;
                    {% endif %}
                  }
                  @keyframes spin {
                    100% { transform: rotate(360deg); }
                  }
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(135deg, rgba(220, 20, 60, 1) 0%, rgba(0, 0, 0, 1) 100%);
          border: transparent!important;
          color: white;
          box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
          padding: 20px;
        }
    styles:
      grid:
        - grid-template-areas: '"n btn" "s btn" "i btn"'
        - grid-template-columns: 1fr min-content
        - grid-template-rows: min-content min-content 1fr
      card:
        - padding: 10px 2px 91px 10px
      img_cell:
        - justify-content: start
        - position: absolute
        - width: 150px
        - height: 150px
        - left: 0
        - bottom: 0
        - margin: 0 0 -30px -30px
        - background: transparent;
        - border-radius: 500px
      icon:
        - width: 60px
        - color: black
        - opacity: 1
      custom_fields:
        btn:
          - justify-content: end
          - align-self: start
      name:
        - justify-self: start
        - align-self: start
        - font-size: 18px
        - font-weight: 500
        - color: white
      state:
        - min-height: 80px
        - justify-self: start
        - align-self: start
        - font-size: 14px
        - opacity: 0.7
columns: 3