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

[Markus1995]

Good morning,

I hope my topic is right here.

I created the mushroom tiles like in the screenshot.

When I open the dashboard for the first time, you can see the frame around the horizontal stack. If I change the dashboard briefly and then open it again, you can no longer see the frame. (That’s how it should be.)

Can someone give me a tip where I still have an error?

Have a nice day everyone.

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-template-card
            primary: Küche
            icon: mdi:countertop
            tap_action:
              action: navigate
              navigation_path: mobile_küche
            hold_action:
              action: toggle
            icon_color: ''
            fill_container: true
            layout: horizontal
            multiline_secondary: false
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: binary_sensor.fenstersensor_kuche_unten_iaszone
                state: 'on'
            chip:
              type: template
              icon: mdi:window-open-variant
              content: DF Unten
        alignment: end
        style: |
          ha-card {
            --chip-border-width: 2px;
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: none;
            --chip-height: 40px;
            margin-top: 15px;
            margin-right: 5px;
          }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        alignment: end
        style: |
          ha-card {
            --chip-border-width: 0px;
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: none;
            --chip-height: 40px;
            margin-top: 0px;
            margin-right: 0px;
          }
        chips:
          - type: template
            content: Licht
            icon: mdi:lightbulb
            entity: light.lichtschalter_kuche
            icon_color: |-
              {% if is_state('light.lichtschalter_kuche', 'on') %}
                yellow
              {% else %}
                disabled
              {% endif %}
            tap_action:
              action: toggle
            hold_action:
              action: navigate
              navigation_path: mobile_küche

[quinquelhas (Marco)]

hello

You have right , but didn’t work

Thanks

[LiQuid_cOOled]

Add something like this to the bottom of your card. You should also be able to remove some of your other card styles assigned at the card level.

[quinquelhas (Marco)]

Hello

Amazing card

Could you share the code?

Thanks

[LiQuid_cOOled]

