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

Post the full config please including any stacks you have the card in.

Here:

type: vertical-stack
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.stploop_tv
    volume_controls:
      - volume_set
      - volume_mute
      - volume_buttons
    show_volume_level: true
    layout: horizontal
    name: ' '
    secondary_info: none
    media_controls:
      - repeat
      - next
      - play_pause_stop
      - previous
      - shuffle
      - on_off
    collapsible_controls: false
    card_mod:
      style:
        mushroom-media-player-volume-control$: |
          mushroom-slider {
            position: absolute;
            left: 68px;
            width: 152px !important;
          }

Works for me…
Hmm not sure, maybe this works a bit easier for you?

type: vertical-stack
cards:
  - type: custom:mushroom-media-player-card
    entity: media_player.dimitris_pc
    volume_controls:
      - volume_set
      - volume_mute
      - volume_buttons
    show_volume_level: true
    layout: horizontal
    name: ' '
    secondary_info: none
    media_controls:
      - repeat
      - next
      - play_pause_stop
      - previous
      - shuffle
      - on_off
    collapsible_controls: false
    card_mod:
      style: |
        mushroom-state-item {
          flex: 0.15;
        }

@Faecon Not sure this will achieve the results you were looking for, but with Mushroom I occasionally use .shape:before and .shape:after with ha-state-icon psuedo elements to obtain a second :before and :after for the targeted element. It would require your own if statements as @dimitri.landerloos pointed out and specific shape styling.

image

        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
               --shape-color: none;
               --icon-symbol-size: 75px !important;
               --icon-size: 75px !important;

               }
              .shape:after {
               content: "";
               height: 10px;
               width: 10px;
               position: absolute;
               margin-top: 11px;
               margin-left:4px;
               background:green; 
                }
              .shape:before {
               content: "";
               height: 10px;
               width: 10px;
               position: absolute;
               margin-top: 11px;
               margin-left:-40px;
               background:yellow;
                                 }
                                 
            .: |

              ha-state-icon:after {
              content: "";
              height:10px;
              width: 10px;
              position: absolute;
              margin-top: 11px;
              margin-left:34px;
              background:red;
                   }       
                   
              ha-state-icon:before {
              content: "";
              height:10px;
              width: 10px;
              position: absolute;
              margin-top: 11px;
              margin-left: 12px;
              background:blue;
                   }  
                     
card_mod:
  style: |
    ha-card {
        box-shadow: none;
       --ha-card-border-width: 0px;
        padding-bottom:28px;
        background-color: none;
                  }
3 Likes

And you can just keep going and going @Faecon.
Its just about positioning the elements right.
SmartSelect_20231228_100046_Home Assistant

type: custom:mushroom-template-card
icon: mdi:test-tube
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: none;
        --icon-symbol-size: 75px !important;
        --icon-size: 75px !important;
      }
      .shape:after {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        bottom: 27px;
        right: 32px;
        background: yellow; 
      }
      .shape:before {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        bottom: 27px;
        left: 12px;
        background: green; 
      }                    
    .: |
      ha-state-icon {
        color: transparent !important;
      }
      ha-state-icon:after {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 11px;
        left: 34px;
        background: red;
      }             
      ha-state-icon:before {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 11px;
        left: 12px;
        background: blue;
      }
      mushroom-shape-icon:after {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 7px;
        left: 23px;
        background: purple;
      }                       
      mushroom-shape-icon:before {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 25px;
        left: 38px;
        background: orange;
      }
      mushroom-state-item:after {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        bottom: 35px;
        left: 34px;
        background: lime;
      }
      mushroom-state-item:before {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 37px;
        left: 19px;
        background: aqua;
      }                          
      ha-card {
        box-shadow: none;
        --ha-card-border-width: 0px;
        padding-bottom:28px;
        background: none;
      }
1 Like

2 is more than enough :wink:

2 Likes

You have definitely created an environment where folks should be reluctant to offer their experience/ advice…props to you👍

Say what? I was just building on what you did? Like an improv “yes and” thing…

Sorry if it came across as diminishing your work.

