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

thank you so much, it really gives me another perspective about that. cheers!

1 Like

Now that the TTS field is showing up in the cards again, it’s not looking as nice as it once did. Here’s a before and after:

Before
image

After
image

…does anyone have an edit to make this look better? How are you handling this?

1 Like

Hello Team, I am new to HA and I am struggling to implement the following:

  • The Washing Machine will show the current state for example if it is Off or running.

  • I have got the washing machine to spin when the washing machine is running.

  • How can I can get the current state to show underneath the washing machine icon?

Here is my working code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: input_select.washing_machine_status_2
    icon: mdi:washing-machine
    entity_status: ''
    friendly_name: input_select.washing_machine_status_2
    value_template: |-
      {% if is_state('input_select.washing_machine_status_2', 'running') -%}
       running
      {% elif is_state('input_select.washing_machine_status_2', 'idle') %}
       idle
      {%- else -%}
       off
      {%- endif %} 
    icon_color: |-
      {% if is_state('input_select.washing_machine_status_2','Running') -%}
       amber
      {%- else -%}
        red
      {%- endif %}
    layout: vertical
    primary: Washing Machine
    tap_action:
      action: Dropdown
    card_mod:
      style: |
        ha-state-icon {
          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;
        }
  - type: custom:mushroom-template-card
    entity: input_select.washing_machine_status_2
    icon: mdi:washing-machine
    icon_color: |-
      {% if is_state('input_select.washing_machine_status_2','Running') -%}
        orange
      {%- else -%}
        grey
      {%- endif %}
    layout: vertical
    tap_action:
      action: Dropdown
    card_mod:
      style: |
        ha-state-icon {
          {{ 'animation: spin 1s linear infinite;' if is_state('input_select.washing_machine_status_2','Running') }}
          transform-origin: 50% 58%;
          clip-path: circle(21.7% at 50% 58%);
        }
        ha-card {
          top: -99px;
          border: none;
        }
card_mod:
  style: |
    ha-card {
      height: 100px;
    }

Any help will be very much appreciated. Also, how can I make the Icons a bit bigger?

@LiQuid_cOOled please i still need help on how to make the chip have no background --chip-background: none; and at the same time for the fan animation to work.
Thank you very much for your time

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: more-info
    entity: fan.chlazeni_goodwe_ventilator
    icon: mdi:fan
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon { 
        {{ 'animation: rotate 2s linear infinite;' if is_state('fan.chlazeni_goodwe_ventilator', 'on') }}
       }
       @keyframes rotate {
          100% { transform: rotate(360deg); }        
       }

2 ways:

Option 1. Applies to all chips in the chip card.

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: more-info
    entity: fan.chlazeni_goodwe_ventilator
    icon: mdi:fan
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon { 
        {{ 'animation: rotate 2s linear infinite;' if is_state('fan.chlazeni_goodwe_ventilator', 'on') }}
      }
      @keyframes rotate {
        100% { transform: rotate(360deg); }        
      }
    .: |
      ha-card {
        --chip-background: none;
      }

Option 2. You can no longer use the visual editor, but background is only removed from specific chip targeted.

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: more-info
    entity: fan.chlazeni_goodwe_ventilator
    icon: mdi:fan
    card_mod:
      style: |
        ha-card {
          --chip-background: none;
        }      
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon { 
        {{ 'animation: rotate 2s linear infinite;' if is_state('fan.chlazeni_goodwe_ventilator', 'on') }}
      }
      @keyframes rotate {
        100% { transform: rotate(360deg); }        
      }
1 Like

Would love to help you, but please post your code in code blocks. Indentation is important and with the way you have posted this is lost.

Check out this post, section 11.

1 Like
  1. Seems like 2 different devices took those screenshots, whilst i am not under the illusion that this would make up the entire difference it will make a difference to how each looks of course.

  2. Cant help you achieve how you want it to look if you dont post the code for what you have :slight_smile:

Thank you. I solved it like this.

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: toggle
    entity: light.wled_loznice
    icon: mdi:fan
    icon_color: yellow
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon { 
        {{ 'animation: rotate 2s linear infinite;' if is_state('light.wled_loznice', 'on') }}
       }
       @keyframes rotate {
          100% { transform: rotate(360deg); }        
       }
    style: |
      ha-card {
      --chip-background: none;
      }

is there a way you can share your server page with the cards?

For some odd reason my sonos doesnt show volume buttons with the mushroom media card… My nvidia shield does show the buttons… Does anyone know how to solve this?

