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

[mvanlijden (Maarten van Lijden)]

Same issue here, I think I have similar room cards. This was the original look on my end from an old screenshot:
and now:

(without fixed card height)

I am not a star with card_mod but i think somehow with release 2024.7 the asbolute position of the icon was mangled.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Woonkamer
    secondary: |-
      {% if has_value("sensor.rookmelder_beneden_temperature") %}
       {{ states('sensor.rookmelder_beneden_temperature') | round(0) }} °C
      {% endif %}
    icon: mdi:sofa
    entity: light.lampen_woonkamer
    tap_action:
      action: navigate
      navigation_path: woonkamer
    hold_action:
      action: toggle
    icon_color: blue
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.3);
        } 
        :host {
          background: rgba(var(--rgb-primary-background-color), 0.3);
          --mush-icon-size: 70px;
          height: 56px;
          margin-left: -20px !important;
          --ha-card-border-width: 0;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: light.lampen_woonkamer
        icon: mdi:lightbulb-group
        icon_color: |-
          {% if is_state(entity, 'on') %}
            orange
          {% else %}
            disabled
          {% endif %}
        tap_action:
          action: none
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              position: absolute;
              left: 0px;
            }
      - type: conditional
        conditions:
          - entity: binary_sensor.tussendeur_contact
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:door-open
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: null
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:motion-sensor
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: null
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:sleep
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: media_player.home_woonkamer
            state_not: 'off'
          - entity: media_player.home_woonkamer
            state_not: idle
          - entity: media_player.home_woonkamer
            state_not: unavailable
        chip:
          type: template
          entity: media_player.home_woonkamer
          icon_color: disabled
          icon: |-
            {% set media_type = state_attr(config.entity,
            'media_content_type') %}
            {% if media_type == 'tvshow' %}
              mdi:television-classic
            {% elif media_type == 'movie' %}
              mdi:movie-roll
            {% elif media_type == 'music' %}
              mdi:music
            {% elif media_type == 'playlist' %}
              mdi:music
            {% else %}
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          card_mod:
            style: |
              ha-card {
                {% set media_type = state_attr(config.entity, 'media_content_type') %}
                {% if media_type == 'tvshow' %}
                  animation: flicker 1s linear infinite alternate;
                {% elif media_type == 'movie' %}
                  animation: spin 2s linear infinite reverse;
                {% elif media_type == 'music' %}
                  animation: beat 1.3s ease-out infinite both;
                {% elif media_type == 'playlist' %}
                  animation: beat 1.3s ease-out infinite both;
                {% else %}
                {% endif %}
              }
              @keyframes spin {
                100% { transform: rotate(360deg); }
              }
              @keyframes flicker {
                0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 1; }
                32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { opacity: 0.6; }
              }
              @keyframes beat {
                0% { transform: scale(1); }
                10% { transform: scale(1.1); }
                17% { transform: scale(1.05); }
                33% { transform: scale(1.25); }
                60% { transform: scale(1); }
              }
      - type: conditional
        conditions:
          - entity: media_player.lg_webos_woonkamer
            state_not: 'off'
          - entity: media_player.lg_webos_woonkamer'
            state_not: idle
          - entity: media_player.lg_webos_woonkamer
            state_not: unavailable
        chip:
          type: template
          entity: media_player.lg_webos_woonkamer
          icon_color: disabled
          icon: |-
            {% set source = state_attr(config.entity,
            'source') %}
            {% if source == 'Live TV' %}
              mdi:television-classic
            {% elif source == 'Plex' %}
              mdi:plex
            {% elif source == 'YouTube' %}
              mdi:youtube
            {% elif source == 'Chromecast' %}
              mdi:cast
            {% elif source == 'NPO' %}
              mdi:cast
            {% elif source == 'RTL XL' %}
              mdi:cast
            {% else %}
              mdi:television
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: sensor.woonkamer_heating
            state_not: '0.0'
          - entity: sensor.woonkamer_heating
            state_not: '0'
        chip:
          type: template
          entity: climate.woonkamer
          icon_color: disabled
          icon: |-
            {% if is_state(entity, 'auto') %}
              mdi:thermometer-auto
            {% elif is_state(entity, 'heat') %}
              mdi:thermometer-lines
            {% else %}
              mdi:home-thermometer
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          card_mod:
            style: |
              ha-card {
                {% if is_state(config.entity, 'heat') %}
                  animation: heat 2s infinite;
                {% endif %}
              }
              @keyframes heat {
                50% { opacity: 0.4; }
              }
      - type: conditional
        conditions:
          - entity: cover.woonkamer_gordijnen
            state_not: unavailable
        chip:
          type: template
          entity: cover.woonkamer_gordijnen
          icon_color: disabled
          icon: >-
            {% if is_state(entity, 'closed') %}
              mdi:curtains-closed
            {% elif is_state(entity, 'open') and
            state_attr(entity,'current_position') is none %}
              mdi:curtains-closed
            {% elif is_state(entity, 'open') and
            state_attr(entity,'current_position') < 50 %}
              mdi:curtains
            {% else %}
              mdi:curtains
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-border-width: 0;
        }
