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

[FireDragon (Nguyen Dac Manh)]

Hi @rhysb,
Although, used vertical-stack-in-card
but the inner mushroom-template-card still shows the borders.
How to hide it.

Here is my code:

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-template-card
    fill_container: true
    entity: person.admin
    layout: vertical
    multiline_secondary: true
    picture: /local/img/avatar.png
    primary: '{{- states(''person.admin'') -}}'
    secondary: null
    badge_icon: '{{- state_attr(''person.admin'',''icon'') -}}'
    badge_color: |-
      {% if is_state('person.admin','home') %}
        green
      {% elif is_state('person.admin','nothome') %}
        red
      {% else %}
        orange
      {% endif %}
    tap_action:
      action: more-info
  - type: custom:mushroom-chips-card
    alignment: center
    chips:
      - type: template
        entity: fds_iphone_xr_battery_level
        content_info: none
        icon: >-
          {% set bl = states('sensor.fds_iphone_xr_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.fds_iphone_xr_battery_level') | int %} {%
          if bl < 10 %} red {% elif bl < 20 %} red {% elif bl < 30 %} orange {%
          elif bl < 40 %} orange {% elif bl < 50 %} yellow {% elif bl < 60 %}
          yellow {% 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: more-info

[rhysb (Rhys)]

Share the full code. That snippet doesn’t produce the issue.

[rhysb (Rhys)]

I presume you mean Vertical Stack. Try using vertical-stack-card-margin: 2px

[rhysb (Rhys)]

I would suggest using Mushroom Chips instead. There is documentation and plenty of examples for applying the animations to Chips.

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

Mushroom Animations - Part 5 Mushroom Chip Animations [Mushroom Chip Animated Scene]

Chip Animated Scene

type: custom:mushroom-chips-card chips: - type: template icon: mdi:mushroom icon_color: red - type: template icon: mdi:snail icon_color: brown - type: template icon: mdi:flower icon_color: amber - type: template icon: mdi:butterfly icon_color: cyan card_mod: style: mushroom-template-chip:nth-child(1)$: | ha-icon { anima…

If you wanted to use them on glance cards, you would need to redo/adjust the clip-path for the state-badge which is slightly larger that the icon.

[alnavasa (A)]

I am having some trouble templating a Hacs update card, anyone can help me with this one out, I managed to template color properly, but I can’t get to work on the secondary info

type: custom:mushroom-template-card
primary: HACS
secondary: >-
  {{ "Up to date" if states("sensor.hacs") | float < 1 else
  (states("sensor.hacs") | float | round(0) }} " pending updates" }}
icon: hacs:hacs
layout: vertical
fill_container: true
multiline_secondary: false
entity: sensor.hacs
icon_color: '{{ "green" if states("sensor.hacs") | float < 1 else "amber" }}'
picture: ''

[ArenaCloser]

I use this code for my HACS updates card, maybe it helps.

Edit: updated to go to HACS when clicked

type: custom:mushroom-template-card
entity: ''
icon: mdi:store
icon_color: |-
  {% if states('sensor.hacs') == "0" %}
  green
  {% else %}
  orange
  {% endif %}
primary: HACS
secondary: |-
  {% if states('sensor.hacs') == "0" %}
  Up-to-date
  {% else %}
  {% for item in state_attr('sensor.hacs', 'repositories') -%}
    {%- if loop.first %}{{states('sensor.hacs')}} update(s): {% elif loop.last %} en {% else %}, {% endif -%}
    '{{ item.display_name | lower }}'
  {%- endfor %}
  {% endif %}
multiline_secondary: true
fill_container: false
tap_action:
  action: navigate
  navigation_path: ../hacs/entry

[Sylwester (Sylwester Olik)]

I created 2 additional buttons to climate card using vertical stack and - top margin. It looks ok but I can not press Thermostat icon to toggle thermostat on and off. I think that is because chip card with buttons is on top of climate card. Any solution for that?

type: custom:stack-in-card
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.hallway
        show_temperature_control: true
        name: Thermostat
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            content: >-
              {% set time = state_attr('timer.heating_boost_timer',
              'finishes_at') %} {{ 'BOOST' if time == None else
              (as_datetime(time) - now()).total_seconds() |
              timestamp_custom('%H:%M', false) }}
            tap_action:
              action: call-service
              service: input_boolean.toggle
              data: {}
              target:
                entity_id: input_boolean.heating_boost
            entity: input_boolean.heating_boost
            card_mod:
              style: |
                ha-card {
                  {% if is_state('input_boolean.heating_boost', 'on') %}
                    --chip-background: rgba(var(--rgb-orange), 0.2);
                  {% else %}
                    --chip-background: rgba(var(--rgb-disabled), 0.15);
                  {% endif %}
                  --chip-box-shadow: none;
                  --chip-border-radius: 10px;
                  --chip-height: 42px;
                  --chip-padding:10px 38px 10px 38px;
                  margin-bottom: 12px;
                }
          - type: template
            icon: mdi:leaf
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.heating_eco
            entity: input_boolean.heating_eco
            card_mod:
              style: |
                ha-card {
                  {% if is_state('input_boolean.heating_eco', 'on') %}
                    --chip-background: rgba(var(--rgb-green), 0.2);
                  {% else %}
                    --chip-background: rgba(var(--rgb-disabled), 0.15);
                  {% endif %}
                  --chip-box-shadow: none;
                  --chip-border-radius: 10px;
                  --chip-height: 42px;
                  --chip-padding:10px;
                  margin-bottom: 12px;
                  margin-right: 12px;
                }
        alignment: end
        card_mod:
          style: |
            ha-card {
              margin-top: -108px;
              --chip-spacing: 12px;
            }

Different idea is to move buttons on bottom but I do not know how to make chip auto wider or how to make fixed width.

type: custom:stack-in-card
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.hallway
        show_temperature_control: true
        layout: horizontal
      - type: horizontal-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    content: >-
                      {% set time = state_attr('timer.heating_boost_timer',
                      'finishes_at') %} {{ 'BOOST' if time == None else
                      (as_datetime(time) - now()).total_seconds() |
                      timestamp_custom('%H:%M', false) }}
                    tap_action:
                      action: call-service
                      service: input_boolean.toggle
                      data: {}
                      target:
                        entity_id: input_boolean.heating_boost
                    entity: input_boolean.heating_boost
                    card_mod:
                      style: |
                        ha-card {
                          {% if is_state('input_boolean.heating_boost', 'on') %}
                            --chip-background: rgba(var(--rgb-orange), 0.5);
                          {% else %}
                            --chip-background: rgba(var(--rgb-disabled), 0.15);
                          {% endif %}
                          --chip-box-shadow: none;
                          --chip-border-radius: 10px;
                          --chip-height: 42px;
                          --chip-padding:10px;
                          margin-bottom: 12px;
                        }
                alignment: center
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    icon: mdi:leaf
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      data: {}
                      target:
                        entity_id: script.heating_eco
                    entity: input_boolean.heating_eco
                    card_mod:
                      style: |
                        ha-card {
                          {% if is_state('input_boolean.heating_eco', 'on') %}
                            --chip-background: rgba(var(--rgb-green), 0.5);
                          {% else %}
                            --chip-background: rgba(var(--rgb-disabled), 0.15);
                          {% endif %}
                          --chip-box-shadow: none;
                          --chip-border-radius: 10px;
                          --chip-height: 42px;
                          --chip-padding:10px;
                          margin-bottom: 12px;
                        }
                alignment: center

[theandouz]

Hey @rhysb, I think the math in the Christmas countdown is off I noticed it hasn’t moved. I believe this works now but only calculates for 30 days, not the year

{{ (((states('input_datetime.christmas') | as_datetime | as_local - now()).days + 1) / 31 * 100 - 100) * -1 }}

Card Code

type: custom:mushroom-template-card
icon: mdi:pine-tree
primary: Days to Christmas
icon_color: green
secondary: >-
  {{ (states('input_datetime.christmas') | as_datetime | as_local - now()).days + 1 }} days
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-red)) {{ (((states('input_datetime.christmas') | as_datetime | as_local - now()).days + 1) / 31 * 100 - 100) * -1 }}% 0%, var(--card-background-color) 0% 100%);
      }
      .shape:after {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: 50%;
        background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
      }

