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

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

Thanks!

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
Безымянный

Hello please help me i want to do this
1

but its

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;
        } 
           

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.

1 Like

Thank you very much, this is how I managed to do it.
Снимок экрана 2024-02-07 163150

1 Like

Hi,

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

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

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

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

Merci!

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?

image

      - 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
  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;
            }
1 Like

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.

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

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

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

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

image

Like this:
image

        - 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

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

Hey, mine looks like yours.

sorry…here is my code:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 65px auto 15px
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.air_filter_days_remaining
        icon: mdi:air-filter
        icon_color: |
          {% set filter_days = states(entity) | int %}
           {% if filter_days < 11 %} 
             red
           {% elif filter_days < 41 %}
             orange
           {% else %}
             green
           {% endif %} 
      - type: custom:bar-card
        entity: sensor.air_filter_days_remaining
        height: 42px
        min: '0'
        max: '120'
        entity_row: true
        severity:
          - color: green
            from: 40
            to: 90
          - color: orange
            from: 10
            to: 39
          - color: red
            from: 0
            to: 9
        positions:
          icon: 'off'
          indicator: 'off'
        card_mod:
          style: |
            ha-card {
              padding: 12px;
              margin-left: 12px;
              --bar-card-border-radius: 12px;
            }
            bar-card-value {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-name {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-backgroundbar {
              opacity: 0.2;
              filter: brightness(1);
            }
      - type: custom:mushroom-template-card
        entity: input_boolean.furnace_filter_dropdown
        icon: mdi:chevron-down
        icon_color: disabled
        hold_action:
          action: none
        card_mod:
          style:
            mushroom-shape-icon:
              $: |
                .shape ha-icon {
                  transition: transform 0.14s !important;
                  {{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
                }
              .: |
                ha-card {
                  align-items: flex-end;
                  box-shadow: none;
                }
                mushroom-shape-icon {
                  --shape-color: none !important;
                }
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-entity-card
        entity: input_datetime.air_filter_last_replaced
        icon: mdi:calendar
        name: Last Replaced
        layout: vertical
        primary_info: state
        secondary_info: name
        card_mod:
          style: |
            ha-card { 
              width: 130px;
              margin-left: auto;
              margin-right: auto;
            } 
      - type: custom:mushroom-entity-card
        entity: sensor.air_filter_days_remaining
        name: Since Replaced
        layout: vertical
        primary_info: state
        secondary_info: name
        card_mod:
          style: |
            ha-card { 
              width: 130px;
              margin-left: auto;
              margin-right: auto;
            } 
      - type: custom:mushroom-entity-card
        entity: input_number.air_filter_threshold
        icon: mdi:calendar-edit
        name: Replacement Interval
        layout: vertical
        primary_info: state
        secondary_info: name
        card_mod:
          style: |
            ha-card { 
              width: 130px;
              margin-left: auto;
              margin-right: auto;
            } 
      - type: custom:mushroom-template-card
        primary: Reset
        secondary: ''
        icon: mdi:refresh
        layout: vertical
        tap_action:
          action: call-service
          service: script.reset_air_filter_date_to_today
          data: {}
          target: {}
        hold_action:
          action: none
        double_tap_action:
          action: none
    card_mod:
      style: |
        ha-card { 
          margin-top: -14px;
        }
card_mod:
  style: |
    ha-card {
      {{ 'height: 66px;' if is_state('input_boolean.furnace_filter_dropdown', 'off') }}
    }

Screenshot 2024-02-09 at 1.31.48 PM