Hello,
I am new to this and I apologize for my mistake, could you please check if the code has been formatted properly?

Kwame

Ill answer each of your points separately if thats ok.

  1. You can do this like this:
    secondary: |-
      {{states(config.entity) | capitalize}}

Using config.entity is just used instead of writing the entity id again.

I also had to adjust the height of the second card a bit + the total height of the stack in card.

  1. You seem to already have this working? You have it so the animation will only play when input_select is Running
{{ 'animation: spin 1s linear infinite;' if is_state('input_select.washing_machine_status_2','Running') }}

You could also do it like this (IMO a bit easier to read)

{% if is_state('input_select.washing_machine_status_2','Running') %}
  animation: spin 1s linear infinite;
{% endif %}
  1. Same number 1 :slight_smile:

Here is the full config.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: input_select.washing_machine_status_2
    icon: mdi:washing-machine
    entity_status: ''
    friendly_name: input_select.washing_machine_status_2
    value_template: |-
      {% if is_state('input_select.washing_machine_status_2', 'running') -%}
       running
      {% elif is_state('input_select.washing_machine_status_2', 'idle') %}
       idle
      {%- else -%}
       off
      {%- endif %} 
    icon_color: |-
      {% if is_state('input_select.washing_machine_status_2','Running') -%}
       amber
      {%- else -%}
        red
      {%- endif %}
    layout: vertical
    primary: Washing Machine
    secondary: |-
      {{states(config.entity) | capitalize}}
    tap_action:
      action: Dropdown
    card_mod:
      style: |
        ha-state-icon {
          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;
        }
  - type: custom:mushroom-template-card
    entity: input_select.washing_machine_status_2
    icon: mdi:washing-machine
    icon_color: |-
      {% if is_state('input_select.washing_machine_status_2','Running') -%}
        orange
      {%- else -%}
        grey
      {%- endif %}
    layout: vertical
    tap_action:
      action: Dropdown
    card_mod:
      style: |
        ha-state-icon {
          {% if is_state('input_select.washing_machine_status_2','Running') %}
            animation: spin 1s linear infinite;
          {% endif %}
          transform-origin: 50% 58%;
          clip-path: circle(21.7% at 50% 58%);
        }
        ha-card {
          top: -117px;
          border: none;
        }
card_mod:
  style: |
    ha-card {
      height: 120px;
    }

Hello Dimitri,

Thanks so much for your quick responds, used your code and is working for now.
Again, I greatly appreciate all your assistance Sir.

Does somebody know why some of my cards are looking like this?

