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

[Chykan (Hunter)]

@N0_Klu3

type: custom:stack-in-card
cards:
  - type: custom:mushroom-climate-card
    entity: climate.wireless_temperature_sensor_x
    hvac_modes:
      - heat
      - cool
    show_temperature_control: true
    layout: horizontal
    name: Tado Ground Floor
    icon: mdi:thermostat
    double_tap_action:
      action: more-info
  - type: custom:stack-in-card
    cards:
      - type: grid
        square: false
        columns: 2
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.wireless_temperature_sensor_x_temperature
            primary_info: state
            secondary_info: name
            name: Temperature
            icon_color: green
          - type: custom:mushroom-entity-card
            entity: sensor.wireless_temperature_sensor_x_humidity
            primary_info: state
            secondary_info: name
            name: Humidity
            icon_color: blue
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.wireless_temperature_sensor_x_temperature
            name: Temperature
            color: "#00bb33"
          - entity: sensor.wireless_temperature_sensor_x_humidity
            name: Humidity
            color: "#2196f3"
            y_axis: secondary
        hours_to_show: 24
        line_width: 3
        font_size: 50
        animate: true
        show:
          name: false
          icon: false
          labels: true
          state: false
          legend: false
          fill: fade

Accroding to the docs it should be

type: custom:stack-in-card
keep:
  box_shadow: false
cards:
  - type: custom:mushroom-climate-card
    entity: climate.wireless_temperature_sensor_x
    hvac_modes:
      - heat
      - cool
    show_temperature_control: true
    layout: horizontal
    name: Tado Ground Floor
    icon: mdi:thermostat
    double_tap_action:
      action: more-info
  - type: custom:stack-in-card
    cards:
      - type: grid
        square: false
        columns: 2
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.wireless_temperature_sensor_x_temperature
            primary_info: state
            secondary_info: name
            name: Temperature
            icon_color: green
          - type: custom:mushroom-entity-card
            entity: sensor.wireless_temperature_sensor_x_humidity
            primary_info: state
            secondary_info: name
            name: Humidity
            icon_color: blue
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.wireless_temperature_sensor_x_temperature
            name: Temperature
            color: "#00bb33"
          - entity: sensor.wireless_temperature_sensor_x_humidity
            name: Humidity
            color: "#2196f3"
            y_axis: secondary
        hours_to_show: 24
        line_width: 3
        font_size: 50
        animate: true
        show:
          name: false
          icon: false
          labels: true
          state: false
          legend: false
          fill: fade

Also just try changing you theme for interest sake. Click on your profile icon just below the notification bell.

Stack In Card has not been maintained since 2020.

If that does not work you may want to try lovelace-layout-card

Layout-card

If needed, any layout can also be used inside a lovelace-card by using layout-card:

type: custom:layout-card layout_type: custom:masonry-layout layout: width: 300 max_cols: 10 cards: …

Layout-card will take its cards and place them within itself according to the specified layout.

layout: takes the same options as is the view configuration for a layout.

NOTE: Please be aware that layout-card is itself a CARD, and cannot be wider than any other cards in the same view.
All cards you specify within it must fit inside this same width.
Thus layout-card is of limited use except in panel mode.

NOTE 2: The “default” layout option for layout-card (which you’ll see if you’re using the GUI lovelace editor) uses the default layout engine of lovelace. It’s basically the same as the Horizontal layout, but without any options, without being able to hide cards and with the number of columns based on the width of the window rather than the layout-card.
I don’t recommend using it, but it’s there.

[N0_Klu3]

If I run Mushroom Shadow theme, the lines disappear

Ultimately I was trying to keep my install clean and as default as possible.

Let me try your code, and thank you so much!
I’ll report back shortly

EDIT Using your code and no theme shows the lines again

[Chykan (Hunter)]

Good to hear. I agree with keeping as default as possible.

To achieve this in default Home Assistant Cards.

[Chykan (Hunter)]

I would suggest Stack-In card is broken.

[lsitges]

Hi! Thanks a lot all of those who had contributed with your ideas for my dashboard.

Right now I’m strugelling to make a card that shows my WiFi Deco with the information of coneccted users (total, WiFi and Wired) and the up & down speed.

What I want it’s to put at the right side of the mushroom-template-card (inside the card) bowth entities (sensor.sotano_up & sensor.sotano_down) .

How do you suggest to do it?

My actual template card looks like this:

Thanks in advanced

code

type: horizontal-stack
cards:

• type: custom:mushroom-template-card
  primary: Sótano
  secondary: >
  {{ states(‘sensor.clientes_sotano_totales’) }} | {{
  states(‘sensor.clientes_sotano_wifi’) }} | {{
  states(‘sensor.clientes_sotano_cable’) }}
  icon: >-
  {% if state_attr(‘device_tracker.sotano_deco’, ‘internet_online’) %}
  mdi:router-wireless {% else %} mdi:router-wireless-off {% endif %}
  entity: device_tracker.sotano_deco
  icon_color: >-
  {% if state_attr(‘device_tracker.sotano_deco’, ‘internet_online’) %} green
  {% else %} red {% endif %} badge_icon: “”
• type: vertical-stack
  cards:
  • type: custom:mushroom-chips-card
    chips:
    • type: entity
      entity: sensor.sotano_up
      icon: mdi:upload
  • type: custom:mushroom-chips-card
    chips:
    • type: entity
      entity: sensor.sotano_down
      icon: mdi:download

[Artemka00 (Artem)]

Hi everyone. I need some help with the room card, specifically with the fan animation. When the fan is turned on, it should light up and start spinning. Please help me out.

> - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:shower-head
        icon_color: |-
          {% if is_state('switch.svet_i_ventiliatsiia_tualet_right', 'on') %}
               #FFFF99
          {% endif %}
          {% if is_state('switch.svet_i_ventiliatsiia_tualet_right', 'off') %}
              grey
          {% endif %}
        primary: Ванная
        layout: horizontal
        card_mod:
          style:
            mushroom-state-info$: |
              .primary {
                font-size: 16px !important;
                position: relative;
                top: -49px;
                left: -125px;
                overflow: visible !important;
              }
              .secondary {
                position: relative;
                overflow: visible !important;
                top: -42px;
                left: -125px;
              }
            mushroom-shape-icon$: |
              .shape {
                position: relative;
                left: -45px;
                top: 100px;
              }
            .: |
              ha-state-icon {
                --icon-symbol-size: 70px;
                  padding-right: 10px;
                  padding-left: 0px;
                  padding-bottom: 20px;
                  height: 85px;
                  width: 35px;
              }
              ha-card {
                 --primary-text-color:  rgb(183,181,174, 0.5);
                 --secondary-text-color: rgba(183,181,174, 0.3) !important;;
                 background: none;
               }
               :host {
                 --mush-icon-size: 126px;
               }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: switch.svet_i_ventiliatsiia_tualet_right
            tap_action:
              action: toggle
            icon: mdi:lightbulb
            hold_action:
              action: more-info
            icon_color: |-
              {% if is_state(entity, 'on') %} 
                amber 
              {% else %}
                light-grey
              {% endif %}
            double_tap_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  --icon-size: 32px;
                    width: 60px;
                    margin-left: 65%;
                    top: -140px;
                    background: none;
                  }
          - type: template
            primary: none
            icon_color: |-
              {% if is_state(entity, 'on') %}
                green
              {%else%}
                light-grey
              {% endif %}
            icon: mdi:fan
            secondary: none
            entity: switch.svet_i_ventiliatsiia_tualet_left
            card_mod:
              style: |
                ha-card {
                  --icon-size: 32px;
                    width: 60px;
                    margin-left: 65%;
                    top: -140px;
                    background: none;
                }
        card_mod:
          style: |
            ha-card {
              height: 50px !important;
              width: 66px;
              margin-left: 60%;
              background: none !important;
              --chip-border-width: 0;
            }
            mushroom-template-chip:nth-child(2)$: |
                ha-state-icon {
                {% if 'on' in states('switch.svet_i_ventiliatsiia_tualet_left') %}
                  animation: spin 1s linear infinite;
                {% endif %}
                }
                @keyframes spin {
                  100% {transform: rotate(360deg);}
                }

[mase]

hey guys,
anyone knows how to get more then one badge-icon on the template-card? so, on the top left and bottom on the icon. i know it´s posted somewhere in the thread, but i can´t find it.

[Mar1us]

and mase something like:

card_mod:
  style: |
    mushroom-badge-icon:after {
      content: "1";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(var(--rgb-orange));
      color: var(--card-background-color);
      font-weight: bolder;
      border-radius: 50%;
      top: 180%;
      width: 100%;
      height: 100%;
      font-size: 0.8em; 
    }    
    mushroom-badge-icon:before {
      content: "2";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(var(--rgb-orange));
      color: var(--card-background-color);
      font-weight: bolder;
      border-radius: 50%;
      top: 0%;
      right: 180%;
      width: 100%;
      height: 100%;
      font-size: 0.8em; 
    }