Hello, please how to set if the sensor.load_l1 is greater than 500W to display the entity?
Thank you very much in advance for your help.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Kuchyň
    secondary: '{{ states(''sensor.teplomer_obyvak_temperature'') | round(0) }} °C'
    icon: mdi:silverware-fork-knife
    entity: switch.tasmota_11
    tap_action:
      action: navigate
      navigation_path: master_bedroom
    hold_action:
      action: toggle
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
        }
         ha-card {
           background: none;
           border: 0px;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: sensor.load_l
            state: '> 500'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:toaster-oven
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        } 
card_mod:
  style: |
    ha-card {
      height: 102px;
      {% if is_state('group.master_bedroom_lights', 'on') %}
         background: rgba(255, 152, 0, 0.1);
      {% endif %}
      --ha-card-background: transparent;
      --card-mod-icon-color: orange;
      border-style: none;
    }

Use numeric state instead like this:

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - condition: numeric_state
        entity: sensor.average_kwh
        above: 500
    chip:
      type: template
2 Likes

Hi, i’m trying to customize the lights card.

I have them setup with auto-entity and by double tapping it opens a popup with all members in the group, however the interaction is not perfect.

What I would like to achieve:
When tapping the icon, it toggles the entire group. So on tap_action but only on the icon and not on the entire card. This to prevent false positives when scrolling or when trying to double_tap.

I would then like a double_tap_action on the rest of the card to open the entire group OR a button which is rendered on the far right. If possible I would like to do this with card_mod and not with stacking cards to make it user friendly with the auto entity and over 70 lights.

My current code:

type: custom:auto-entities
card:
  square: false
  type: grid
  columns: 1
card_param: cards
filter:
  include:
    - domain: light
      entity_id: /group/
      options:
        type: custom:mushroom-light-card
        use_light_color: true
        icon_type: icon
        show_brightness_control: true
        show_color_control: false
        collapsible_controls: true
        show_color_temp_control: true
        fill_container: false
        layout: horizontal
        double_tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: ' '
              content:
                type: custom:auto-entities
                card:
                  square: false
                  columns: 1
                  type: grid
                filter:
                  include:
                    - group: this.entity_id
                      options:
                        type: custom:mushroom-light-card
                        use_light_color: true
                        show_brightness_control: true
                        show_color_control: true
                        collapsible_controls: true
                        show_color_temp_control: true
                        fill_container: false
                        layout: horizontal
                        tap_action:
                          action: toggle
                        hold_action:
                          action: more-info
                sort:
                  method: name
                show_empty: true
                card_param: cards
  exclude: []
show_empty: true

I’ve thought of a solution myself, including the auto entity.

I now show 2 light cards covering eachother. For the top one I only show the icon with a tap action and for the lower one the entire card with a double tap action.

If others are interested, hereby the code

type: custom:auto-entities
card:
  square: false
  type: grid
  columns: 2
card_param: cards
filter:
  include:
    - domain: light
      entity_id: /group/
      options:
        type: custom:stack-in-card
        cards:
          - type: custom:mushroom-light-card
            entity: this.entity_id
            show_brightness_control: true
            collapsible_controls: true
            use_light_color: true
            show_color_control: true
            tap_action:
              action: none
            double_tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: ' '
                  content:
                    type: custom:auto-entities
                    card:
                      square: false
                      columns: 1
                      type: grid
                    filter:
                      include:
                        - group: this.entity_id
                          options:
                            type: custom:mushroom-light-card
                            use_light_color: true
                            show_brightness_control: true
                            show_color_control: true
                            collapsible_controls: true
                            show_color_temp_control: true
                            fill_container: false
                            layout: horizontal
                            hold_action:
                              action: more-info
                    sort:
                      method: name
                    show_empty: true
                    card_param: cards
            show_color_temp_control: true
            layout: horizontal
            card_mod:
              style: |
                ha-card {
                  position: absolute
                  top: 0px;
                  right: 0px;
                  width: calc(100%);
                  --ha-card-border-width: 0px;
                }
          - type: custom:mushroom-light-card
            entity: this.entity_id
            primary_info: none
            tap_action:
              action: call-service
              service: light.toggle
              target:
                entity_id: this.entity_id
            secondary_info: none
            card_mod:
              style: |
                ha-card {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  width: 66px;
                  color: none;
                  icon: none;
                  --ha-card-border-width: 0px;
                }
  exclude: []
show_empty: true
sort:
  method: domain

Is it possible to change the elapsed time from an “about” to a precise time? So if the change was 1 hour and 18 Minutes ago, the tile doesn’t say 1 hour? It is really nerving for the cards I use, as they should show me the elapsed time of running programmes.

Good day, everyone. Thank you for your hard work to make this cards available for HA community. I build my dashboard using different card and everything is working great, but I have a problem with spacing between a first card and the rest of the cards. How I can reduce this ?