Its a work in progress, but this is a portion. Repeat the mushroom template-card to add the second entity to the row.

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Outdoor Lights
    style: |
      ha-card
      { --title-padding: 12px 12px 4px;
        --title-font-size: 16px;
        --primary-text-color: ;
        --title-font-weight: 100;
        }
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr
      margin: '-10px -4px -15px 0px'
    cards:
      - type: custom:mushroom-template-card
        primary: Patio Lightstrip
        secondary: |
          {% if is_state('light.patio_lightstrip', 'on') %} On
          {% else %}
            Off
          {% endif %}
        icon: hue:lightstrip
        icon_color: |
          {%- if is_state(entity, 'on') %} 
          {{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') }}
          {%- else %} 
          {% endif %}
        entity: light.patio_lightstrip
        tap_action:
          action: toggle
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
              --shape-color: none;
                } 
            .: |
              ha-card {
              background: none;
              box-shadow: none;
              --ha-card-border-width: 0;
              --icon-symbol-size: 36px;             
                }                
      - type: custom:mushroom-template-card
        primary: Pond Lights
        secondary: |
          {%- if is_state(entity, 'on') %}  On
          {% else %}
            Off
          {% endif %}
        icon: hue:floor-spot-group
        icon_color: |
          {% if is_state('light.pond', 'on') %} yellow
          {% else %}
          {% endif %}
        entity: light.pond
        tap_action:
          action: toggle
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
              --shape-color: none;
                } 
            .: |
              ha-card {
              background: none;
              box-shadow: none;
              --ha-card-border-width: 0;
              --icon-symbol-size: 38px;             
                }
                
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr
      margin: 0px -4px -14px 0px
    cards:
      - type: custom:mushroom-template-card
        primary: Circle Lights
        secondary: |
          {%- if is_state(entity, 'on') %}  On
          {% else %}
            Off
           {% endif %}
        icon: hue:floor-lantern
        icon_color: |
          {%- if is_state(entity, 'on') %} 
          black
          {%- else %} 
          {% endif %}        
        entity: light.circle_lamppost
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
               --shape-color: none;
               filter: drop-shadow(rgb{{ state_attr(config.entity, "rgb_color")}} 0px 10px 10px);' if states(config.entity) =="on"}}
            .: |
              {% if is_state(config.entity, 'on') %}
               ha-state-icon:before {
               content: "";
               width: 0px;
               height:10px;
               background: {{"#%02x%02x%02x" % state_attr(config.entity, "rgb_color") }};
               border-width: 0px;
               border-left: 5px solid transparent;
               border-right: 5px solid transparent;
               margin-top: 5px;
               margin-left: 14px;
               position: absolute;
                   }
               {% else %}
               {% endif %}
               ha-card {
               background: none;
               box-shadow: none;
              --ha-card-border-width: 0;
              --icon-symbol-size: 40px;             
                }
      - type: custom:mushroom-template-card
        entity: light.deatched_lamp_post
        icon_color: |
          {%- if is_state(entity, 'on') %} 
          black
          {%- else %} 
          {% endif %}
        primary: Detached Lamp Post
        secondary: |
          {%- if is_state(entity, 'on') %}  On
          {% else %}
            Off
           {% endif %}
        icon: hue:floor-lantern
        action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
              --shape-color: none;
               filter: drop-shadow(rgb{{ state_attr(config.entity, "rgb_color")}} 0px 10px 10px);' if states(config.entity) =="on"}}
            .: |
              {% if is_state(config.entity, 'on') %}
               ha-state-icon:before {
               content: "";
               width: 0px;
               height:10px;
               background: {{"#%02x%02x%02x" % state_attr(config.entity, "rgb_color") }};
               border-width: 0px;
               border-left: 5px solid transparent;
               border-right: 5px solid transparent;
               margin-top: 5px;
               margin-left: 14px;
               position: absolute;
                   }
               {% else %}
               {% endif %}
               ha-card {
               background: none;
               box-shadow: none;
              --ha-card-border-width: 0;
              --icon-symbol-size: 40px;             
                }
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr
      margin: 0px -4px -14px 0px
    cards:
      - type: custom:mushroom-template-card
        entity: light.garage_color_spot
        icon: hue:wall-flood
        tap_action:
          action: more-info
        icon_color: |
          {%- if is_state(entity, 'on') %} 
          black
          {%- else %} 
          {% endif %}
        primary: Garage Color Spot
        secondary: |
          {%- if is_state(entity, 'on') %}  On
          {% else %}
            Off
           {% endif %}
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
              --shape-color: none;
               filter: drop-shadow(rgb{{ state_attr(config.entity, "rgb_color")}} 0px 7px 8px);' if states(config.entity) =="on"}}
            .: |
              {% if is_state('light.garage_color_spot', 'on') %}
               ha-state-icon:before {
                content: "";
                width: 27px;
                height:20px;
                transform: rotate(13deg) skew(-10deg);
                background: {{"#%02x%02x%02x" % state_attr(config.entity, "rgb_color") }};
                border-radius: 0px;
                border-width: 0px;
                margin-top: 13.5px;
                margin-left: 10.5px;
                position: absolute;
                }
                 {% else %}
                 {% endif %}                  
              ha-card {
               background: none;
                --ha-card-border-width: 0px;
                --icon-symbol-size: 45px;        
                   }
      - type: custom:mushroom-template-card
        icon_color: |
          {%- if is_state(entity, 'on') %} 
          black
          {%- else %} 
          {% endif %}
        primary: Garage Lantern
        secondary: |
          {%- if is_state(entity, 'on') %}  On
          {% else %}
            Off
           {% endif %}
        icon: phu:wall-econic-lantern-top
        entity: light.garage_latern
        tap_action:
          action: toggle
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
              --shape-color: none;
               filter: drop-shadow(rgb{{ state_attr(config.entity, "rgb_color")}} 0px 6px 10px);' if states(config.entity) =="on"}}
            .: |
              {% if is_state(config.entity, 'on') %}
               ha-state-icon:before {
               content: "";
               width: 15px;
               height:18px;
               background: {{"#%02x%02x%02x" % state_attr(config.entity, "rgb_color") }};
               border-width: 0px;
               border-left: -5px solid transparent;
               border-right: 2px solid transparent;
               margin-top: 15px;
               margin-left: 13px;
               position: absolute;
                   }
               {% else %}
               {% endif %}
               ha-card {
               background: none;
               box-shadow: none;
              --ha-card-border-width: 0;
              --icon-symbol-size: 40px;             
                }                
card_mod:
  style: |
    ha-card {
        box-shadow: none;
      --ha-card-border-width: 0px;
        padding-bottom: 14px;
        background-color: rgba(var(--mush-rgb-grey), .1);
                  }

[dimitri.landerloos]

@quinquelhas

      - type: custom:mushroom-template-card
        primary: JanelaBanca
        secondary: '{{ states("binary_sensor.contact_sensor")}}'
        icon: mdi:window-closed-variant
        entity: binary_sensor.contact_sensor_2
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-color: red!important;
                --shape-color: #FBD7D4!important;
               }
        sytle: |
          ha-card {
            width: 110px;
            border-style: none;
            background-color: #E2E2E2!important;
          }