[alnavasa (A)]

Thanks!
This will help!

[FireDragon (Nguyen Dac Manh)]

Hi @rhysb,
Still the same code.

With theme Mushroom or default theme

With theme Mushroom Shadow:

[berkans (Berkan Sezer)]

Home Assistant Spotify Button

Page Properties:

• Start Spotify song on your media player. Designed for Amazon Alexa but you can change it from (tap_action:) part.
• Displays spotify artwork when music is being played.
• Spotify logo disappears while music is being played.
• Stop spotify music with double tap

You can find all the codes and png on :

Home Assistant Spotify Button · berkansezer77/home-assistant Wiki

[alnavasa (A)]

I am trying to reduce top or bottom spacing in Px,
Both not working, I am trying to bring up spacing of the top of the bottom group or reduce bottom margin of the header

square: false
columns: 1
type: grid
cards:
  - type: custom:mushroom-title-card
    title: Jaxxxx
  - square: false
    columns: 3
    type: grid
    cards:
      - type: custom:mushroom-light-card
        entity: light.xxxxxx
        fill_container: true
        secondary_info: none
        use_light_color: true
        show_brightness_control: true

      - type: custom:mushroom-light-card
        entity: light.xxxxx
        fill_container: true
        secondary_info: none
        use_light_color: true
        show_brightness_control: true

      - type: custom:mushroom-light-card
        entity: light.xxxxx
        fill_container: true
        use_light_color: false
        show_brightness_control: false
        secondary_info: none


      - type: custom:mushroom-light-card
        entity: light.pxxxa
        fill_container: true
        secondary_info: none
        use_light_color: true
        show_brightness_control: true
        show_color_control: false
        show_color_temp_control: true

      - type: custom:mushroom-light-card
        fill_container: false
        secondary_info: none
        use_light_color: true
        show_brightness_control: true
        entity: light.xxxxx
        icon: ''
      - type: custom:mushroom-light-card
        entity: light.xxxxxx
        fill_container: false
        secondary_info: none
        use_light_color: true
        show_brightness_control: true
        icon: ''
      - type: custom:mushroom-light-card
        entity: light.xxxxxxx
        fill_container: false
        secondary_info: none
        use_light_color: true
        show_brightness_control: true
        icon: ''
      - type: custom:mushroom-light-card
        entity: light.xxxxxx
        fill_container: false
        secondary_info: none
        use_light_color: true
        show_brightness_control: true
      - type: custom:mushroom-light-card
        entity: light.xxxxxx
        fill_container: false
        secondary_info: none
        use_light_color: true
        show_brightness_control: true
      - type: custom:mushroom-light-card
        entity: light.sxxxxxxx
        fill_container: false
        secondary_info: none
        use_light_color: true
        show_brightness_control: true
      - type: custom:mushroom-light-card
        entity: light.sonoff_10012209cd_2
        fill_container: false
        secondary_info: none
        use_light_color: true
        show_brightness_control: true
      - type: custom:mushroom-light-card
        entity: light.xxxxx
        fill_container: false
        secondary_info: none
        use_light_color: true
        show_brightness_control: true
      - type: custom:mushroom-light-card
        entity: light.xxxxx
        fill_container: false
        secondary_info: none
        use_light_color: true
        show_brightness_control: true
      - type: custom:mushroom-light-card
        entity: light.xxxxx
        fill_container: false
        secondary_info: none
        use_light_color: true
        show_brightness_control: true
      - type: custom:mushroom-light-card
        entity: light.xxxxxx
        fill_container: false
        secondary_info: none
        use_light_color: true
        show_brightness_control: true
  - type: custom:mushroom-title-card
    title: ''
    subtitle: Riego
    card_mod:
      style: |
        ha-card {
          margin-top: -50px;


        }
  - square: false
    columns: 5
    type: grid
    cards:
      - type: custom:mushroom-entity-card
        entity: switch.netro_zone_1
        layout: vertical
        tap_action:
          action: toggle
      - type: custom:mushroom-entity-card
        entity: switch.netro_zone_2
        layout: vertical
        tap_action:
          action: toggle
      - type: custom:mushroom-entity-card
        entity: switch.netro_zone_3
        layout: vertical
        tap_action:
          action: toggle
      - type: custom:mushroom-entity-card
        entity: switch.netro_zone_4
        layout: vertical
        tap_action:
          action: toggle
      - type: custom:mushroom-entity-card
        entity: switch.netro_zone_5
        layout: vertical
        tap_action:
          action: toggle

