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

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

[alnavasa (A)]

I am currently developing an energy card, based on stack, apex and mushroom cards.
Any input would be appreciated, I will share the code when done, I just don’t feel it’s properly designed yet.
(values are wrong)

[rhysb (Rhys)]

When posting code make sure you use formatted text option.

Post it again and we can have a look.

[rhysb (Rhys)]

No, you need to wrap it in mod-card as in the example. Like this:

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  subtitle: Riego
card_mod:
  style:
    mushroom-title-card$: |
      .header {
        --title-padding: 8px 24px 8px;
      }

[rhysb (Rhys)]

You could try something like this.

Picture Element Inverted Border:

type: picture-elements
elements:
  - type: state-icon
    tap_action:
      action: toggle
    entity: light.office_light
    icon: mdi:snail
    style:
      top: 15%
      left: 70%
image: /local/mushroom.png
card_mod:
  style: |
    ha-card {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      box-shadow: none;
      --ha-card-border-width: 0;
      margin-bottom: calc(-1 * var(--ha-card-border-radius, 12px));
      --paper-item-icon-active-color: rgb(var(--rgb-brown-color));
      --mdc-icon-size: 120%;
    }
    ha-card:after {
      content: "";
      position: absolute;
      background-color: var(--primary-background-color);
      height: calc(2 * var(--ha-card-border-radius, 12px));
      width: 100%;
      bottom: calc(-1 * var(--ha-card-border-radius, 12px));
      left: 0px;
      border-top-left-radius: var(--ha-card-border-radius, 12px);
      border-top-right-radius: var(--ha-card-border-radius, 12px);
      box-shadow: var(--ha-card-box-shadow) inset; 
    }