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

[LiQuid_cOOled]

Can you share the code you are working with?

[Legnava89 (Dušan)]

@LiQuid_cOOled Thank you very much for your help. Everything works great. I wish you a wonderful Christmas.

[Intro_Verti]

You can make these changes via customize.yaml

Example:

[quinquelhas (Marco)]

Hello,

@dimitri.landerloos

I have changed the size of the buttons, in cover card, i saw your tutorial , but the problem is the slider i can’t change the size…I already tried slider-track-background but doesn’t work.
Do you known how to do it?

      mushroom-button:nth-child(1):
        $: |
          ha-icon {
            --card-mod-icon-color: #6A6A6A;
          }
          .button {
            background: #E2E2E2!important;
            width: 70px!important;
          }

[dimitri.landerloos]

Take a look at this section in the guide

@dimitri.landerloos

Change Size

There isnt enough space to make the slider any bigger so if that is your aim i would recommend making the box that they live in bigger as well. like the below. of course this doesnt apply if you are making the buttons smaller. !important is required.

card_mod:
  style:
    mushroom-cover-position-control$:
      mushroom-slider$: |
        .slider {
          width: 200px !important;
          height: 200px !important;
        }
    mushroom-cover-tilt-position-control$:
      mushroom-slider$: |
        .slider {
          width: 200px !important;
          height: 200px !important;
        }
    .: |
      mushroom-cover-position-control {
        height: 200px;
      }
      mushroom-cover-tilt-position-control {
        height: 200px;
      }

Clearly i need to change wording slightly as i am saying it doesnt apply when making buttons smaller, but i mean it doesnt apply when making the slider smaller.

[quinquelhas (Marco)]

@dimitri.landerloos

mushroom-cover-tilt-position-control$:
      mushroom-slider$: |
        .slider {
          width: 200px !important;
          height: 200px !important;
        }

Didn’t work

