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

[berkans (Berkan Sezer)]

Here is a working example of restriciton card

This is when the door is locked

and when it is unlocked

type: custom:layout-card
square: false
columns: 1
cards:
  - type: custom:restriction-card
    restrictions:
      pin:
        code: 1234
    exemptions:
      - user: ianid
    card:
      type: custom:mushroom-template-card
      secondary: null
      primary: >
        {% if is_state('binary_sensor.ewelink_contactsensor',
        'on') %}
          Door is Open
        {% elif is_state('binary_sensor.ewelink_contactsensor',
        'off') %}
           Door is Locked
        {% else %}   

        {% endif %} 
      entity: entity.entity
      icon: null
      tap_action:
        action: call-service
        service: script.turn_on
        target:
          entity_id: script.house_door
      fill_container: false
      multiline_secondary: false
      layout: vertical
      picture: /local/png/dot2.png
      card_mod:
        style:
          mushroom-state-info$: |
            .primary {
              font-size: 16px !important;
              position: relative;
              overflow: visible !important;
              margin-top: 30px;  
              margin-left: -12px;       
              --primary-text-color: rgb(var(--rgb-white));  
              font-weight: bold;
              text-overflow: ellipsis;  
              text-align: left;   
              width: 130px;       
              background: rgb(0,100,182);              
              text-indent: 5px;      
              border-radius: 5px;
            }
            .secondary {
              font-size: 14px !important;
              position: static;
              text-align: center;   
              margin-left: -18px; 
              border-radius: 5px;
              margin-right: 2px;  
              background: rgb(0,100,182);     
              text-indent: 10px;   
              flex-wrap: wrap !important;
              --secondary-text-color: var(--amber-color); 
            } 
          mushroom-shape-avatar$: |
            .picture {            
              border-radius: 0px !important;    
              margin-top: 0px;       
              margin-left: 0px;           
              margin-bottom: auto;  
            }
          mushroom-shape-icon$: |
            .shape {
              position: relative;
              border-radius: 0px !important;
            }
          .: >
            ha-card {

            {% if
            is_state('binary_sensor.ewelink_contactsensor',
            'on') %}
              background:  url( '/local/png/live/door-open.png' ) no-repeat center 0px;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              background-blend-mode: hard-light;
              flex-wrap: wrap !important;
              position: relative;
            {% elif
            is_state('binary_sensor.ewelink_contactsensor',
            'off') %}
                background:  url( '/local/png/live/door-closed4.png' ) no-repeat center 0px;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                background-color: rgba(150,58,27, 0.9);
                position: relative;
               {% else %}  
                background:  url( '/local/png/11.png' ) no-repeat center 0px;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                background-color: #1a1a2a;, 1.25);
                position: relative;
                } 
              {% endif %} 
              --secondary-text-color: grey;
              box-shadow: none !important;
              background-color: rgba(250,130,43, 0.9); 
              height: 170px !important;      
            }  

            :host {
              --mush-icon-size: 70px;
            }       
layout_type: custom:vertical-layout
  

[j.otte]

hi,
how can we this make work?

type: custom:mushroom-template-card
primary: ''
icon: mdi:kettle-steam
icon_color: |-
  {% if is_state('switch.keuken_boiler', 'on') %}
   red
  {% endif %}
entity: switch.keuken_boiler
fill_container: true
layout: vertical
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-state-icon {
        {{'animation: boil 500ms infinite;' if is_state(config.entity, 'on') }}
      }
      @keyframes boil {
        0%, 100% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        10% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); clip-path: polygon(0 0, 66% 10%, 67% 30%, 88% 52%, 100% 100%, 0 100%); }
        20% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        30% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        40% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        50% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        60% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        70% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        80% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
        90% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
      }

the boil is not shaking

[weemaba999 (Bart Weemaels)]

Thanks a lot @berkans ! Works like a charm. Nice cards btw !

[dimitri.landerloos]

Cant have ha-state-icon under mushroom-shape-icon$: | anymore.

Just do it like this instead:

card_mod:
  style: |
    ha-state-icon {
      {{'animation: boil 500ms infinite;' if is_state(config.entity, 'on') }}
    }
    @keyframes boil {
      0%, 100% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
      10% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); clip-path: polygon(0 0, 66% 10%, 67% 30%, 88% 52%, 100% 100%, 0 100%); }
      20% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
      30% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
      40% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
      50% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
      60% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
      70% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
      80% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
      90% { transform: translate({{ range(-20, 20) | random / 10 }}px, {{ range(-20, 20) | random / 10 }}px) rotate({{ range(-15, 15) | random }}deg); }
    }

[j.otte]

its work thank you

[paddy0174 (Patrick)]

Have you tried to read the “new” guide from Dimitri? He reworked the guides from @rhysb to take care of recent updates in Mushromm and HA core.

See here, maybe this helps a little further with your problem.

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

PS: between us, the idea posting in the other thread and then delete it, my full respect! Really, great idea and thanks for understanding. And you forced me to write an answer here! Really, my full respect!

[madlan]

Hi Patrick,

Thanks for replying - Here’s the card mod change I’ve made, seems to work great now.

card_mod:
  style: |
    ha-card {

      /* Set padding of card */
      padding: 8px 8px 12px;

      /* Move card up to match header card */
      margin-top: -8px;

      /* Styling of card background */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
      border-radius: var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px) 0px 0px ;

      transition: all 0s;

       /* Make card sticky at top of page */
      :host {
      position: sticky;
      z-index: 9;
      top: 0px;
      }
      
    }

[dimitri.landerloos]

Just me being picky but i would do this to fix your syntax:

card_mod:
  style: |
    ha-card {
      /* Set padding of card */
      padding: 8px 8px 12px;

      /* Move card up to match header card */
      margin-top: -8px;

      /* Styling of card background */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
      border-radius: var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px) 0px 0px ;

      transition: all 0s;
    }
    /* Make card sticky at top of page */
    :host {
      position: sticky;
      z-index: 9;
      top: 0px;
    }

[kbrown01]

Just to be sure I am understanding mushroom correctly, I can only assume that anything in actions/tap actions cannot be templated variables. Simplified example:

decluttering_templates:
  mode_chip:
    card:
      type: custom:decluttering-card
      template: mode_chip_settings
      variables:
        - ip: '{{state_attr(''sensor.limitless_led_aliases'',''wifi_static_ip'')}}'
        - device_id: >-
            {{state_attr('sensor.limitless_led_aliases','group_id_aliases')[state_attr('[[entity]]','friendly_name')][1]}}
        - remote_type: >-
            {{state_attr('sensor.limitless_led_aliases','group_id_aliases')[state_attr('[[entity]]','friendly_name')][0]}}
        - group_id: >-
            {{state_attr('sensor.limitless_led_aliases','group_id_aliases')[state_attr('[[entity]]','friendly_name')][2]}}
        - button: '[[button]]'
  mode_chip_settings:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          entity: '[[entity]]'
          icon: mdi:numeric-[[button]]
          content_info: none
          tap_action:
            action: call-service
            service: script.limitlessled_set_mode
            service_data:
              ip: '[[ip]]'
              device_id: '[[device_id]]'
              remote_type: '[[remote_type]]'
              group_id: '[[group_id]]'
              mode: '[[button]]'
  mode_chip_test:
    card:
      type: markdown
      content: '[[ip]],  [[device_id]],  [[remote_type]],  [[group_id]],  [[button]]'
views:
  - title: Home
    cards:
      - type: custom:decluttering-card
        template: mode_chip
        variables:
          - entity: light.pergola_leds
          - button: 1
title: Regular Playground

From the above, I set several variables using templates in the decluttering template “mode_chip”.
Now if I use those variables to fill into a mushroom card inside a second decluttering template “mode_chip_settings” it does not work at all except for the icon populated from button.

Image of card:

Clicking results in this error:

Client error. Url: http://{{state_attr('sensor.limitless_led_aliases','wifi_static_ip')}}/gateways/{{state_attr('sensor.limitless_led_aliases','group_id_aliases')[state_attr('light.pergola_leds','friendly_name')][1]}}/{{state_attr('sensor.limitless_led_aliases','group_id_aliases')[state_attr('light.pergola_leds','friendly_name')][0]}}/{{state_attr('sensor.limitless_led_aliases','group_id_aliases')[state_attr('light.pergola_leds','friendly_name')][2]}}?blockOnQueue=true. Error: Cannot connect to host {{state_attr('sensor.limitless_led_aliases','wifi_static_ip')}}:80 ssl:default [Name or service not known]

Which is totally obvious that the strings that are templates are passed in and not the result of the templates. It is passiing in the string that represents the template but it does not get executed because mushroom does not allow templates for those fields.

However if I pass those exact same variables into markdown to be sure I got them correct, they work just fine. All I do is change the second template in the above example to “mode_chip_test”:

This shows that when used in markdown, the templated values are rendered, but used in a mushroom card inside tap_action, the templates are not executed.

Although maybe they would be if I used [[ … ]] and not {{ …}} as I would note that the error shows that [[entity]] was replaced. I just do not see how to execute it all.

I know I can pass in a simple string, because the colored dots in the image below use this:

      type: custom:mushroom-chips-card
      chips:
        - type: entity
          entity: '[[entity]]'
          icon: none
          content_info: none
          tap_action:
            action: call-service
            service: light.turn_on
            data:
              transition: 0
              brightness: 255
              color_name: '[[colorname]]'
            target:
              entity_id: '[[entity]]'

So the “coloname” and “entity” passed in as simple strings work.

Is this correct?
Workaround ideas?

I have seen card-templater mentioned, but that does not work as far as I can see:

  mode_chip:
    card:
      type: custom:card-templater
      card:
        type: custom:decluttering-card
        template: mode_chip_test
        variables:
          - ip_template: '{{state_attr(''sensor.limitless_led_aliases'',''wifi_static_ip'')}}'
          - device_id_template: >-
              {{state_attr('sensor.limitless_led_aliases','group_id_aliases')[state_attr('[[entity]]','friendly_name')][1]}}
          - remote_type_template: >-
              {{state_attr('sensor.limitless_led_aliases','group_id_aliases')[state_attr('[[entity]]','friendly_name')][0]}}
          - group_id_template: >-
              {{state_attr('sensor.limitless_led_aliases','group_id_aliases')[state_attr('[[entity]]','friendly_name')][2]}}
          - button: '[[button]]'

Results in this:

And I have no idea where the “-” comes from.

Note: I already use button-card templates for this and it is all fine, was just hoping for a mushroom-ized solution to make it easier to apply my card_mod animations.

Ultimately I was trying to make this all work 100% mushroom with nice animations. What is not done are the ten buttons in each row that set modes for the lights and control the speed of those lights:

[oli-19]

