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

[Zenia (Yevgeniy)]

Need help with my person card, it’s a combination of other cards code( use great people ideas ) it’s looks ok but I would like to make everything looks uniformed and clean, move geolocation to highlighted area. Please help me to tweak this code. Thank you

type: custom:stack-in-card
mode: vertical
card_mod:
  style: |
    ha-card {
      background: none; !important;
      border: 0 !important;
    }
cards:
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-person-card
        name: Yevgeniy
        entity: person.yevgeniy
        icon_type: entity-picture
        primary_info: state
        secondary_info: false
        card_mod:
          style:
            mushroom-shape-avatar$: |
              .picture {
               display: flex;
               border-radius: 50%;
               {% if states(config.entity) == 'home' %}
                 animation: pinggreen 6s infinite;
               {% else %}
                 animation: pingred 6s infinite;
               {% endif %}
              }
              @keyframes pinggreen {
               0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
               100% {box-shadow: 0 0 5px 15px transparent;}
              }
              @keyframes pingred {
               0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
               100% {box-shadow: 0 0 5px 15px transparent;}
              }
            .: |
              ha-card { 
              border: 0 !important;
              }            
      - type: conditional
        card_mod:
          style: |
            ha-card { 
            border: 1 !important;
            }
        conditions:
          - entity: sensor.sm_s918u_battery_state
            state: charging
        card:
          type: custom:mushroom-template-card
          entity: sensor.sm_s918u_battery_level
          layout: vertical
          icon_color: yellow
          fill_container: true
          name: S23
          icon: mdi:battery-charging-medium
          hide_name: true
          primary: Phone is charging...
          secondary: 'Battery Level: {{ states(''sensor.sm_s918u_battery_level'') }}%'
          card_mod:
            style: |
              mushroom-shape-icon {
                animation: blink 1s linear infinite;
              }          
              @keyframes blink {
                50% {opacity: 0;}
              }
              ha-card { 
              border: 0 !important;
              }
      - type: conditional
        conditions:
          - entity: sensor.sm_s918u_battery_state
            state: full
        card:
          type: custom:mushroom-template-card
          card_mod:
            style: |
              ha-card { 
              border: 0 !important;
              }
          entity: sensor.sm_s918u_battery_level
          layout: vertical
          icon: |2
              {% set bl = states('sensor.sm_s918u_battery_level') | int %}
              {% if bl < 10 %} mdi:battery-outline
              {% elif bl < 20 %} mdi:battery-10
              {% elif bl < 30 %} mdi:battery-20
              {% elif bl < 40 %} mdi:battery-30
              {% elif bl < 50 %} mdi:battery-40
              {% elif bl < 60 %} mdi:battery-50
              {% elif bl < 70 %} mdi:battery-60
              {% elif bl < 80 %} mdi:battery-70
              {% elif bl < 90 %} mdi:battery-80
              {% elif bl < 100 %} mdi:battery-90
              {% elif bl == 100 %} mdi:battery
              {% else %} mdi:battery-unknown
              {% endif %}
          icon_color: |2-
              {% set bl = states('sensor.sm_s918u_battery_level') | int %}
              {% if bl < 10 %} #cc0c16          
              {% elif bl < 20 %} #e61e28
              {% elif bl < 30 %} #e3464e
              {% elif bl < 40 %} orange
              {% elif bl < 50 %} #f0b93a
              {% elif bl < 60 %} #f3f56c
              {% elif bl < 70 %} #f2f536
              {% elif bl < 80 %} #69f095
              {% elif bl < 90 %} #2ee669
              {% elif bl < 100 %} #05ad3b
              {% elif bl == 100 %} #03872d
              {% else %} grey
              {% endif %}
          primary: 'Battery Level: {{ states(''sensor.sm_s918u_battery_level'') }}%'
          tap_action:
            action: more-info
          fill_container: true
      - type: conditional
        card_mod: null
        style: |
          ha-card { 
          border: 0 !important;
          }
        conditions:
          - entity: sensor.sm_s918u_battery_state
            state: discharging
        card:
          type: custom:mushroom-template-card
          card_mod:
            style: |
              ha-card { 
              border: 0 !important;
              }
          entity: sensor.sm_s918u_battery_level
          layout: vertical
          icon: |2
              {% set bl = states('sensor.sm_s918u_battery_level') | int %}
              {% if bl < 10 %} mdi:battery-outline
              {% elif bl < 20 %} mdi:battery-10
              {% elif bl < 30 %} mdi:battery-20
              {% elif bl < 40 %} mdi:battery-30
              {% elif bl < 50 %} mdi:battery-40
              {% elif bl < 60 %} mdi:battery-50
              {% elif bl < 70 %} mdi:battery-60
              {% elif bl < 80 %} mdi:battery-70
              {% elif bl < 90 %} mdi:battery-80
              {% elif bl < 100 %} mdi:battery-90
              {% elif bl == 100 %} mdi:battery
              {% else %} mdi:battery-unknown
              {% endif %}
          icon_color: |2-
              {% set bl = states('sensor.sm_s918u_battery_level') | int %}
              {% if bl < 10 %} #cc0c16
              {% elif bl < 20 %} #e61e28
              {% elif bl < 30 %} #e3464e
              {% elif bl < 40 %} orange
              {% elif bl < 50 %} #f0b93a
              {% elif bl < 60 %} #f3f56c
              {% elif bl < 70 %} #f2f536
              {% elif bl < 80 %} #69f095
              {% elif bl < 90 %} #2ee669 
              {% elif bl < 100 %} #05ad3b
              {% elif bl == 100 %} #03872d
              {% else %} grey
              {% endif %}
          primary: 'Battery Level: {{ states(''sensor.sm_s918u_battery_level'') }}%'
          tap_action:
            action: more-info
          fill_container: true
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.sm_s918u_geocoded_location
        icon: mdi:google-maps
        use_entity_picture: false
        card_mod: null
        style: |
          ha-card {
          border: none; !important;
          }
        alignment: center