[alexandrechoske (Smart Chosk)]

@rhysb this is not about mushroom, but as you are a css expert, do you know how I can achiev this inverted rounded bordes, in a image (picture-elements)

Im designing an mobile version and wanted to do it in a picture-elements with a image

This is what I have so far, but did it on PS with help of some friends, since I dont know shit about PS I wanted a way to do it natively on HA.

[alexdelprete (Alessandro Del Prete)]

this Input Select card is perfect for the card that @uvjim created for Logitech Harmony dynamic activities here: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #1632 by uvjim

I’ll try to merge them as a mushroom excercise.

A big thank to both of you for sharing all this, I never thought I’d love mushrooms so much.

This thread is amazing…it’s a big box full of candies…and it never ends!

[jordi.tienda (Jordi)]

Hello, good afternoon,
First thank you for your great work.
Second, ask you how I can make the images of the people have a larger size and the color circle remains thin.
I have tried the following way, the image grows, but the color margin grows gradually and it is not pretty, I would like it to be like an alo, something fine

• type: custom:mushroom-chips-card
  chips:
  - type: conditional
  conditions:
  - entity: person.vero
  state: home
  chip:
  type: entity
  entity: person.vero
  content_info: none
  use_entity_picture: true
  mush-chip-height: 60px
  card_mod:
  style: |
  ha-card {
  –chip-background: rgba(var(–rgb-state-person-home), 0.4);
  margin-top: 5px;
  margin-bottom: 10px;
  –chip-height: 68px;
  }
  - type: conditional
  conditions:
  - entity: person.jordi
  state: home
  chip:
  type: entity
  entity: person.jordi
  content_info: none
  use_entity_picture: true
  mush-chip-height: 60px
  card_mod:
  style: |
  ha-card {
  –chip-background: rgba(var(–rgb-state-person-home), 0.9);
  margin-top: 5px;
  margin-bottom: 10px;
  –chip-height: 68px;
  }
  - type: conditional
  conditions:
  - entity: person.jan
  state: home
  chip:
  type: entity
  entity: person.jan
  content_info: none
  use_entity_picture: true
  mush-chip-height: 60px
  card_mod:
  style: |
  ha-card {
  –chip-background: rgba(var(–rgb-state-person-home), 0.4);
  margin-top: 5px;
  margin-bottom: 10px;
  –chip-height: 68px;
  }
  - type: conditional
  conditions:
  - entity: person.marti
  state: home
  chip:
  type: entity
  entity: person.marti
  content_info: none
  use_entity_picture: true
  mush-chip-height: 60px
  card_mod:
  style: |
  ha-card {
  –chip-background: rgba(var(–rgb-state-person-home), 0.4);
  margin-top: 5px;
  margin-bottom: 10px;
  –chip-height: 68px;
  }
  alignment: start
  card_mod:
  style: |
  ha-card {
  margin-left: 8px;
  }
  - type: horizontal-stack
  cards:
  - type: custom:mushroom-chips-card
  chips:
  - type: conditional
  conditions:
  - entity: person.vero
  state_not: home
  chip:
  type: entity
  entity: person.vero
  content_info: none
  use_entity_picture: true
  mush-chip-height: 60px
  card_mod:
  style: |
  ha-card {
  {% if is_state(‘person.vero’, ‘not_home’) %}
  –chip-background: rgba(var(–rgb-state-person-not-home), 0.4);
  {% elif is_state(‘person.vero’, ‘unknown’) %}
  –chip-background: rgba(var(–rgb-state-person-unknown), 0.4);
  {% else %}
  –chip-background: rgba(var(–rgb-state-person-zone), 0.4);
  {% endif %}
  margin-top: 5px;
  margin-bottom: 10px;
  –chip-height: 68px;
  }
  - type: conditional
  conditions:
  - entity: person.jord
  state_not: home
  chip:
  type: entity
  entity: person.jordi
  content_info: none
  use_entity_picture: true
  mush-chip-height: 60px
  card_mod:
  style: |
  ha-card {
  {% if is_state(‘person.jordi’, ‘not_home’) %}
  –chip-background: rgba(var(–rgb-state-person-not-home), 0.4);
  {% elif is_state(‘person.jordi’, ‘unknown’) %}
  –chip-background: rgba(var(–rgb-state-person-unknown), 0.4);
  {% else %}
  –chip-background: rgba(var(–rgb-state-person-zone), 0.4);
  {% endif %}
  margin-top: 5px;
  margin-bottom: 10px;
  –chip-height: 68px;
  }
  - type: conditional
  conditions:
  - entity: person.jan
  state_not: home
  chip:
  type: entity
  entity: person.jan
  content_info: none
  use_entity_picture: true
  mush-chip-height: 60px
  card_mod:
  style: |
  ha-card {
  {% if is_state(‘person.jan’, ‘not_home’) %}
  –chip-background: rgba(var(–rgb-state-person-not-home), 0.4);
  {% elif is_state(‘person.jan’, ‘unknown’) %}
  –chip-background: rgba(var(–rgb-state-person-unknown), 0.4);
  {% else %}
  –chip-background: rgba(var(–rgb-state-person-zone), 0.4);
  {% endif %}
  margin-top: 5px;
  margin-bottom: 10px;
  –chip-height: 68px;
  }
  - type: conditional
  conditions:
  - entity: person.marti
  state_not: home
  chip:
  type: entity
  entity: person.marti
  content_info: none
  use_entity_picture: true
  mush-chip-height: 100px
  card_mod:
  style: |
  ha-card {
  {% if is_state(‘person.marti’, ‘not_home’) %}
  –chip-background: rgba(var(–rgb-state-person-not-home), 0.4);
  {% elif is_state(‘person.marti’, ‘unknown’) %}
  –chip-background: rgba(var(–rgb-state-person-unknown), 0.4);
  {% else %}
  –chip-background: rgba(var(–rgb-state-person-zone), 0.4);
  {% endif %}
  margin-top: 5px;
  margin-bottom: 10px;
  –chip-height: 100px;
  }
  alignment: end
  card_mod:
  style: |
  ha-card {
  margin-right: 8px;
  }