Fix this bit to:

      - type: custom:mushroom-template-card
        primary: JanelaBanca
        secondary: '{{ states("binary_sensor.contact_sensor")}}'
        icon: mdi:window-closed-variant
        entity: binary_sensor.contact_sensor_2
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --icon-color: red!important;
                --shape-color: #FBD7D4!important;
               }
            .: |
              ha-card {
                width: 110px;
                border-style: none;
                background-color: #E2E2E2!important;
              }

Cant have 2 instances of style: under card mod. Use .: | instead. Take note of the indentation. And for further explanation look at the guide in my profile at the section called:

@dimitri.landerloos

What the $ and .: | symbols do

[dimitri.landerloos]

Please post your code formatted, not a screenshot for people.

[LiQuid_cOOled]

sorry…new to this and still learning

[dimitri.landerloos]

Fairly common problem with lots of stacks.

Just remove it manually with more card mod.

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-template-card
            primary: Küche
            icon: mdi:countertop
            tap_action:
              action: navigate
              navigation_path: mobile_küche
            hold_action:
              action: toggle
            icon_color: ''
            fill_container: true
            layout: horizontal
            multiline_secondary: false
        card_mod:
          style: |
            ha-card {
              border: none !important;
            }          
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: binary_sensor.fenstersensor_kuche_unten_iaszone
                state: 'on'
            chip:
              type: template
              icon: mdi:window-open-variant
              content: DF Unten
        alignment: end
        style: |
          ha-card {
            --chip-border-width: 2px;
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: none;
            --chip-height: 40px;
            margin-top: 15px;
            margin-right: 5px;
          }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        alignment: end
        style: |
          ha-card {
            --chip-border-width: 0px;
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: none;
            --chip-height: 40px;
            margin-top: 0px;
            margin-right: 0px;
          }
        chips:
          - type: template
            content: Licht
            icon: mdi:lightbulb
            entity: light.lichtschalter_kuche
            icon_color: |-
              {% if is_state('light.lichtschalter_kuche', 'on') %}
                yellow
              {% else %}
                disabled
              {% endif %}
            tap_action:
              action: toggle
            hold_action:
              action: navigate
              navigation_path: mobile_küche

This section is what does it:

      - type: custom:vertical-stack-in-card
        cards:
          - type: custom:mushroom-template-card
            primary: Küche
            icon: mdi:countertop
            tap_action:
              action: navigate
              navigation_path: mobile_küche
            hold_action:
              action: toggle
            icon_color: ''
            fill_container: true
            layout: horizontal
            multiline_secondary: false
        card_mod:
          style: |
            ha-card {
              border: none !important;
            }          

But is there any reason for you to have that vertical stack in card there? There is only the 1 card in it.

Should be able to simplify to this:

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Küche
        icon: mdi:countertop
        tap_action:
          action: navigate
          navigation_path: mobile_küche
        hold_action:
          action: toggle
        icon_color: ''
        fill_container: true
        layout: horizontal
        multiline_secondary: false
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: binary_sensor.fenstersensor_kuche_unten_iaszone
                state: 'on'
            chip:
              type: template
              icon: mdi:window-open-variant
              content: DF Unten
        alignment: end
        style: |
          ha-card {
            --chip-border-width: 2px;
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: none;
            --chip-height: 40px;
            margin-top: 15px;
            margin-right: 5px;
          }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        alignment: end
        style: |
          ha-card {
            --chip-border-width: 0px;
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: none;
            --chip-height: 40px;
            margin-top: 0px;
            margin-right: 0px;
          }
        chips:
          - type: template
            content: Licht
            icon: mdi:lightbulb
            entity: light.lichtschalter_kuche
            icon_color: |-
              {% if is_state('light.lichtschalter_kuche', 'on') %}
                yellow
              {% else %}
                disabled
              {% endif %}
            tap_action:
              action: toggle
            hold_action:
              action: navigate
              navigation_path: mobile_küche

[dimitri.landerloos]

Take a look at this post, and for formatting specifically section 11

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

[dimitri.landerloos]

Still not entirely sure what you want sorry? You just want the input number at the bottom (to represent your fan modes from 1 - 5) but what do you want at the top that a template card doesnt provide?

[wu5]

I have found that I can get a visual of the current colour effects from WLED by going to http://192.168.1.x/liveview

It’s not an image, but a sort of html page and can be shown with an iframe card.

Code

cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Room
        secondary: |-
          {{ states('sensor.ble_room_temperature') | round (0, default = 0) }}°C
          • {{ states('sensor.ble_room_humidity') | round (0, default = 0) }}%
        icon: mdi:sofa
        entity: light.wled
        icon_color: null
        tap_action:
          action: toggle
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none;
              background: transparent;
              border-style: none;   
              background :rgba(var(--rgb-primary-text-color), 0.03);      
            }
            :host {
              --mush-icon-size: 60px;
            }
      - type: iframe
        url: http://192.168.1.96/liveview
        aspect_ratio: 10%
        title: null
      - type: custom:mushroom-light-card
        entity: light.wled
        primary_info: none
        secondary_info: none
        icon_type: none
        show_brightness_control: true
        fill_container: true

How can I make it appear in the background of the slider or in the mushroom-template-card? Perhaps it will look interesting =)

[brewston (Tim Jones)]

brilliant! that works. I hide the media players behind a conditional when they are not playing, so don’t see the primary/secondary at that point, thanks for explaining though

[Mattia2399]

Exactly, I would only need the bottom part of input_number.
The template card is fine like this.

[quinquelhas (Marco)]

Hello

Thanks of a lot …i will see the post

Thanks

[1umnyy (Viktor)]

@dimitri.landerloos
Can you please help me with this code? he doesn’t immediately remove the borders, only when I refresh the page

type: custom:mod-card
style:
  stack-in-card$:
    hui-horizontal-stack-card$: |
      mushroom-template-card:nth-of-type(1) {
        width: 40%;
        flex: unset !important; 
      }
card:
  type: custom:stack-in-card
  mode: horizontal
  cards:
    - type: custom:mushroom-template-card
      entity: light.girlianda2
      primary: Гирлянда
      card_mod:
        style: |
          ha-card:active {
          box-shadow: 0 0 20px rgba(var(--rgb-disabled), 0.8);
          transition: 0s;
          }
      tap_action:
        action: toggle
      icon: mdi:lightbulb-multiple
      layout: horizontal
      icon_color: |
        {{ iif(is_state(entity, "on"), "green", "grey") }}
    - type: custom:mushroom-template-card
      primary: Стол
      secondary: ''
      icon: mdi:desk
      icon_color: |
        {{ iif(is_state(entity, "on"), "green", "grey") }}
      layout: horizontal
      entity: light.kojima_sr_wi_fi_eu_switch_1
      tap_action:
        action: toggle
      fill_container: true
      card_mod:
        style: |
          ha-card:active {
          box-shadow: 0 0 20px rgba(var(--rgb-disabled), 0.8);
          transition: 0s;
          }
    - type: custom:mushroom-template-card
      entity: light.yandexrozetka_socket_1
      primary: Окно
      secondary: ''
      icon: mdi:window-closed-variant
      icon_color: |
        {{ iif(is_state(entity, "on"), "green", "grey") }}
      layout: horizontal
      fill_container: true
      tap_action:
        action: toggle
      card_mod:
        style: |
          ha-card:active {
          box-shadow: 0 0 20px rgba(var(--rgb-disabled), 0.8);
          transition: 0s;
          }

[dimitri.landerloos]

So i dont see how my original response doesnt cover this usecase.

@dimitri.landerloos

1. Combine 2 cards + some card mod:
   

Code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:test-tube
    primary: TEST
    secondary: '{{state_attr(''climate.office_heating'', ''current_temperature'')}}'
    card_mod:
      style: |
        ha-card {
          border: none !important;
          box-shadow: none !important;
          padding-bottom: 0px !important;
        }
  - type: custom:mushroom-number-card
    entity: input_number.dishwasher_pod_add
    display_mode: buttons
    card_mod:
      style: |
        mushroom-state-item {
          display: none;
        }
        ha-card {
          border: none !important;
          box-shadow: none !important;
        }

Now the top bit is fully templatable, like a normal mushroom template card (because it is).

If you need something else you will need to show me with editing a picture or something, cause i am failing to understand what it is that you want.

[Mattia2399]

Sorry Dimitri, we actually don’t understand each other.

I’m trying to recreate this card:

So, with your help I created the card on the left because the climate.stufa entity automatically supports the input_number.

Now on the right, I would like to recreate the same card but to set the fan modes.

However I don’t have an input_number entity for the fan, but it is part of the attributes of the climate.stufa entity.

It should be more or less like this:

[dimitri.landerloos]

Oh i see, so you basically need fake buttons that arent assigned to an entity but for example called a script that changes the climate fan mode between 1-5.

Am i correct?

You could also create an input_number helper for the climate fan mode and then have an automation that checks if the input_number was changed and set the fan mode appropriately.

Then you could just use the card i provided already.

[Mattia2399]

Okay, I thought about this solution.

But could you tell me how to update the input_number value even when it is changed directly from the stove control panel?