[DarthLowen (Nic Christiaens)]

@ValMarDav

--card-primary-line-height: 45px !important;

Sure enough, that fixed it, awesome!
@LiQuid_cOOled, I also made sure I was on 3.4.1.

Thanks!

[mr_aleks]

Thanks a lot for the suggestion, it works. I’m confused by the unallocated space on the right, is it possible to put text there?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: update.home_assistant_core_update
    icon: mdi:package
    icon_color: |
      {% if is_state('update.home_assistant_core_update', 'on') %}
        orange
      {% else %}
        green
      {% endif %}
    primary: HA Core
    secondary: |
      {% if is_state('update.home_assistant_core_update', 'on') %}
        Есть обновления
      {% else %}
        Нет обновлений
      {% endif %}
    tap_action:
      action: more-info
    card_mod:
      style: |
        ha-card {
          padding-bottom: 0px !important;
          border: none !important;
        }
  - type: custom:mushroom-update-card
    entity: update.home_assistant_core_update
    show_buttons_control: true
    card_mod:
      style: |
        mushroom-state-item {
          display: none;
        }
        ha-card {
          border: none !important;
        } 

Something like this

[cetgin]

Hello please help me i want to do this

but its

[LiQuid_cOOled]

You can easily put anything in that empty space with a grid card or multiple stack in cards using the horizontal mode. This code uses the stack in card method and will produce

type: custom:stack-in-card
cards:
 - type: custom:stack-in-card
   mode: horizontal
   cards:
    - type: custom:mushroom-template-card
      entity: update.home_assistant_core_update
      icon: mdi:package
      icon_color: |
        {% if is_state('update.home_assistant_core_update', 'on') %}
        orange
        {% else %}
        green
        {% endif %}
      primary: HA Core
      secondary: |
        {% if is_state('update.home_assistant_core_update', 'on') %}
        Есть обновления
        {% else %}
        Нет обновлений
        {% endif %}
      tap_action:
        action: more-info
      card_mod:
        style: |
          ha-card {
          padding-bottom: 0px !important;
          border: none !important;
           }
    - type: custom:mushroom-template-card
      entity: update.home_assistant_core_update
      icon: mdi:package
      icon_color: |
        {% if is_state('update.home_assistant_core_update', 'on') %}
        orange
        {% else %}
        green
        {% endif %}
      primary: HA Core
      secondary: |
        {% if is_state('update.home_assistant_core_update', 'on') %}
        Есть обновления
        {% else %}
        Нет обновлений
        {% endif %}
      tap_action:
        action: more-info
      card_mod:
        style: |
          ha-card {
          padding-bottom: 0px !important;
          border: none !important;
           }
 - type: custom:mushroom-update-card
   entity: update.home_assistant_core_update
   show_buttons_control: true
   card_mod:
      style: |
        mushroom-state-item {
          display: none;
        }
        ha-card {
          border: none !important;
        } 
           

[dimitri.landerloos]

Nothing to do with mushroom.

Look into the layout card and post your question there once you have tried to solve it yourself using the utility.

[mr_aleks]

Thank you very much, this is how I managed to do it.

[ValMarDav]

Hi,

For your information, there is a discussion that describes the use of card_mod with Mushroom cards.

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

[mase]

sorry for beeing offtopic, but what card is that on the left side?

[cetgin]

custom-button cards arranged from top to bottom within a vertical-stack card

[AnthonyB]

Hi.
How did you do the little TV icon on the top ight corner of the Salon card?
Looks great

Merci!

[SoulAssassin (Anton Stolov)]

I’m trying to bring mushrooms into my old toilet card and immediately run into a rake.

