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

I am trying to get the icon in a Mushroom Template Badge to blink but I cannot figure out how to target the correct element with Card Mod. If I edit the ha-icon element in dev tools, for example by adding color: red;, the color of the icon color changes as expected. If I do this in the YAML for the badge, it does not work. My YAML is below. Once I am able to target the correct element, adding the animation and keyframes should be no issue.

I have confirmed that Card Mod is installed and working property for other (non-Mushroom) cards.

Any help would be appreciated.

type: custom:mushroom-template-badge
content: ""
icon: mdi:shield-alert-outline
color: >-
  {% if is_state("alarm_control_panel.omnilink_main", "armed_away") or
  is_state("alarm_control_panel.omnilink_main", "arming") %} Red {% else %} Grey
  {% endif %}
tap_action:
  action: perform-action
  perform_action: alarm_control_panel.alarm_arm_away
  target:
    entity_id: alarm_control_panel.omnilink_main
  data: {}
card_mod:
  style: |
    ha-icon {
      color: red;
    }

Thanks.

I have tried several times to apply card mod to the Mushroom Template Badge, but so far I’ve been unsuccessful.

I have animations with card_mod for my badges (HVAC indication) working for a mushroom-template-card by using:

card_mod:
        style:
          .: |
            mushroom-badge-icon { 
              {% set state = states('climate.livingroom')%}
              {% set state_atr =  state_attr('climate.livingroom', 'hvac_action')%}
              {% if ((state=="heat") and (state_atr=="heating")) %}
              animation: heat 3s linear infinite;
              opacity: 80%;
              {% endif %}
            }
            @keyframes heat {
             .... ("animation settings too long for pasting here:-))

Is your card type type: custom:mushroom-template-badge or a Mushroom card that contains a badge?

For example a Mushroom Template Card, Mushroom Climate Card or a Mushroom Person Card…

1 Like

mushroom-template-card, ah now I read your message again, it was about the badge card, not the generic template. Sorry

The Mushroom-Template-Badge doesn’t play well with card_mod. I’m not an expert by any means, but I can’t get it to work. I have tried diligently.

Yeah, should be the element “ha-state-icon” if I understand correct, and I don’t get car_mod to work either…

You can’t even mod the background. I’ll keep looking for a solution :mag:

1 Like

How do I make a second row of icons on the left or on the right?

type: horizontal-stack
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:home
        icon_color: |-
          {% if states('light.svet_v_kvartire') == 'on' %}
            light-blue
          {% else %}
            light-grey
          {% endif %}
        primary: Коридор
        secondary: >-
          {{ states('sensor.koridor_temperature')}}°C | {{ 
          states('sensor.koridor_humidity')}}%
        layout: horizontal
        fill_container: false
        multiline_secondary: false
        entity: light.svet_v_kvartire
        tap_action:
          action: toggle
        double_tap_action:
          action: navigate
          navigation_path: 1
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                font-size: 16px !important;
                position: relative;
                top: -55px;
                left: -155px;
                overflow: visible !important;
                white-space: normal !important;
              }
              .secondary {
                position: relative;
                overflow: visible !important;
                top: -52px;
                left: -155px;
              }
            mushroom-shape-icon$: |
              .shape {
                position: relative;
                left: -35px;
                top: 55px;
              }
            .: |
              :host {
                --mush-icon-size: 146px;
              }
              ha-card {
                background: none;
              }
            style: |
              mushroom-badge-icon {
                left: 110px;
                top: 3px;
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: switch.sonoff_mini_2_relay
            tap_action:
              action: toggle
            icon: mdi:ceiling-light
            hold_action:
              action: more-info
            icon_color: |-
              {% if is_state(entity, 'on') %} 
                amber 
              {% else %}
                light-grey
              {% endif %}
            double_tap_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  --chip-icon-size: 30px;
                  --chip-height: 35px;
                }
          - type: template
            entity: binary_sensor.lumi_lumi_sensor_magnet_door_otkryvaetsia
            icon: mdi:door
            icon_color: |-
              {% if is_state(entity, 'on') %} 
                amber
              {% else %}
               light-grey
              {% endif %}
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  --chip-icon-size: 30px;
                  --chip-height: 35px;
                }
          - type: template
            entity: binary_sensor.lumi_lumi_sensor_motion_door_dvizhenie_2
            icon: mdi:motion-sensor
            icon_color: |-
              {% if is_state(entity, 'on') %} 
                amber
              {% else %}
               light-grey
              {% endif %}
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  --chip-icon-size: 30px;
                  --chip-height: 35px;
                }
        card_mod:
          style:
            .: |
              ha-card {
                width: 66px;
                margin-left: 70%;
                top: -162px;
                background: none;
                --chip-border-width: 10;
              }
    card_mod:
      style: |
        ha-card {
          height: 178px;
          margin-left: auto;
          margin-right: auto;
        }
