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

changeqsq · December 20, 2023, 9:30am

How can I replace an icon with a local image?

LiQuid_cOOled · December 20, 2023, 9:40am

Can you share the code you are working with?

Legnava89 · December 20, 2023, 9:43am

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

Intro_Verti · December 20, 2023, 4:04pm

You can make these changes via customize.yaml

Example:

quinquelhas · December 20, 2023, 5:32pm

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 · December 20, 2023, 5:37pm

Take a look at this section in the guide

Mushroom Cards Card Mod Styling/Config Guide

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 · December 20, 2023, 6:04pm

Mushroom Cards Card Mod Styling/Config Guide

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 · December 20, 2023, 6:17pm

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 · December 20, 2023, 6:33pm

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 · December 20, 2023, 6:45pm

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 · December 20, 2023, 7:04pm

Thanks Dimitri… its worked

How we know to use this configurations?

dimitri.landerloos · December 20, 2023, 7:09pm

Sorry dont understand your question?

quinquelhas · December 20, 2023, 7:14pm

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 · December 20, 2023, 7:25pm

Thanks, this works.

muktheo · December 20, 2023, 11:42pm

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).
ezgif-5-be7f780b1a
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 · December 21, 2023, 1:08am

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

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.
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.
The amount of card mod being used. Will start to get slower the more card mod is applied to cards.

muktheo · December 21, 2023, 2:33am

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

alpacalypse · December 21, 2023, 7:04pm

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 · December 21, 2023, 8:47pm

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 · December 21, 2023, 9:10pm

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