Is it possible to somehow remove borders, everywhere, as in the screenshot?

      - type: vertical-stack
        cards:

        - type: markdown
          content: >
              **WC**
        - type: custom:stack-in-card
          margin: true
          mode: horizontal
          cards: 
            - type: light
              entity: light.yeelight_toilet_ceiling
              name: Celing
              icon: phu:ceiling-round
            - type: light
              entity: light.toilet_ceiling_slowtemp
              name: Dynamic
              icon: mdi:theme-light-dark
            - type: light
              entity: light.yeelight_toilet_ceiling_nightlight
              icon: mdi:weather-night
              name: Nightlight

        - type: conditional
          conditions:
            - entity: timer.toilet
              state: "active"
          card: 
            type: entities
            entities:
              - type: custom:timer-bar-card
                entity: timer.toilet
                mushroom:
                  primary_info: none
        - type: conditional
          conditions:
            - entity: input_boolean.toilet_occupancy
              state: "on"
          card: 
            type: entities
            entities:
              - entity: sensor.toilet_occupied
                icon: phu:rooms-toilet
                name: WC is busy

[dimitri.landerloos]

1. Use a theme that doesnt have borders (for example minimalist)
2. remove borders from each card with card mod.

  type: vertical-stack
  cards:
    - type: markdown
      content: |
        **WC**
      card_mod:
        style: |
          ha-card {
            border: none !important;
          }
    - type: custom:stack-in-card
      margin: true
      mode: horizontal
      cards:
        - type: light
          entity: light.yeelight_toilet_ceiling
          name: Celing
          icon: phu:ceiling-round
          card_mod:
            style: |
              ha-card {
                border: none !important;
              }
        - type: light
          entity: light.toilet_ceiling_slowtemp
          name: Dynamic
          icon: mdi:theme-light-dark
          card_mod:
            style: |
              ha-card {
                border: none !important;
              }
        - type: light
          entity: light.yeelight_toilet_ceiling_nightlight
          icon: mdi:weather-night
          name: Nightlight
          card_mod:
            style: |
              ha-card {
                border: none !important;
              }
      card_mod:
        style: |
          ha-card {
            border: none !important;
          }
    - type: conditional
      conditions:
        - entity: timer.toilet
          state: active
      card:
        type: entities
        entities:
          - type: custom:timer-bar-card
            entity: timer.toilet
            mushroom:
              primary_info: none
        card_mod:
          style: |
            ha-card {
              border: none !important;
            }
    - type: conditional
      conditions:
        - entity: input_boolean.toilet_occupancy
          state: 'on'
      card:
        type: entities
        entities:
          - entity: sensor.toilet_occupied
            icon: phu:rooms-toilet
            name: WC is busy
        card_mod:
          style: |
            ha-card {
              border: none !important;
            }

[petrij98]

I hope this one’s an easy fix, because that I’ve got really good ideas for it; is there a way for me to implement a Mushroom spinner without affecting the icon in the card (i.e. implementing a combination of the washer animation and the comet spinner)? Every time I’ve tried to implement a spinner alongside my current card configuration, it takes the icon along for the ride too.

[msaphoto06]

Hello

I can’t change the line spacing since the update.

I added the lines in my theme, it doesn’t change anything
–card-primary-line-height: 1.5
–card-secondary-line-height: 1.5

THX

[jata]

Hi all - is anyone else having issues with icons not rendering properly on some mushroom cards using the iPhone HA app. Everything is fine on PC/browser. This started happening with the latest HA version (2024.2.0)

on iphone - some icons missing in chip card and not displaying properly on entity cards

for comparison - here is what it looks like on a PC/browser

[LiQuid_cOOled]

You at least need px; or em; after each 1.5

[SoulAssassin (Anton Stolov)]

Guys, is it possible to move the second chip to the left closer to the first?

Like this:

        - type: horizontal-stack
          cards:
          - type: custom:vertical-stack-in-card
            cards:
            - type: custom:mushroom-cover-card
              name: Балкон - слева
              entity: cover.balcony_left
              show_buttons_control: true
              show_position_control: true
            - type: horizontal-stack
              cards:
                - type: custom:mushroom-chips-card
                  chips:
                    - type: entity
                      entity: counter.balcony_left_cover
                      icon: mdi:arrow-down
                      card_mod:
                        style: |
                          ha-card {
                            border: none
                          }
                      alignment: center
                - type: custom:mushroom-chips-card
                  chips:
                    - type: entity
                      entity: counter.balcony_left_cover
                      icon: mdi:arrow-down
                      card_mod:
                        style: |
                          ha-card {
                            border: none
                          }
                      alignment: center
                - type: custom:mushroom-chips-card
                  chips:
                    - type: entity
                      entity: input_text.balcony_left_rolls_last_recorded_event_time
                      card_mod:
                        style: |
                          ha-card {
                            border: none
                          }
                      alignment: center

[simo241]

Hi, i copy the code in my home assistant and i have car-mod well installed but the animation is not working , do you have any idea why

[balazsmark (Mark)]

Hey, mine looks like yours.