card_mod:
  style: |
    ha-card {
      height: 92px;
    }

[istapeter]

It looks like this version is slow. Camera footage does not work for me now or the image looks like 8 pixels.
I am not sure what is going on.

[Valdorama]

I’ve got the exact same issue too. Unfortunately don’t have screenshots from before to demonstrate.

[Frosty]

@GTunney

I’m having an issue with mushroom cards

@mvanlijden

Same issue here,

@istapeter

It looks like this version is slow

@Valdorama

I’ve got the exact same issue too

there must be something you all have in common, I don’t believe it to be a mushroom problem.

mushroom doesn’t have a camera card so it must be something else that is causing the slow pixel refresh.

are you all using the new(ish) sections view on the dashboard ?

[GTunney]

No I am not using the sections view. It’s either mushroom or card_mod in conjunction with the 2024.7.0 update that’s causing it.

[Valdorama]

Yeah, same here - not using Sections and not referring to camera card. Defo seems to be some combination of Mushroom and/or card_mod.

[WebPower (Karoly Papp)]

Then I think I’ll wait one more time with the update until I find out what’s wrong.

[mvanlijden (Maarten van Lijden)]

Indeed. Camera cards are all working good.
This is in my stable dashboard which I’ve been using for over 2 year now I think, so no sections in there. Like I mentioned, something with CSS that must have been updated or broken with 2024.7.0…

Wonder if anybody else has been having issue with sizing related CSS with Card Mod after the latest update?

[tischer.s (Sebastian Tischer)]

I use the layout card with the following code:

grid-template-columns: 50% 50%
grid-template-rows: auto
grid-template-areas: |
  "left right"
mediaquery:
  "(max-width: 390px)":
    grid-template-columns: 100%
    grid-template-areas: |
      "left"
      "right"
  "(max-width: 800px)":
    grid-template-columns: 50% 50%
    grid-template-areas: |
      "left left"
      "right right"

Can I overwrite the card? Otherwise I need to switch to the standard card and keep my hardly built extra controls away

[tischer.s (Sebastian Tischer)]

I guess I have the same issue - my card got bigger in height and the content got a bit misplaced on mobile

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

Good morning everybody, I need a bit help from the experts With the new HA update, my custom cards got “bigger” and the css broke a bit. I am not sure if this is a mushroom issue or HA issue - am I the only one? This is the code for one card: 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_mischun…

[r_anand]

Have the same issue, was working as expected until the upgrade 2 days ago.
The cards have gone ‘bigger’ so the bottom icons on the card has disappeared now.