[pafftis1 (Pafftis)]

Hello everyone. I have made a menu on each page. Thanks to the button in the middle (red) I can hide and open the sidebar, is there any way to make the “edit page” button? I circled it in blue.

[jrrrenofio (Joao)]

Are we no longer able to display shadow on chip cards?

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: masonry
    layout: {}
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: alarm-control-panel
            entity: alarm_control_panel.alarme
            content_info: none
            name: Alarm
            card_mod:
              style: |
                ha-card {
                      top: 2px;   
                      border: 0px;
                      --text-color: rgb(var(--rgb-grey));
                      background: rgba(var(--mush-rgb-black)) !important;
                      --chip-box-shadow:0px 4px 5px -3px rgba(0,0,0,0.75);
                    }
                  
          - type: template
            entity: lock.fechadura
            icon: |
              {% set state=states(entity) %} {% if state=='locked' %}
                mdi:lock
              {% elif state=='unlocked' %}
                mdi:lock-open-variant
              {% else %}
                grey
              {% endif %}
            tap_action:
              action: more-info
            icon_color: |
              {% set state=states(entity) %} {% if state=='locked' %}
                green
              {% elif state=='unlocked' %}
                red
              {% else %}
                grey
              {% endif %}
            card_mod:
              style: |
                ha-card {
                      top: 2px;   
                      border: 0px;
                      --text-color: rgb(var(--rgb-grey));
                      background: rgba(var(--mush-rgb-black)) !important;
                      --chip-box-shadow:0px 4px 5px -3px rgba(0,0,0,0.75);
                    }

[jeroenvdd89 (Jeroen)]

Hi all,
I’ve taken the ‘vroom’ animation from the previous part of this topic and adopted it to the current syntax.

this was the old example:

as you can see the car ‘drives’ behind the circle
am I missing something on the clip path?
I’ve adopted to code from icon-animation to animation:

the ‘animation’ part works perfectly but the car seems to drive outside the circle,

type: custom:mushroom-template-card
icon: mdi:robot-mower
entity: lawn_mower.grassie
primary: Robotmaaier
secondary: ""
layout: vertical
card_mod:
  style: |
    ha-state-icon {
      animation: vroom 2s ease-in-out infinite;
    }

    .shape {
      clip-path: inset(0 0 0 0); 
    }

    @keyframes vroom {
      49% { opacity: 1; }
      50% { transform: translate(32px); opacity: 0; }
      51% { transform: translate(-32px); opacity: 0; }
      52% { opacity: 1; }
    }

anyone got some ideas how to get this to work nicely again

[bernstan]

Hi,
This feels like a really common question but I’ve spent quite a while searching and failing to find an answer - apologies in advance if my search skills are the problem here!

I want to create a mushroom “button” card that triggers an action. I’ve done the below:

type: custom:mushroom-template-card
primary: It's lunchtime!
icon: mdi:bullhorn
tap_action:
  action: perform-action
  perform_action: script.announce_message_to_alexa_devices
  data:
    announcement: It is lunchtime, come to the kitchen now.
  target: {}
secondary: ""
double_tap_action:
  action: none
hold_action:
  action: none

Is there a simple way of having this animate to look like it’s being pushed? (e.g. as per the standard lovelace button card). Either a brief change of the icon colour or some formatting of the overall shape to look like it’s being pressed? At the moment there’s no visual feedback that the card’s been pressed successfully.

Cheers,
Bern

[jeroenvdd89 (Jeroen)]

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

Mushroom Animations - Part 2 Hit the limit for characters in a single post so have had to split it Mushroom Title Animations These ones run once to transition in the Mushroom Title. [Mushroom Title Typewriter] Typewriter Animation [Mushroom Title Scale-In] Scale-in Animation [Mushroom Title Fade-In] Fade-in Animation [Mushroom Title Focus] Focus Animation [Mushroom Title Drop-In] Drop-in Animation [Mushroom Title Slide-In] Slide-in Animation [Mushroom Title…

on this page there are lots of types

[rallye]

I love the animated icons and I tried to modify the (changed) to my needs: if device is on - animation on. If the device is off - no animation. I tried this way:

type: custom:mushroom-entity-card
entity: switch.464040536436002816_bsh_common_setting_powerstate
name: Wäschetrockner
icon: mdi:tumble-dryer
tap_action:
  action: toggle
hold_action:
  action: none
double_tap_action:
  action: none
grid_options:
  columns: 12
  rows: 1
card_mod:
  style: |
    {{% if switch.464040536436002816_bsh_common_setting_powerstate, 'on') %}
      ha-state-icon {
        animation: shake 400ms ease-in-out infinite, drum 1s infinite;
        transform-origin: 50% 65%;
      }
      @keyframes shake {
        0%, 100% { transform: rotate(4deg); }
        50%  { transform: rotate(-4deg); }
      }
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
      }
        {% else %}
        {% endif %}