image

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: custom:mushroom-title-card
    title: Climate
    subtitle: ''
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        style: |
          ha-card {
            padding-bottom: 14px !important;
          }
        primary: Thermostat
        secondary: |
          Currently: {{ state_attr('climate.toon_thermostat', 'hvac_action') }}
        icon: |-
          {% set mode = states('climate.toon_thermostat') %}
          {% if mode == 'off' %}
          mdi:radiator-off
          {% elif mode == 'heating' %}
          mdi:radiator
          {% else %}
          mdi:radiator-disabled
          {% endif %}
        icon_color: |-
          {% set status = state_attr('climate.toon_thermostat','hvac_action') %}
          {% if status == 'heating' %}
          red
          {% else %}
          grey
          {% endif %}
        tap_action: none
      - type: vertical-stack
        cards:
          - type: custom:simple-thermostat
            style: |
              ha-card {
                --st-spacing: 0px;
              }
              ha-card .current--value {
                color: #ffffff;
              }
              header {
                margin-bottom: 10px !important;
                padding-bottom: 0px !important;
              }
              ha-card .thermostat-trigger { 
                color: #6f6f6f;
              }
            entity: climate.toon_thermostat
            header:
              name: false
              icon: false
            decimals: '1'
            fallback: 'Off'
            hide:
              temperature: true
              state: true
            layout:
              mode:
                names: false
                icons: false
                headings: false
              step: row
            step_size: '0.5'
            control:
              hvac:
                'off': false
                heat: false
                cool: false
                heat_cool: false
  - type: custom:simple-thermostat
    style: |
      ha-card {
        --st-font-size-toggle-label: 6px
        --st-spacing: 0px;
        --st-default-spacing: 0px;
        --st-mode-background: #2d2d2d;
        margin-left: 12px;
        margin-right: 12px;
      }
      ha-card .mode-item.active.off { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item.active.heat { 
        background: #472421;
        color: #f44336;
      }
      ha-card .mode-item.active { 
        background: #263926;
        color: #4caf50;
      }
      ha-card .mode-item.active:hover { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item:hover { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item {
        --st-spacing: 10px;
        border-radius: 10px;
      }
      ha-card .modes {
        grid-gap: 12px
      }
    entity: climate.toon_thermostat
    header: false
    setpoints: false
    hide:
      temperature: true
      state: true
    layout:
      mode:
        headings: false
        icons: true
        names: false
      step: row
    control:
      hvac:
        'off':
          name: Power
        heat:
          name: Heat
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: 0px;
        --chip-padding: 0 0.2em
      }
    alignment: justify
    chips:
      - type: template
        content: '{{state_attr(entity, "current_temperature")}} °C'
        entity: climate.toon_thermostat
        icon: mdi:home-thermometer
        tap_action:
          action: more-info
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='cool' %}
          blue
          {% elif state=='heat' %}
          red
          {% else %}
          grey
          {% endif %}
        style: |
          ha-card {
            margin-left: 6px;
          }
      - type: template
        double_tap_action:
          action: none
        content: >-
          {{ states(entity) }}{{ state_attr(entity, "unit_of_measurement") }}
          Humidity
        entity: sensor.slaapkamer_luchtvochtigheid
        icon: mdi:water
        icon_color: blue
        tap_action:
          action: none
        hold_action:
          action: none
      - type: template
        double_tap_action:
          action: none
        content: '{{ states(entity) }} {{ state_attr(entity, "unit_of_measurement") }}'
        entity: sensor.temperatuur_buiten
        icon: mdi:thermometer
        icon_color: grey
        tap_action:
          action: none
        hold_action:
          action: none
      - type: template
        icon: |-
          {% if is_state(entity, 'off') %}
            mdi:chevron-down 
          {% elif is_state(entity, 'on') %}   
            mdi:chevron-up    
          {% endif %}
        tap_action:
          action: toggle
        entity: input_boolean.thermostat_dropdown
        icon_color: disabled
        style: |
          ha-card {
            --chip-icon-size: 1em
          }
  - type: conditional
    conditions:
      - entity: input_boolean.thermostat_dropdown
        state: 'on'
    card:
      type: custom:stack-in-card
      keep:
        margin: false
        box_shadow: false
        background: false
      cards:
        - type: grid
          square: false
          columns: 2
          cards:
            - type: custom:mushroom-template-card
              entity: sensor.temperatuur_woonkamer
              primary: >-
                {{ states(entity) }} {{ state_attr(entity,
                "unit_of_measurement") }}
              secondary: Binnen
              icon_color: |-
                {% set temp = states(entity) %}
                {% if temp >= '21' %}
                  red
                {% elif temp >= '17' and temp < '21' %}
                  orange
                {% elif temp == 'unknown' %}
                  grey
                {% else %}
                  blue
                {% endif %}
              icon: mdi:home-thermometer-outline
            - type: custom:mushroom-template-card
              entity: sensor.temperatuur_buiten
              primary: >-
                {{ states(entity) }} {{ state_attr(entity,
                "unit_of_measurement") }}
              secondary: Buiten
              icon_color: |-
                {% set temp = states(entity) %}
                {% if temp >= '22' %}
                  red
                {% elif temp >= '15' and temp < '22' %}
                  orange
                {% elif temp == 'unknown' %}
                  grey
                {% else %}
                  blue
                {% endif %}
              icon: mdi:thermometer
        - type: custom:mini-graph-card
          entities:
            - entity: sensor.temperatuur_woonkamer
              name: Inside Temperature
              color: '#4caf50'
            - entity: sensor.temperatuur_buiten
              name: Outside Temperature
              color: '#2196f3'
              y_axis: secondary
          hours_to_show: 24
          line_width: 3
          font_size: 50
          animate: true
          show:
            name: false
            icon: false
            state: false
            legend: false
            fill: fade

Hey @rhysb this looks amazing! I cant get that redbutton Bellmenu to pop out, im not getting any error messages either, what can i do to get that bottom half, sticky menu to work properly?

hello Dimitri,

in this post Mushroom Cards - Build a beautiful dashboard easily 🍄 - #3683 by Sylwester

i have seen an history “mushroom” graph. I would use it with a binary_sensor of my car position. It’s possible to reply this card?

could you help me?

thank you

Im trying to recreate the top card, but somehow i cant get it to work, ive tried chatgpt and forums and discord, no use. Could it be that this code is not supported anymore by the version that im running (2023.12.3)?

Not OP but I have similar card setup, here’s my code:

type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mini-graph-card
        hours_to_show: 6
        points_per_hour: 30
        animate: true
        hour24: false
        height: 140
        entities:
          - sensor.processor_use
        state_adaptive_color: true
        show_state: true
        name: CPU
        line_color: '#28A95D'
        line_width: 3
        color_thresholds:
          - value: 10
            color: '#28A95D'
          - value: 30
            color: '#179FE7'
          - value: 60
            color: '#E5DF26'
          - value: 80
            color: '#E58B26'
          - value: 90
            color: '#EF302A'
        show:
          extrema: true
          average: true
          name_adaptive_color: true
          icon_adaptive_color: true
      - type: custom:mini-graph-card
        hours_to_show: 6
        points_per_hour: 60
        height: 140
        animate: true
        hour24: false
        entities:
          - sensor.processor_temperature
        name: CPU Temp
        line_color: '#28A95D'
        line_width: 3
        color_thresholds:
          - value: 30
            color: '#28A95D'
          - value: 40
            color: '#179FE7'
          - value: 50
            color: '#E5DF26'
          - value: 60
            color: '#E58B26'
          - value: 70
            color: '#EF302A'
        show:
          extrema: true
          average: true
          name_adaptive_color: true
          icon_adaptive_color: true
  - type: horizontal-stack
    cards:
      - type: custom:bar-card
        entity: sensor.disk_use_percent_config
        name: HDD
        decimal: 0
        height: 50
        direction: right
        severity:
          - color: '#28A95D'
            from: 0
            to: 20
          - color: '#53A8E2'
            from: 20
            to: 40
          - color: '#F2BF41'
            from: 40
            to: 60
          - color: '#F28D35'
            from: 60
            to: 80
          - color: '#EF5350'
            from: 80
            to: 100
        card_mod:
          style: |-
            ha-card{
              --bar-card-border-radius: 10px;
              border-radius: 10px;
              box-shadow: 
            }
            bar-card-value {
              font-size: 12px;
              font-weight: bold;
              
              }
            bar-card-name {
              
              font-size: 12px;
              font-weight: bold;
              }
      - type: custom:bar-card
        entity: sensor.memory_use_percent
        height: 50
        direction: right
        name: RAM
        decimal: 0
        severity:
          - color: '#28A95D'
            from: 0
            to: 20
          - color: '#53A8E2'
            from: 20
            to: 40
          - color: '#F2BF41'
            from: 40
            to: 60
          - color: '#F28D35'
            from: 60
            to: 80
          - color: '#EF5350'
            from: 80
            to: 100
        card_mod:
          style: |-
            ha-card{
              --bar-card-border-radius: 10px;
              border-radius: 10px;
              box-shadow: 
            }
            bar-card-value {
              font-size: 12px;
              font-weight: bold;
              
              }
            bar-card-name {
              
              font-size: 12px;
              font-weight: bold;
              }

4 Likes

Ciao Rhysb,

I’m using your configuration for climate-card all works fine but there is no appear the badge icon.
Could you help me please?

climate

  - type: custom:mushroom-climate-card
    entity: climate.fujitsu
    name: Condizionatore
    show_temperature_control: true
    hvac_modes:
      - heat_cool
      - heat
      - cool
      - fan_only
      - dry
    card_mod:
      style: |
        mushroom-shape-icon {
          --card-mod-icon: 
          {% if is_state(config.entity, 'heat_cool') %}
            mdi:autorenew
          {% elif is_state(config.entity, 'heat') %}
            mdi:fire
          {% elif is_state(config.entity, 'cool') %}
            mdi:snowflake
          {% elif is_state(config.entity, 'dry') %}
            mdi:water-percent
          {% elif is_state(config.entity, 'fan_only') %}
            mdi:fan
          {% else %}
            mdi:air-conditioner 
          {% endif %};
          display: flex;
          {% if is_state(config.entity, 'fan_only') %}
            animation: rotation 1s linear infinite;
          {% endif %}
        }
        @keyframes rotation {
          100% {
             transform: rotate(360deg);
          }
        }

Thanks!

Is it possible to get the icon the colour of an attribute from an entity ?

the colour of a light changes depending of time. so I want to see the colour changed of the icon. Is that possible ?