Hi I hope you could maybe help me with my problem. I want the washing machine to not move at all (this works but I dont know if this ist the right way) and only the Laundry part to rotate if a input boolean entity is true. I dont know how to accomplish that because now the laundy part is just not there anymore after I added the if state to the automation

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: input_boolean.waschmaschienen_helfer
    icon: mdi:washing-machine
    icon_color: orange
    primary: 'Washing Machine #2'
    tap_action:
      action: toggle
    card_mod:
      style: |
          ha-state-icon {

            transform-origin: 50% 58%;
            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);

  - type: custom:mushroom-template-card
    entity: input_boolean.waschmaschienen_helfer
    icon: mdi:washing-machine
    icon_color: orange
    tap_action:
      action: toggle
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            background: none !important;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
            border: none;
          }
          ha-state-icon {
            {{ 'animation: spin 1s linear infinite;' if is_state(input_boolean.waschmaschienen_helfer, 'on') }}
            transform-origin: 50% 58%;
            clip-path: circle(21.7% at 50% 58%);
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Thanks

[dimitri.landerloos]

You are just missing quotes around your entity name:

{{ 'animation: spin 1s linear infinite;' if is_state('input_boolean.waschmaschienen_helfer', 'on') }}

[oli-19]

Omg Thank you very much what a stupid misstake haha, have a nice day

[wolf99]

Hi,

I cannot seem to get Mushroom installed properly somehow

Im just starting out with Home Assistant
I have a Home Assistant Green with update to 2023.10.1.
I have integrated one Zigbee based sensor and now I try to add Mushroom before I go any further.
I installed HACs, which seems to be working OK.
Then using HACS I installed Mushroom.
While doing that HACs said:

Since you are not using Lovelace in storage moce you need to manually add the resources with these settings:

url: /hacsfiles/lovelace-mushroom/mushroom.js
type: module

However I dont know where I should put that… So I did not do that at that point.
Researching a lot on Google, it seems like as I have a very recent version of HA, then it should be already using lovelace in storage mode anyway? Nevertheless I added the following to my configuration.yaml.

lovelace:
  mode: storage

Then I proceded with the installation of mushroom.
After this I restarted HA and cleared my cache.
When now editing a new dashboard and trying to add cards, most of the mushroom cards do not show up properly, they are blank in the dashboard card picker and show “No matching entities found” when I click on any of them

In an effort to fix this I tried installing Mushroom themes (and restart and clear cache)
But with no luck.
From reading some on this thread I have checked in /.storage/lovelace_resources and found that the URL for mushroom is already correct there, like so:

        "url": "/hacsfiles/lovelace-mushroom/mushroom.js?hacstag=444350375310",
        "type": "module"

I have tried adding some of the default HA cards, which seems to work just fine (I can add HA default guage and sensor cards for the entities from my sensor).

I tried setting my profile to Advanced mode (and restart and clear cache). But again no luck.

What am I doing wrong?

Do I need to do something more for storage mode of Lovelace?
Do I need to add more configuration somewhere?

My full configuration.yaml:

# Loads default set of integrations. Do not remove.
default_config:

# Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes

automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml

homeassistant:
  customize:
    zone.home:
      radius: 20

lovelace:
  mode: storage

[painky (Lars G.)]

Hello experts with beautiful mushroom cards, iam starting with HA and mushroom. I try to create a room card like this:

I tried many different templates from this thread but never the borders were removed. I cant find the failure. Have anyone an idea?

Here my code:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-template-card
    primary: Foyer
    secondary: Landing
    icon: mdi:door
    layout: horizontal
    multiline_secondary: false
    tap_action:
      action: navigate
      navigation_path: foyer
    icon_color: deep-purple
    hold_action:
      action: none
    double_tap_action:
      action: none
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: 0;
      }
    alignment: end
    chips:
      - type: template
        entity: binary_sensor.eg_sensoren_kontakt_status_garagentur_2
        icon: |-
          {% set state=states(entity) %}
          {% if state=='Open' %}
          mdi:door-open
          {% elif state=='Closed' %}
          mdi:door-closed
          {% else %}
          mdi:door
          {% endif %}
        tap_action:
          action: more-info
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='Open' %}
          red
          {% elif state=='Closed' %}
          green
          {% else %}
          grey
          {% endif %}
style: |
  ha-card {
    height: 102px;
  }

Thank you in advance

[nodz (Nelson Oliveira)]

Can you please let me know how did you do the music tab? Would you share your code?

[Roflcopterer]

It’s just an iframe showing the Squeezebox server (LMS) with the material skin.

[nodz (Nelson Oliveira)]

thank you very much. I guess I’ll start creating something similar but for all the media players

[hsec]

@painky

I tried many different templates from this thread but never the borders were removed. I cant find the failure. Have anyone an idea?

Try installing UI-Lovelace-Minimalist from the HACS.

[hsec]

@wolf99

When now editing a new dashboard and trying to add cards, most of the mushroom cards do not show up properly, they are blank in the dashboard card picker and show “No matching entities found” when I click on any of them

And are you sure you have an entity for that cart type?
I don’t have an humidifier, so the card shows like yours.

[painky (Lars G.)]

I installed it but no success.