grid_options:
  columns: 6
  rows: auto

This code seems like it needs work, but here is a way to adjust your layout. It most like needs work

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr 1fr
      margin: 0px 0px 0px 0px
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:home
        icon_color: |-
          {% if states('light.svet_v_kvartire') == 'on' %}
            light-blue
          {% else %}
            light-grey
          {% endif %}
        primary: Коридор
        secondary: >-
          {{ states('sensor.koridor_temperature')}}°C | {{ 
          states('sensor.koridor_humidity')}}%
        layout: horizontal
        fill_container: false
        multiline_secondary: false
        entity: light.svet_v_kvartire
        tap_action:
          action: toggle
        double_tap_action:
          action: navigate
          navigation_path: 1
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                font-size: 16px !important;
                position: relative;
                top: -55px;
                left: -155px;
                overflow: visible !important;
                white-space: normal !important;
              }
              .secondary {
                position: relative;
                overflow: visible !important;
                top: -52px;
                left: -155px;
              }
            mushroom-shape-icon$: |
              .shape {
                position: relative;
                left: -35px;
                top: 55px;
              }
            .: |
              :host {
                --mush-icon-size: 146px;
              }
              ha-card {
                background: none;
                border: none;
              }
            style: |
              mushroom-badge-icon {
                left: 110px;
                top: 3px;
              }

      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: switch.sonoff_mini_2_relay
            tap_action:
              action: toggle
            icon: mdi:ceiling-light
            hold_action:
              action: more-info
            icon_color: |-
              {% if is_state(entity, 'on') %} 
                amber 
              {% else %}
                light-grey
              {% endif %}
            double_tap_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  --chip-icon-size: 30px;
                  --chip-height: 35px;
                }
          - type: template
            entity: binary_sensor.lumi_lumi_sensor_magnet_door_otkryvaetsia
            icon: mdi:door
            icon_color: |-
              {% if is_state(entity, 'on') %} 
                amber
              {% else %}
               light-grey
              {% endif %}
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  --chip-icon-size: 30px;
                  --chip-height: 35px;
                }
          - type: template
            entity: binary_sensor.lumi_lumi_sensor_motion_door_dvizhenie_2
            icon: mdi:motion-sensor
            icon_color: |-
              {% if is_state(entity, 'on') %} 
                amber
              {% else %}
               light-grey
              {% endif %}
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  --chip-icon-size: 30px;
                  --chip-height: 35px;
                }
        card_mod:
          style: |
            
              ha-card {
                width: 66px;
                background: none !important;
                 --chip-border-width: 10px !important; 
              }                
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: switch.sonoff_mini_2_relay
            tap_action:
              action: toggle
            icon: mdi:ceiling-light
            hold_action:
              action: more-info
            icon_color: |-
              {% if is_state(entity, 'on') %} 
                amber 
              {% else %}
                light-grey
              {% endif %}
            double_tap_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  --chip-icon-size: 30px;
                  --chip-height: 35px;
                }
          - type: template
            entity: binary_sensor.lumi_lumi_sensor_magnet_door_otkryvaetsia
            icon: mdi:door
            icon_color: |-
              {% if is_state(entity, 'on') %} 
                amber
              {% else %}
               light-grey
              {% endif %}
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  --chip-icon-size: 30px;
                  --chip-height: 35px;
                }
          - type: template
            entity: binary_sensor.lumi_lumi_sensor_motion_door_dvizhenie_2
            icon: mdi:motion-sensor
            icon_color: |-
              {% if is_state(entity, 'on') %} 
                amber
              {% else %}
               light-grey
              {% endif %}
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  --chip-icon-size: 30px;
                  --chip-height: 35px;
                }
        card_mod:
          style: |
              ha-card {
                width: 66px;
                 background: none !important;
                --chip-border-width: 10px !important; 
              }                
1 Like

Very Thnx ))

I’m working on creating a reusable room control card for my Home Assistant setup. To avoid repetition, I’m utilizing the decluttering_templates feature and embedding mushroom cards within them.

My goal is to make the room control card dynamic based on the specific entities present in each room. For example, some rooms have ceiling fans, while others don’t. I’d like to pass in the fan entity (e.g., input_select.living_room_fan_mode) as a parameter to my decluttering template.