mushroom-cover-position-control$: |
      mushroom-slider {
        {% if states ('cover.shellyswitch25_68c63af92f48') == 'open'%}
          --slider-bg-color: #89DF83!important;
        {% else %}
          --slider-bg-color: #FF483F!important;
        {% endif %}
        {% if states ('cover.shellyswitch25_68c63af92f48') == 'opening'%}
          --slider-bg-color: #89DF83!important;
        {% endif %}
        {% if state_attr ('cover.shellyswitch25_68c63af92f48', 'current_position') == 100 %}
          --slider-color: #89DF83!important;
        {% else %}
          --slider-color: #B9B7B7!important;
        {% endif %}
      mushroom-slider$: |
        .slider {
          width: 120px!important;
        }

[Poelleke]

is it possible to make a mushroom select card change its icon and color with each state?

for example:
if my ‘home_status = home’
icon: mdi:home account
icon_color: green

and if ‘home_status = away’
icon: mdi:home-export-outline
icon_color: red

[dimitri.landerloos]

Post your full card mod section. But the indentation is clearly wrong. You have 2 | in a row. 1 for mushroom-cover-position-control$: | and then 1 for mushroom-slider$: |

card_mod:
  style:
    mushroom-cover-position-control$: |
      mushroom-slider$: |
        .slider {
          width: 120px;
        }

Not allowed. 2 | in a row.

card_mod:
  style:
    mushroom-cover-position-control$: 
      mushroom-slider$: |
        .slider {
          width: 120px;
        }

Allowed.

This will probably also do it on its own:

card_mod:
  style:
    mushroom-cover-position-control$:
      mushroom-slider$: |
        .slider {
          width: 120px !important;
          {% if states (config.entity) == 'open'%}
            --bg-color: #89DF83 !important;
          {% else %}
            --bg-color: #FF483F !important;
          {% endif %}
          {% if states (config.entity) == 'opening'%}
            --bg-color: #89DF83 !important;
          {% endif %}
          {% if state_attr (config.entity, 'current_position') == 100 %}
            --main-color: #89DF83 !important;
          {% else %}
            --main-color: #B9B7B7 !important;
          {% endif %}          
        }

[dimitri.landerloos]

Yes with card mod. Just an example so replace with your entity and your entity states.

type: custom:mushroom-select-card
entity: input_select.speaker_group_dropdown
card_mod:
  style: |
    mushroom-shape-icon {
      {% if states(config.entity) == 'Upstairs Speakers' %}
        --card-mod-icon: mdi:home-account;
        --icon-color: rgb(var(--rgb-red)) !important;
        --shape-color: rgba(var(--rgb-red), 0.2) !important;
      {% elif states(config.entity) == 'Downstairs Speakers' %}
        --card-mod-icon: mdi:home-export-outline;
        --icon-color: rgb(var(--rgb-green)) !important;
        --shape-color: rgba(var(--rgb-green), 0.2) !important;
      {% else %}
        --card-mod-icon: mdi:bug;
        --icon-color: rgb(var(--rgb-blue)) !important;
        --shape-color: rgba(var(--rgb-blue), 0.2);
      {% endif %}
    }

[quinquelhas (Marco)]

Thanks Dimitri… its worked

How we know to use this configurations?

[dimitri.landerloos]

@quinquelhas

How we know to use this configurations?

Sorry dont understand your question?

[quinquelhas (Marco)]

How you know do you have put muhsroom-sliders$: ?
After you have put --bg-color: and main-color:
How i can know that? Developer Tools?

Thanks

[Poelleke]

Thanks, this works.

[muktheo]

Hello, can anyone please help me to find and address the problem in my mushroom chip card?
the problem is: everytime I go back to my main pages, my mush chip card (in the room card) is something like “breathing/dancing” (GIF attached).

This is my code looks like:

      type: custom:mushroom-chips-card
      alignment: start
      card_mod:
        style: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: 3px;
          }
      chips:
        - type: template
          entity: light.lampu_toilet
          tap_action:
            action: toggle
          icon: |-
            {% if is_state("light.lampu_toilet", 'on') %}
              mdi:lightbulb-on
            {% else %}
              mdi:lightbulb
            {% endif %}
          card_mod:
            style: |
              {% if is_state('light.lampu_toilet', 'on') %}
              .content {
                animation: boing 2s ease infinite;
                transform-origin: 50% 90%;
              }
              {% endif %}
              @keyframes boing {
                0% { transform: scale3d(1, 1, 1); }
                7% { transform: scale3d(1.25, 0.75, 1); }
                10% { transform: scale3d(0.75, 1.25, 1); }
                12% { transform: scale3d(1.15, 0.85, 1); }
                16% { transform: scale3d(0.95, 1.05, 1); }
                19% { transform: scale3d(1.05, 0.95, 1); }
                25% { transform: scale3d(1, 1, 1); }
              }
              ha-card {            
                justify-content: center;
                width: var(--chip-height) !important;
                --chip-icon-size: 20px;
                --chip-height: 10px;
                padding: 8px!important;
                border-radius: 100%!important;
                --chip-background: {{ 'rgba(243, 182, 100, 0.5)' if is_state('light.lampu_toilet', 'on') else 'rgba(169, 169, 169, 0.5)' }}
              }    
        - type: conditional
          conditions:
            - entity: binary_sensor.motion_sensor_toilet_occupancy
              state: 'on'
          chip:
            type: template
            icon_color: disabled
            icon: mdi:motion-sensor
          card_mod:
            style: |
              ha-icon {
                --icon-animation: clip 2s linear infinite;
              }
              @keyframes clip {
                50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
              }
              .shape {
                --shape-animation: motion 2s linear infinite;
              }
              @keyframes motion {
                0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
                50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
              }
              ha-card {            
                justify-content: center;
                width: var(--chip-height) !important;
                --chip-icon-size: 17px;
                --chip-height: 10px;
                padding: 8px!important;
                border-radius: 100%!important;
                --chip-background: rgba(199, 0, 57, 0.5)
              }
        - type: conditional
          conditions:
            - entity: binary_sensor.pintu_toilet_contact
              state: 'on'
          chip:
            type: template
            icon: mdi:door
          card_mod:
            style: |
              ha-icon {
                --icon-animation: open 6s ease-in-out infinite;
                transform-origin: 30%;
              }
              @keyframes open {
                0%, 66% { transform: rotateY(0deg); }
                33% { transform: rotateY(-120deg); }
              }
              .shape {
                perspective: 45px;
              }

[dimitri.landerloos]

Common when using card mod.

You will likely need to learn to live with it.

The reason for it is that all assets are loaded. So custom cards and such (this includes card mod itself) but only then after this card mod code is applied. So this will always happen after.

How slow or quick this happens depends on a few things (in order of highest impact that i have observed).

1. The speed of your connection to your local HA instance. You will very likely notice this taking longer if you are on a slow cellular connection for example.
2. The processing speed your device (the viewing device, not your homeassistant device). Will take longer to load on lets say a 10 year old smartphone vs your desktop computer. This is because most CSS (what card mod modifies) is processed on the viewing device, not the server it is hosted on.
3. The amount of card mod being used. Will start to get slower the more card mod is applied to cards.

[muktheo]

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

[alpacalypse]

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

After

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

[ktakyi]

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?

[Legnava89 (Dušan)]

@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); }        
       }

[dimitri.landerloos]

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); }        
      }