[rhysb (Rhys)]

The Mushroom Title Card does not have any ‘ha-card’, so you can’t use ‘card-mod’ directly on it. Have a look at this post and --title-padding in particular:

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

If anyone needs to modify the Mushroom Title card, it can be done with card_mod like this: [Mushroom Title Card] type: custom:mod-card card: type: custom:mushroom-title-card title: I'd rather be picking subtitle: Mushrooms card_mod: style: mushroom-title-card$: | .title { --primary-text-color: rgb(var(--rgb-grey)); --title-font-size: 20px; --title-font-weight: lighter; } .subtitle { --secondary-text-color: rgb(var(--rgb-red)); …

[rhysb (Rhys)]

Is your vertical-stack-in-card up-to-date? This is how it looks for me with ‘default’ theme:

[rhysb (Rhys)]

Seems to be working correctly for me

((Christmas_Day - Current_Day + 1) / 365 * 100) = % days to Christmas from last Christmas

The +1 is a hack because now() gives days + time of partial day.

[alnavasa (A)]

I am not getting it to work:
I want to remove the space below “riego” subtitle to be smaller, I tried multiple padding values with no effect

type: custom:mushroom-title-card
title: ''
subtitle: Riego
card_mod:
  style:
    mushroom-title-card$: |

      .header {
        --title-padding: -68px -524px -88px;
      }

[rayzorben]

Hi, just trying this out for the first time. When installing I got a popup that said something about lovelace not being in storage mode and I had to add something somewhere. But the screen closed quickly and I couldn’t see what it said and I can’t get it back.

Any advice on what I put and where to get mushroom working would be appreciated.