One of my cards

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-template-card
    secondary: >-
      {{
      relative_time(states.binary_sensor.front_door_sensor_contact.last_changed)
        | replace("day", "d")| replace("hour", "hr") | replace("minute",
        "min") | replace("second", "sec") }} ago
    entity: light.front_door
    name: Front Door
    icon: mdi:light-flood-down
    use_light_color: true
    hold_action:
      action: toggle
    tap_action:
      action: navigate
      navigation_path: /dashboard-rooms/front-porch
    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: 70px;
          --ha-card-border-width: 0px;          
          height: 55px;
          margin-left: -23px !important;
          margin-top: -3px !important;
        }  
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        entity: binary_sensor.front_door_motion_sensor_occupancy
        icon: |
          {{ 'mdi:motion-sensor-off' 
          if is_state(entity,'unavailable') 
          else 'mdi:motion-sensor' }}
        icon_color: |
          {% if is_state('binary_sensor.front_door_motion_in_the_last_hour',
          'on') %}
            orange
          {% endif %}
        card_mod:
          style: |
            ha-state-icon {
              {% if is_state(config.entity,'on') %}
                 animation: clip 2s linear infinite;
              {% endif %}
            }
            @keyframes clip {
                50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
            }
             ha-card {
               background: transparent;
               border-style: none;
               --spacing:0px
             }
             :host {
               padding: 0px;
             }
              mushroom-shape-icon {
              --shape-color: none !important;
            }  
        tap_action:
          action: more-info
      - type: custom:mushroom-template-card
        entity: binary_sensor.front_door_sensor_contact
        content_info: none
        tap_action:
          action: more-info
        secondary: for {{states('sensor.front_door_open_duration') }} secs
        icon: |
          {% if is_state('binary_sensor.front_door_sensor_unreachable',
          'on') %}
            mdi:door-closed-cancel
          {% elif is_state('binary_sensor.front_door_sensor_contact', 'on') %}
            mdi:door-open
          {% elif is_state('binary_sensor.front_door_sensor_contact', 'off') %}
            mdi:door-closed
          {% else %}
            mdi:door-closed-cancel
          {% endif %}
        icon_color: |
          {% if is_state('binary_sensor.front_door_opened_in_the_last_hour',
          'on') %}
            orange
          {% endif %}
        card_mod:
          style: |
            {% if is_state('binary_sensor.front_door_is_left_opened',
             'on') %}
               mushroom-shape-icon {
                 animation: blink 1s linear infinite;
               }
               @keyframes blink {
                 50% {opacity: 0;}
               }
             {% endif %}
             ha-card {
               background: transparent;
               border-style: none;
               --spacing: 0px;
             }
             :host {
               padding: 0px;
               margin-left: -80px !important;
             }
              mushroom-shape-icon {
              --shape-color: none !important;
            }  
      - type: custom:mushroom-template-card
        entity: light.entrance_light
        tap_action:
          action: more-info
        hold_action:
          action: toggle
        icon: |
          {% if is_state(entity, 'unavailable') %}
            mdi:lightbulb-alert-outline
          {% else %}
            hue:bulb-group-candle
          {% endif %}          
        icon_color: |
          {% if is_state(entity, 'on') %}
            orange
          {% endif %}
        card_mod:
          style: |
            ha-card {
               background: transparent;
               border-style: none;
               --spacing:0px
             }
             :host {
               padding: 0px;
               margin-right: -80px !important;
             }
            mushroom-shape-icon {              
              --shape-color: none !important;
            }                       
card_mod:
  style: |
    ha-card {
      {% if is_state('light.front_door', 'on') %}
        background: rgba(255, 152, 0, 0.1);
      {% endif %}
    } 

[MrGrey]

This probably doesn’t belong here, but I mainly use mushroom cards, so…

It’s common, in all of the postings above (including Part 1), to use things like…

{{ states(config.entity) }}

or

{{ states(entity) }}

…to show information about the entity defined in the card without referring to its original long name directly.

I’m hoping someone can show/tell me how to write…

{{ states.binary_sensor.my_sensor.last_changed }}

…assuming I have:

entity: binary_sensor.my_sensor

as the Entity of a Mushroom Template Card.

Is that possible?.. I have tried…

{{ states.entity.last_changed }}
{{ states.config.entity.last_changed }}

