Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

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

hello

You have right :man_facepalming::man_facepalming::man_facepalming:, but didnā€™t work

Thanks


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.

Hello

Amazing card :clap:

Could you share the code?

Thanks

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);
                  }
2 Likes

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:

1 Like

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

sorryā€¦new to this and still learning

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

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

1 Like

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?

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.

GIF

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 =)

1 Like

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

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

Hello

Thanks of a lot ā€¦i will see the post :clap:

Thanks

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

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

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.

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:

1000707260

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.

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?