The challenge I’m facing is conditionally displaying a mushroom chip (specifically a template chip that would trigger a fan control popup) only when the fan_entity parameter is actually passed into the decluttering template for a particular room.

From what I’ve seen with the standard conditional chip in mushroom, it seems to primarily work based on the state of an entity. I need a way to conditionally show the chip based on whether the fan_entity parameter even exists within the context of the rendered card.

For example, let’s say I have two rooms: “Living Room” and “Bedroom”.

  • For the “Living Room”, I would call my decluttering template and pass in the fan_entity:
- type: custom:decluttering-card
  template: room_control_template
  variables:
    room_name: "Living Room"
    light_entity: light.living_room_lights
    fan_entity: input_select.living_room_fan_mode
    # ... other entities
  • For the “Bedroom”, I would call the same template but without the fan_entity:
- type: custom:decluttering-card
  template: room_control_template
  variables:
    room_name: "Bedroom"
    light_entity: light.bedroom_lights
    # ... other entities (no fan_entity)

I want my room_control_template to render a mushroom chip for the fan only in the “Living Room” card (because the fan_entity was passed in). The “Bedroom” card should not display any fan-related chip.

I am looking for a generalized solution. This isn’t limited to fans, some rooms have shades, others have automation I want to associate with a chip, etc. For a bit more context, the room card I am talking about looks a lot like this one.

  • Is there a way within a mushroom card (or perhaps in conjunction with the decluttering template) to conditionally display a chip based on the existence or non-existence of a passed-in variable/parameter?

  • Are there alternative approaches I should consider to achieve this dynamic chip display based on available entities?

Edit: There may be a better and cleaner way to do this, but this is what I have done for now and seems to at least work.

  • I added to the template a set of “show_” parameters, e.g. show_fan, show_scene, show_covers.
  • I created an input boolean called “false” and one called “true”, false is off, true is on.
  • I created a conditional chip that looks at the “show_” parameter and if it is on, shows it.

The defaults end up looking like this:

default:
      - climate_action: '[[climate]]'
      - humidity: 'False'
      - show_fan: input_boolean.false
      - fan: input_boolean.false
      - show_scene_entity: input_boolean.false
      - show_scene_entity_state: 'on'
      - scene_icon: none
      - scene: none

Then when implementing the card, you end up with this:

          - type: custom:decluttering-card
            template: room_card
            variables:
              - name: Family Room
              - group: group.family_room
              - climate: climate.living_room
              - climate_action: climate.livingroom
              - dashboard: /family-room
              - lights: light.family_room_lights
              - show_fan: input_boolean.true
              - fan: fan.family_room_fan
              - show_scene_entity: sensor.home_sun_phase
              - show_scene_entity_state: night
              - scene_icon: mdi:moon-waxing-crescent
              - scene: scene.nighttime_tv

I don’t like that I have to have a separate show_ parameter, but it does seem to work.

Here is a simple example where the fan chip will only appear if the light in another room is on.