…and wasn’t surprised to find that it didn’t work.

At some point I might find that it can’t be done, or, someone might show me how?

MrGrey.

[thesmer (Thomas)]

Same issue here. Is there any general advise?
Shall we wait for a Mushroom update, or try debugging it?

[fugley]

type: custom:mushroom-template-card
entity: binary_sensor.my_sensor
primary: >
  {{ states[entity].last_changed }}

[foozyStudio (Pratik Bhoir)]

I am creating a title card, were on tap action I am calling a service which passes event_date in the format YYYY-MM-DD. I want to pass todays Date dynamically.

type: custom:mushroom-template-card
primary: Raise Event
icon: mdi:home
tap_action:
  action: call-service
  service: script.create_maid_event
  data:
    event_date: '2024-07-06'
    status: maid_present
  target: {}

[BlackThorne (Eyal Rotem)]

I too had my spacing all wrong and cards got bigger after updating to 2024.7.

what i found that effected this in card-mod was:

margin-left: -18px;

i was able to play around with another way in css (using chatGPT as i have no experience in CSS haha):

poistion: relative;
left: -18px

i also had to use top: -##px to adjust stuff.
adding --mush-spacing: 0px also effected the setup.
so you can try and play around…

to sum up - as i see most of us are basing our cards on the room stack-in-card by rhys:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    ...
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-background-color), 0.25);
          --mush-icon-size: 70px;
          --mush-spacing: 0px
          height: 56px;
          position: relative;
          left: -20px;
          top: -##px;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        ...
      - type: conditional
        ...
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        }
card_mod:
  style: |
    ha-card {
      height: 92px;
    }

[thesmer (Thomas)]

Thanks for the debugging and information. I just realized, there is an update for the Mushroom card in HACS available and installed it. I see some changes in my layout now, but still not the old appearance.
Can I ask you, if you did your corrections before the mushroom update to v3.6.3:

[BlackThorne (Eyal Rotem)]

Before. you just made me check haha =]

after my changes - this update actually screwed up my card-mod spacing between chips. i changed the spacing to be smaller and now it is ignored and it overflowed out of my card. damn it!

i wonder what’s the root cause for all of this

[mvanlijden (Maarten van Lijden)]

I am no CSS master, but I also played around with the CSS a bit and now have this layout again (top = new, bottom = old unmodified)

Main changes in the card_mod:

• Changed the adjustments from :host to ha-card and using default ha-card elements and not only mush elements (i thought this was also a recommendation by @piitaya when adjusting mushroom cards)
• Adjusted the spacing as these seem to have been changed making the chips card always change to bottom
• Added a width parameter in there to make sure the background covers all the way to the right. Does anybody know a smart way to make this card width + 20px?

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Woonkamer
    secondary: |-
      {% if has_value("sensor.rookmelder_beneden_temperature") %}
       {{ states('sensor.rookmelder_beneden_temperature') | round(0) }} °C
      {% endif %}
    icon: mdi:sofa
    entity: light.lampen_woonkamer
    tap_action:
      action: navigate
      navigation_path: woonkamer
    hold_action:
      action: toggle
    icon_color: blue
    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: template
        entity: light.lampen_woonkamer
        icon: mdi:lightbulb-group
        icon_color: |-
          {% if is_state(entity, 'on') %}
            orange
          {% else %}
            disabled
          {% endif %}
        tap_action:
          action: none
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              position: absolute;
              left: 0px;
            }
      - type: conditional
        conditions:
          - entity: binary_sensor.nuki_pro_achterdeur_door_sensor
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:door-open
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: binary_sensor.everything_presence_lite_24eaf8_occupancy
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:motion-sensor
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: null
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:sleep
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: media_player.home_woonkamer
            state_not: 'off'
          - entity: media_player.home_woonkamer
            state_not: idle
          - entity: media_player.home_woonkamer
            state_not: unavailable
        chip:
          type: template
          entity: media_player.home_woonkamer
          icon_color: disabled
          icon: |-
            {% set media_type = state_attr(config.entity,
            'media_content_type') %}
            {% if media_type == 'tvshow' %}
              mdi:television-classic
            {% elif media_type == 'movie' %}
              mdi:movie-roll
            {% elif media_type == 'music' %}
              mdi:music
            {% elif media_type == 'playlist' %}
              mdi:music
            {% else %}
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          card_mod:
            style: |
              ha-card {
                {% set media_type = state_attr(config.entity, 'media_content_type') %}
                {% if media_type == 'tvshow' %}
                  animation: flicker 1s linear infinite alternate;
                {% elif media_type == 'movie' %}
                  animation: spin 2s linear infinite reverse;
                {% elif media_type == 'music' %}
                  animation: beat 1.3s ease-out infinite both;
                {% elif media_type == 'playlist' %}
                  animation: beat 1.3s ease-out infinite both;
                {% else %}
                {% endif %}
              }
              @keyframes spin {
                100% { transform: rotate(360deg); }
              }
              @keyframes flicker {
                0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 1; }
                32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { opacity: 0.6; }
              }
              @keyframes beat {
                0% { transform: scale(1); }
                10% { transform: scale(1.1); }
                17% { transform: scale(1.05); }
                33% { transform: scale(1.25); }
                60% { transform: scale(1); }
              }
      - type: conditional
        conditions:
          - entity: media_player.lg_webos_woonkamer
            state_not: 'off'
          - condition: state
            entity: media_player.lg_webos_woonkamer
            state_not: idle
          - entity: media_player.lg_webos_woonkamer
            state_not: unavailable
        chip:
          type: template
          entity: media_player.lg_webos_woonkamer
          icon_color: disabled
          icon: |-
            {% set source = state_attr(config.entity,'source') %}
            {% if source == 'Live TV' %}
              mdi:television-classic
            {% elif source == 'Plex' %}
              mdi:plex
            {% elif source == 'YouTube' %}
              mdi:youtube
            {% elif source == 'Chromecast' %}
              mdi:cast
            {% elif source == 'NPO' %}
              mdi:cast
            {% elif source == 'RTL XL' %}
              mdi:cast
            {% else %}
              mdi:television
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: sensor.woonkamer_heating
            state_not: '0.0'
          - entity: sensor.woonkamer_heating
            state_not: '0'
        chip:
          type: template
          entity: climate.woonkamer
          icon_color: disabled
          icon: |-
            {% if is_state(entity, 'auto') %}
              mdi:thermometer-auto
            {% elif is_state(entity, 'heat') %}
              mdi:thermometer-lines
            {% else %}
              mdi:home-thermometer
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          card_mod:
            style: |
              ha-card {
                {% if is_state(config.entity, 'heat') %}
                  animation: heat 2s infinite;
                {% endif %}
              }
              @keyframes heat {
                50% { opacity: 0.4; }
              }
      - type: conditional
        conditions:
          - entity: cover.woonkamer_gordijnen
            state_not: unavailable
        chip:
          type: template
          entity: cover.woonkamer_gordijnen
          icon_color: disabled
          icon: >-
            {% if is_state(entity, 'closed') %}
              mdi:curtains-closed
            {% elif is_state(entity, 'open') and
            state_attr(entity,'current_position') is none %}
              mdi:curtains-closed
            {% elif is_state(entity, 'open') and
            state_attr(entity,'current_position') < 50 %}
              mdi:curtains
            {% else %}
              mdi:curtains
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          --chip-border-width: 0;
          position: relative;
          top: -20px;
        }
card_mod:
  style: |
    ha-card {
      height: 92px;
    }

[GTunney]

Thanks for this, this brought back the background picture for me but then I’m unable to then apply styling to the mushroom state info.

        mushroom-state-info$: 
          .primary {
            text-shadow: 0px 0px 5px black;
            --card-primary-font-weight: 325;
            --card-primary-color: white;
            --card-primary-font-size: 20px;
            align-items: end;
            margin-top: 175px;
            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;
          }