type: horizontal-stack
cards:
  - type: custom:layout-card
    layout_type: custom:horizontal-layout
    layout: {}
    cards:
      - type: custom:mushroom-person-card
        entity: person.yevgeniy
        primary_info: name
        secondary_info: none
        icon_type: entity-picture
        card_mod:
          style:
            mushroom-state-item$: |
              .container {
                display: flex;
                flex-direction: column !important;
              }
            mushroom-state-info$: |
              .container {
                width: 83%;
                align-items: center;
              }
            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 {
                --icon-size: 72px;
                width: fit-content;
                margin-left: 25%;
                top: 10px;
                background: none;        
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.sm_s918u_battery_state
            icon: >-
              {% set state=states('sensor.sm_s918u_battery_state') %} {% if
              state=='Charging' %}
                mdi:cellphone-charging
              {% else %}
                mdi:cellphone
              {% endif %}  
            icon_color: >-
              {% set state=states('sensor.sm_s918u_battery_state') %} {% if
              state=='Charging' %}
                green
              {% else %}
                white
              {% endif %}        
            tap_action:
              action: none
            hold_action:
              action: none
          - type: template
            entity: sensor.sm_s918u_battery_level
            icon: >-
              {% 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: >-
              {% set bl = states('sensor.sm_s918u_battery_level') | int %}  {%
              if bl < 10 %} red  {% elif bl < 20 %} red  {% elif bl < 30 %} red 
              {% elif bl < 40 %} orange  {% elif bl < 50 %} orange  {% elif bl <
              60 %} orange  {% elif bl < 70 %} green  {% elif bl < 80 %} green 
              {% elif bl < 90 %} green  {% elif bl < 100 %} green {% elif bl ==
              100 %} green  {% else %} grey  {% endif %}
            tap_action:
              action: none
            hold_action:
              action: none
        card_mod:
          style:
            .: |
              ha-card {
                width: 55px;
                margin-left: 60%;
                top: -120px;
                background: none;
                --chip-border-width: 0;
              }
  - type: custom:layout-card
    layout_type: custom:vertical-layout
    layout: {}
    cards:
      - type: custom:mushroom-person-card
        entity: person.irina
        primary_info: name
        secondary_info: none
        icon_type: entity-picture
        card_mod:
          style:
            mushroom-state-item$: |
              .container {
                display: flex;
                flex-direction: column !important;
              }
            mushroom-state-info$: |
              .container {
                width: 83%;
                align-items: center;
              }
            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 {
                --icon-size: 72px;
                width: fit-content;
                margin-left: 17%;
                top: 10px;
                background: none;        
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.irinab_iphone_battery_state
            icon: >-
              {% set state=states('sensor.irinab_iphone_battery_state') %} {% if
              state=='Charging' %}
                mdi:cellphone-charging
              {% else %}
                mdi:cellphone
              {% endif %}  
            icon_color: >-
              {% set state=states('sensor.irinab_iphone_battery_state') %} {% if
              state=='Charging' %}
                green
              {% else %}
                white
              {% endif %}        
            tap_action:
              action: none
            hold_action:
              action: none
          - type: template
            entity: sensor.irinab_iphone_battery_level
            icon: >-
              {% set bl = states('sensor.irinab_iphone_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: >-
              {% set bl = states('sensor.irinab_iphone_battery_level') | int %} 
              {% if bl < 10 %} red  {% elif bl < 20 %} red  {% elif bl < 30 %}
              red  {% elif bl < 40 %} orange  {% elif bl < 50 %} orange  {% elif
              bl < 60 %} orange  {% elif bl < 70 %} green  {% elif bl < 80 %}
              green  {% elif bl < 90 %} green  {% elif bl < 100 %} green {% elif
              bl == 100 %} green  {% else %} grey  {% endif %}
            tap_action:
              action: none
            hold_action:
              action: none
        card_mod:
          style:
            .: |
              ha-card {
                width: 55px;
                margin-left: 50%;
                top: -120px;
                background: none;
                --chip-border-width: 0;
              }
  - type: custom:layout-card
    layout_type: custom:horizontal-layout
    layout: {}
    cards:
      - type: custom:mushroom-person-card
        entity: person.sonia
        primary_info: name
        secondary_info: none
        icon_type: entity-picture
        card_mod:
          style:
            mushroom-state-item$: |
              .container {
                display: flex;
                flex-direction: column !important;
              }
            mushroom-state-info$: |
              .container {
                width: 83%;
                align-items: center;
              }
            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 {
                --icon-size: 72px;
                width: fit-content;
                margin-left: 10%;
                top: 10px;
                background: none;        
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.sonia_bolembakhs_iphone_battery_state
            icon: >-
              {% set
              state=states('sensor.sonia_bolembakhs_iphone_battery_state') %} {%
              if state=='Charging' %}
                mdi:cellphone-charging
              {% else %}
                mdi:cellphone
              {% endif %}  
            icon_color: >-
              {% set
              state=states('sensor.sonia_bolembakhs_iphone_battery_state') %} {%
              if state=='Charging' %}
                green
              {% else %}
                white
              {% endif %}        
            tap_action:
              action: none
            hold_action:
              action: none
          - type: template
            entity: sensor.sonia_bolembakhs_iphone_battery_level
            icon: >-
              {% set bl = states('sensor.sonia_bolembakhs_iphone_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: >-
              {% set bl = states('sensor.sonia_bolembakhs_iphone_battery_level')
              | int %}  {% if bl < 10 %} red  {% elif bl < 20 %} red  {% elif bl
              < 30 %} red  {% elif bl < 40 %} orange  {% elif bl < 50 %} orange 
              {% elif bl < 60 %} orange  {% elif bl < 70 %} green  {% elif bl <
              80 %} green  {% elif bl < 90 %} green  {% elif bl < 100 %} green
              {% elif bl == 100 %} green  {% else %} grey  {% endif %}
            tap_action:
              action: none
            hold_action:
              action: none
        card_mod:
          style:
            .: |
              ha-card {
                width: 55px;
                margin-left: 43%;
                top: -120px;
                background: none;
                --chip-border-width: 0;
              }
  - type: custom:layout-card
    layout_type: custom:horizontal-layout
    layout: {}
    cards:
      - type: custom:mushroom-alarm-control-panel-card
        entity: alarm_control_panel.alarmo
        states:
          - armed_home
          - armed_away
        fill_container: true
        layout: horizontal
        primary_info: state
        secondary_info: none
        icon_type: entity-picture
        card_mod:
          style:
            mushroom-state-item$: |
              .container {
                display: flex;
                flex-direction: column !important;
              }
            mushroom-state-info$: |
              .container {
                width: 83%;
                align-items: center;
              }
            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 {
                --icon-size: 72px;
                width: fit-content;
                margin-left: 30%;
                top: 10px;
                background: none;        
              }
card_mod:
  style: |
    ha-card {
      height: 80px !important;
    }

Thank you in advances for help.

I am still worried if the sensor sensor.pv_power is greater than 1W so that the color of the icon lights up.
Thank you very much.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Goodwe Inverter
    secondary: '{{ states(''sensor.inverter_temperature_air'') | round(1) }} °C'
    icon: mdi:solar-power-variant
    entity: sensor.pv_power
    tap_action:
      action: navigate
      navigation_path: /lovelace/fve
    hold_action:
      action: toggle
    icon_color: >-
      {{ 'orange' if is_state(entity, '> 1')
      else 'disabled' }}
    fill_container: true
    layout: horizontal
    multiline_secondary: false

i’m tried also last configuration and shows the same result:

immagine

But if i press the speaker icon changed look but power icon has hide.

immagine

why i have this behavior?
thanks for time you dedicate to me

Yes the media player device needs to be on for it to show the slider. That is standard behaviour with the mushroom cards. To turn the media player back off you just press the icon normally.

This should work:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Goodwe Inverter
    secondary: '{{ states(''sensor.inverter_temperature_air'') | round(1) }} °C'
    icon: mdi:solar-power-variant
    entity: sensor.average_kwh
    tap_action:
      action: navigate
      navigation_path: /lovelace/fve
    hold_action:
      action: toggle
    icon_color: |-
      {% if states(config.entity) | float > 1 %}
        orange
      {% else %}
        disabled
      {% endif %}
    fill_container: true
    layout: horizontal
    multiline_secondary: false
2 Likes

Post the code for the card. Are you using an entity card, are you using a template card, etc. I dont know so i cant help :slight_smile:

Sorry, here is one of the Cards:

type: conditional
conditions:
  - condition: state
    entity: binary_sensor.waschmaschine_lauft
    state: 'on'
card:
  type: tile
  entity: binary_sensor.waschmaschine_lauft
  vertical: true
  name: Waschmaschine
  color: blue
  state_content:
    - last-changed
    - sensor_value
  tap_action:
    action: none
  icon: mdi:washing-machine