You aren’t limited to only using the conditional chip

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:fan
    icon_color: blue
    entity: fan.your_fan
    card_mod:
      style: |
        ha-card {
          border: none;
          --chip-icon-size: 30px;
          background: none !important;
          {% if not is_state('light.your light, 'on')%}
          display: none !important;
          {% endif %};
            }
  - type: template
    icon: mdi:car-side
    icon_color: red
    card_mod:
      style: |
        ha-card {
          border: none;
          --chip-icon-size: 30px;
          background: none !important;
            }

I am trying to create an icon color template that mimics the colors of the Mushroom Cover Card up and down arrows. For example, if the cover is down, the down arrow is grey and up arrow is black, if light mode, and white if dark mode. The grey is easy to do in a template but is there a way to do black vs white based on the light/dark mode?

Hey everyone. I havent updated this card in a very long time, and finally did so today, and my animation is no longer working due to the breaking change on version 3.0

Can someone please look at my code and tell me how to fix the fan icon spinning

Thnaks

type: custom:restriction-card
duration: 30
restrictions:
  confirm:
    block: true
card:
  type: custom:stack-in-card
  cards:
    - type: custom:mushroom-template-card
      primary: Fan
      secondary: |
        {% set vol_level = states(entity) | float %}
        {% if vol_level == 1 %}
          Off
        {% else %}
        {% set vol = states(entity) | float * 1 %}
        {{ vol | round | int }}%
        {% endif %}
      icon: mdi:fan
      icon_color: |
        {% set vol_level = states(entity) | float %}
        {% if vol_level == 1 %}
          #696969
        {% else %}
          indigo
        {% endif %}
      entity: input_number.fan_slider
      tap_action:
        action: call-service
        service: script.cigar_fan_off
        data: {}
        target: {}
      card_mod:
        style:
          mushroom-shape-icon$: |
            ha-icon {
              --icon-animation: rotation {{ 5 / states(config.entity) | float * 10 }}s linear infinite;
            }
                @keyframes rotation {
              100% {
                transform: rotate(360deg);
              }
            }
    - type: custom:my-slider-v2
      entity: input_number.fan_slider
      styles:
        card:
          - height: 55px
        container:
          - border-radius: 12px
        track:
          - background: >
              [[[ if (entity.state == "off") return
              "rgba(var(--mush-rgb-disabled), 0.2)";
               else return "rgba(120, 120, 120, 0.2)";
              ]]]
        progress:
          - background: >
              [[[ if (entity.state == "off") return
              "rgb(var(--mush-rgb-disabled))";
               else return "rgb(var(--mush-rgb-indigo))";
              ]]]
        thumb:
          - width: 0px
      card_mod:
        style: |
          ha-card {
            padding: 0px 12px 12px;
            --mush-rgb-disabled: 189,189,189;
            --mush-rgb-indigo: 63, 81, 181;
          }

It should be

card_mod:
  style: |
    ha-state-icon {

Well that was incredibly fast thank you lol
Fan is now spinning

Can I ask your help for one final animation. I did this correct for this next card, and shape is pulsing, however the icon itself is no longer moving. The flames used to look like they were going up and down.

Is there something else that changed?

type: custom:mushroom-template-card
primary: Fireplace
secondary: Heat is on
icon: mdi:radiator
icon_color: red
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-state-icon {
        animation: clip 1s linear infinite;
      }
      @keyframes clip {
        0% {
          clip-path: inset(50% 0 0 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
        }
      }
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @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;
        }
      }

In fact to further clarify this is the code that is no longer working

When i delete this, the shape still pulses fine

      ha-state-icon {
        animation: clip 1s linear infinite;
      }
      @keyframes clip {
        0% {
          clip-path: inset(50% 0 0 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
        }
      }

@LiQuid_cOOled help me with this card
I really appreciate his HELP. Try may be you gonna like it

type: custom:mushroom-template-card
icon: mdi:fireplace
icon_color: teal
primary: Living Room
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape:after {
         content: "";
         height: 11px;
         width: 11.6px;
         border-width: 0;
         position: absolute;
         margin-top:5px;
         left:14px; 
         clip-path: polygon(71% 83%, 78% 73%, 81% 64%, 80% 55%, 76% 47%, 69% 41%, 63% 36%, 59% 30%, 56% 22%, 59% 13%, 59% 13%, 52% 15%, 45% 20%, 39% 28%, 35% 40%, 36% 49%, 38% 58%, 33% 57%, 30% 51%, 31% 35%, 24% 44%, 19% 58%, 22% 66%, 26% 76%, 35% 85%, 48% 88%, 61% 86%);
         {% if states('light.living_room_lights') == 'on' %}
         background: linear-gradient(to top left, #FFFF11 22%, #FF1A16 57%);
         animation: fire 400ms ease-in-out infinite, drum 2s ease infinite;
         {% endif %}     
                }
      @keyframes fire {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        20%  { transform: translate(0.4px, -0.4px) rotate(4deg); }
        40%  { transform: translate(-0.4px, 0.4px) rotate(-4deg); }
        60%  { transform: translate(0.4px, 0.4px) rotate(4deg); }
         }
    .: |
      ha-card{ 
        --card-primary-font-size: 10px;
        --card-primary-font-weight: bold;
        width: 150px;
        margin-left: 5px !important;
        {% if states('light.living_room_lights') == 'on' %}
        box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
        {% else %}
        box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
        {% endif %}      
        {% if is_state('light.living_room_lights','on') %}
        background: rgba(255, 152, 0, 0.1) !important;
        {% endif %}
        }                               }                                
tap_action:
  action: navigate
  navigation_path: living-room-1
fill_container: true
layout: horizontal
multiline_secondary: false

This will fix the issue

type: custom:mushroom-template-card
primary: Fireplace
secondary: Heat is on
icon: mdi:radiator
icon_color: red
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 2s infinite;
       }
      @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;}
             } 
    .: |          
       ha-state-icon {
         animation:  fire 2s alternate infinite;}
       @keyframes fire {
         0%, 100% { clip-path: inset(50% 0 0 0); }
         0% { clip-path: inset(0 0 0 0 ); }
          }