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

[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?

[dimitri.landerloos]

So you would have an automation that checks if either the input_number was changed or the climate fan mode was changed.

If input_number is changed then set climate fan mode to number of input_number.

If climate fan mode was changed set input number to number of climate fan mode.

You could make this 2 seperate automations or edit the trigger id for each change and then only execute the appropriate bit depending on what was triggered.

Hard to show you an example because i dont have an entity with the same mode as yours.

Something like this might get you closer:

description: ""
mode: single
trigger:
  - platform: state
    entity_id:
      - input_number.fan_mode_helper
    id: HELPER
  - platform: state
    entity_id:
      - climate.bedroom_heating
    id: MANUAL
condition: []
action:
  - if:
      - condition: trigger
        id:
          - HELPER
    then:
      - service: climate.set_fan_mode
        target:
          entity_id: climate.bedroom_heating
        data:
          fan_mode: "{{states('input_number.fan_mode_helper') | int }}"
  - if:
      - condition: trigger
        id:
          - MANUAL
    then:
      - service: input_number.set_value
        target:
          entity_id: input_number.fan_mode_helper
        data:
          value: "{{state_attr('climate.bedroom_heating', 'fan_mode') | int}}"

You will likely need to change the trigger for the state of the climate entity to something more specific so it doesnt trigger all the time when anything changes on the climate entity. But since mine doesnt have a fan mode i cant really help there.

[dimitri.landerloos]

Dont think it is possible because its the background of a different element. but you could cheat and layer them together in a stack-in-card like this maybe:

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.68.221/liveview
    aspect_ratio: 10%
    title: null
    card_mod:
      style: |
        ha-card {
          position: absolute;
          z-index: 1;
          border-radius: 11.5px !important;
          width: calc(100% - 26px) !important;
          left: 13px;
          bottom: 11.2px;
        }
        #root {
          height: 5px;
        }
  - type: custom:mushroom-light-card
    entity: light.office_desk_light
    primary_info: none
    secondary_info: none
    icon_type: none
    show_brightness_control: true
    fill_container: true
    card_mod:
      style: |
        mushroom-light-brightness-control {
          z-index: 2;
          --slider-bg-color: transparent !important;
        }
card_mod:
  style: |
    ha-card {
      isolation: isolate;
    }

This looks really cool - but unfortunately it seems this doesnt work when accessing HA via HTTPS… unfortunate as i would definitely use this then!

@Still_ill sorry for the tag, but you might like this for your control card if you can implement it

Mushroom Cards - Build a beautiful dashboard easily

WLED control card In this community post, I introduce a comprehensive Home Assistant configuration that enhances my lighting control and makes my WLED lighting more efficient. I will explain the code and the functions of each card step by step. [image] I also use the WLED Strip in this example as an Ambielight for my TV via Hyperion.ng. When I operate it in normal mode, I would like to have 2 different colours displayed, as it is aesthetically more appealing. Therefore it is divided i…

[LiQuid_cOOled]

Not sure if this helps but I combined attributes to create a sensor that was based off the direction and speed. That helped pair down the if then results.

sensor:
  - platform: template
    sensors:
     fan_direction:
       friendly_name: "Fan Direction"
       unique_id: fan1
       value_template: "{{ state_attr('fan.bedroom_fan', 'direction') }}"
     fan_direction_speed:
       friendly_name: "Fan Direction Speed"
       unique_id: fan2
       value_template: |
         {% set direction = state_attr('fan.bedroom_fan', 'direction')  %}
         {% set speed = state_attr('fan.bedroom_fan', 'percentage')  %}
         {{[direction,speed]|join("")}}

[Snellingen (Matias Snellingen)]

mushroom-slider support min max properties so this should be possible to add. Don’t have any workaround we can do right now and have to wait for the feature to be added. I need this feature as well so might create a PR to add this when I get the time.

Edit: actually, there’s already a pending PR that add this exact feature:

Set min light brightness to 1