however, the expected animation on/off did not happen. I’m not an expert - however, maybe someone can tell me if this is possible at all - and if so: what am I doing wrong?

[dbius]

Try this:

card_mod:
  style: |
  	ha-state-icon {
      {% if is_state('switch.464040536436002816_bsh_common_setting_powerstate', 'on') %}
        animation: shake 400ms ease-in-out infinite, drum 1s infinite;
        transform-origin: 50% 65%;
      {% endif %}
    }
	@keyframes shake {
  	  0%, 100% { transform: rotate(4deg); }
	  50%  { transform: rotate(-4deg); }
	}
	@keyframes drum {
	  50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
    }

[rallye]

Thank you! Works as desired!!

[Endeavors]

Hi all! I’m fairly new to HA and am just getting into deeper customization. I’m currently using a Mushroom fan card for my Govee Tower Fan. It’s able to turn it on and off, but the percentage slider and oscillation don’t work. I’m mostly interested in somehow getting the oscillation toggle to work. I know that the entity id that I want to target is switch.smart_tower_fan_oscillationtoggle. Is there a way to link that entity to the entity the fan card is looking for?

[cristidobrescu (cristid)]

This is my template for Washer state; if its state is running the washer icon shake; if its state is idle the power icon is clipping

type: custom:mushroom-template-card
entity: switch.washing
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {{ '--shape-animation: ping 1.5s infinite;' if is_state('sensor.washer_operating_state', 'running') }}
      }
      @keyframes ping {
        0% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.3); }
        100% { box-shadow: 0 0 3px 10px transparent; }
      }
    style: |
      ha-state-icon {
        {{ 'animation: power 1.5s infinite;' if is_state('switch.washing', 'on') }}
      }
      @keyframes power {
        0%, 100% { clip-path: inset(0 0 0 0); }
        50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
      }                                
      ha-state-icon {
        {{ 'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if is_state('sensor.washer_operating_state', 'running') }}
        transform-origin: 50% 110%;
      }
      @keyframes shake {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
        40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
        60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
        80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
      } 
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
      }    
      ha-card {
      border: none;
      }    
primary: Washer
icon: >
  {% set state=states('sensor.washer_operating_state') %} {% if state=='running'
  %} mdi:washing-machine {% elif state=='ready' %} mdi:power {%elif
  state=='paused' %} mdi:power {% endif %}
icon_color: >-
  {% set state=states('switch.washing') %} {% if state=='on' %} orange {% elif
  state=='off' %} grey {% endif %}
secondary: |
  {% if is_state('sensor.washer_operating_state', 'running') %}
    Running
  {% endif %}  {% if is_state('switch.washing', 'on') %}
    ON
  {% else %}
    OFF
  {% endif %} 
fill_container: false
use_light_color: true
show_brightness_control: true
secondary_info: state
tap_action:
  action: toggle
hold_action:
  action: none
double_tap_action:
  action: none
show_position_control: false
show_buttons_control: false
layout: vertical

[LiQuid_cOOled]

Unfortunately your posted code is all over the place and I assume you are getting errors. Do you have a specific question?

I underlined a few issues you need to address.

[svenschuldt]

I am trying now for more than a day to adapt the background of an Icon - but I just don’t get it done - following code is my last try:

card_mod:
            style: |
              :host { 
                --mush-icon-size: 70px; 
                --mush-icon-border-radius: 50%;
              } ha-state-icon {
                --icon-symbol-size: 50px; 
                color: {% if is_state('[[card_entity]]', 'on') %} var(--orange) {% else %} var(--contrast10) {% endif %} !important;
                --shape-color: orange !important; 
                display: flex;
                align-items: center;
                justify-content: center;
              } mushroom-shape-icon$: |
                .shape {
                  --shape-color: blue !important; 
                }
              ha-card {
                padding-top: 10px !important; 
                padding-left: 10px !important; 
                padding-bottom: 0px !important;
                display: flex;
                align-items: flex-start; 
                justify-content: flex-start; 
              }

I am trying to simply add a colour to the background of the mushroom-icon and based on various postings I have read it should be this part:

mushroom-shape-icon$: |
                .shape {
                  --shape-color: blue !important; 
                }

However, it does not work - what am I doing wrong?

Thanks for any help!