Mushroom Cards Card Mod Styling/Config Guide

Community Guides
, ,
1399

take a look at my example above, same principle.

1 Like
1400

I’ll be honest I am not the best person to ask. I can’t use the dev console. is the mushroom card inside layout card?
@LiQuid_cOOled is much better at answering this question !

1401

It works!!!

      card_mod:
        style: 
          mushroom-state-info$: |
            .container {
              --card-primary-color: blue;
              --card-secondary-color: orange;
            }
          .: |
            ha-state-icon {
              color: orange;
            }

Thank you so much

Now I have to work on how to change the color based on when the cover is opened or closed :slight_smile:

1402

sorry, I also added the animation, but is it possible to make the animation only if I pressed the button and only if the cover is moving?

          mushroom-cover-buttons-control$:
            mushroom-button:nth-child(1)$: |
              .button {
                animation: ping 2s infinite;
                --card-mod-icon-color: green;
              }
              @keyframes ping {
                  0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
                  70% {box-shadow: 0 0 0 10px transparent;}
                  100% {box-shadow: 0 0 0 0 transparent;}
              }

If so, what code should I enter?

Thank you very much.

i found it:

    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          {% if is_state('cover.xxxxxx', 'opening') %}
            animation: ping 2s infinite;
          {% endif %}
        }
        @keyframes ping {
            0% {box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7);}
            70% {box-shadow: 0 0 0 10px transparent;}
            100% {box-shadow: 0 0 0 0 transparent;}
        }

tnks

1 Like
1403

So with the latest version of Mushrooms cards, it breaks card mod. I get changes happen. I have a mushroom template and used this code to allow the primary line to multiline (wrap):

card_mod:
  style:
    mushroom-state-info$: |
      span.primary {
      white-space: normal !important;
      }

Mushroom now ignores card mod and I get this:
MushroomCardmod

How to address this now? TIA!

1404

Check the release notes. All info in there on the changes to template card. including using a legacy card.

1405

So only fix is to revert to legacy card? I didn’t see any other information on formatting with the release notes other than breaking card mod.

1 Like
1406

Without changing your card-mod targetting, yes. Mushroom cards will never release information about such changes apart from saying that an update will break card-mod, like these release notes do.

In this case the element is now ha-tile-info, not mushroom-state-info. You may need to adjust other elements as well. Pretty much whatever works for card-mod tile should adapt to the updated mushroom template since it is using tile now.

card_mod:
  style:
    ha-state-info$: |
      span.primary {
      white-space: normal !important;
      }
1 Like
1407

Release Notes

Breaking changes

:artist_palette: Style breaking changes

The card style is now aligned with the Tile card.

  • Mushroom theme variables and colors are no longer applied, since the card now uses the same components and styles as the Tile card.
  • Icons will only display a background when an action is assigned to them, making it clearer when they are interactive (2025.3: View those headers! - Home Assistant).

:hammer_and_wrench: Breaking Changes for Card Mod Users

Due to the Template Card redesign, its internal structure has changed. This will break existing Card Mod customizations.

:eyes: Backward compatibility

A Legacy Template Card is available to preserve the old behavior and style :

  • the UI editor will allow you to revert to legacy card in one click
  • in yaml, you only have to replace custom:mushroom-template-card by custom:mushroom-legacy-template-card
2 Likes
How to increase the size of Mushroom icon
🔹 Card-mod - Add css styles to any lovelace card
Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 2)
Animation for badge icon
Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 2)
Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 2)
Mushroom light slider color change help
1408

An example for adjusting the icon and info for a Mushroom Template Card

type: custom:mushroom-template-card
primary: Example
color: limegreen
features_position: bottom
icon: mdi:mushroom
card_mod:
  style: 
    ha-tile-info$: |
      .primary {
        color: limegreen !important;
        }   
    ha-tile-icon$: |
      .container {
        background: grey !important;
        border: 1px solid white;
        }

image
image945×144 3.37 KB

1 Like
1409

hi that its not work,
I can’t get the text not under the icon

how can whe that maybe fix it?

type: custom:mushroom-legacy-template-card
icon: mdi:car
primary: Lader
secondary: >-


  {{ states('sensor.oplader_audi_watt') ~' W' if is_state(entity, 'on') }} |
  {{states("sensor.oplader_audi_kwh_per_dag") }} Kwh  
                                                                    
tap_action:
  action: toggle
entity: switch.oplader_auto
multiline_secondary: true
color: "{{ 'green' if is_state(entity, 'on') else 'disabled' }}"
vertical: true
fill_container: true
features_position: bottom
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: clip 1s linear infinite;' if is_state(config.entity, 'on') }}
        transform-origin: 29% 88%;
      }
      @keyframes clip {
        0% {
          clip-path: inset(50% 0 0 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
        }
      }
      .shape {
        {{ '--shape-animation: ping 2s infinite;' if is_state(config.entity, 'on') }}
        transform-origin: 29% 88%;
      }
      @keyframes ping {
          0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-green), 0.7); }
          100% { box-shadow: 0 0 5px 15px transparent; }
        }

image
image166×113 2.97 KB

1410

Did you review the errors at the bottom of edit mode?

image
image992×191 11.5 KB

  • color: is now icon_color:
  • vertical: true is now layout: vertical
  • features_position: bottom is no longer an option in Legacy mode

Start with this…

type: custom:mushroom-legacy-template-card
icon: mdi:car
primary: Lader
secondary: >-
  {{ states('sensor.oplader_audi_watt') ~' W' if is_state(entity, 'on') }} |
  {{states("sensor.oplader_audi_kwh_per_dag") }} Kwh  
                                                   
tap_action:
  action: toggle
entity: switch.oplader_auto
multiline_secondary: true
fill_container: true
icon_color: "{{ 'green' if is_state(entity, 'on') else 'disabled' }}"
layout: vertical
1411

thank you
this code its now works,

type: custom:mushroom-legacy-template-card
icon: mdi:car
primary: Lader
secondary: >-


  {{ states('sensor.oplader_audi_watt') ~' W' if is_state(entity, 'on') }} |
  {{states("sensor.oplader_audi_kwh_per_dag") }} Kwh  
                                                                    
tap_action:
  action: toggle
entity: switch.oplader_auto
multiline_secondary: true
icon_color: "{{ 'green' if is_state(entity, 'on') else 'disabled' }}"
layout: vertical
fill_container: true

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: clip 1s linear infinite;' if is_state(config.entity, 'on') }}
        transform-origin: 29% 88%;
      }
      @keyframes clip {
        0% {
          clip-path: inset(50% 0 0 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
        }
      }
      .shape {
        {{ '--shape-animation: ping 2s infinite;' if is_state(config.entity, 'on') }}
        transform-origin: 29% 88%;
      }
      @keyframes ping {
          0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-green), 0.7); }
          100% { box-shadow: 0 0 5px 15px transparent; }
        }
1412

You actually want to use this :arrow_down: to get the second animation working

card_mod:
  style: 
     mushroom-shape-icon$: |    
      .shape {
        {{ '--shape-animation: ping 2s infinite;' if is_state(config.entity, 'on') }}
        transform-origin: 29% 88%;
      }
      @keyframes ping {
          0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-green), 0.7); }
          100% { box-shadow: 0 0 5px 15px transparent; }
        }
     .: |
      ha-state-icon {
        {{ 'animation: clip 1s linear infinite;' if is_state(config.entity, 'on') }}
        transform-origin: 29% 88%;
        }
      @keyframes clip {
        0% {
          clip-path: inset(50% 0 0 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
        }
1413

Is this also due to the update? Otherwise, I still have a lot of work to do. Thank you for your attention and your quick help. This code fixes the animation.

1414

No that was a change that occurred awhile ago.

1415

oke, from ha-icon to ha-state-icon

1416

Hi,

can anyone help me and let me know how do i change the icon size with the updated mushroom card?

type: custom:mushroom-template-card
entity: light.wohnzimmer
icon: mdi:sofa
primary: Wohnzimmer
secondary: >-
  {{ states('sensor.wohnzimmer_raumthermostat_temperature')}}°C • {{
  states('sensor.wohnzimmer_raumthermostat_humidity')}}%
tap_action:
  action: navigate
  navigation_path: "#wohnzimmer"
multiline_secondary: true
color: |
  {% if is_state(entity, 'on') %}
    orange
  {% else %}  
    grey
  {% endif %}
features_position: bottom
card_mod:
  style: |
    ha-card {
      --icon-size: 76px;
      --ha-card-border-width: 0;
      margin-top: -20px !important;
      margin-left: -18px !important;
    }

i already tried:

card_mod:
  style: |
    ha-tile-icon {
      --mdc-icon-size: 40px !important;
    }

but this is only changing the icon inside the shadow

1 Like
1417

Try this out

card_mod:
  style: 
    ha-tile-icon$: |
      .container {
        background: grey !important;
        border: 1px solid white;
        width: 76px !important;
        height: 76px !important;
        border-radius: 50% !important;
          }   
    .: |
       ha-tile-icon {
         --mdc-icon-size: 40px !important;
          }
       ha-card {
         border: none;
         margin-top: -20px !important;
         margin-left: -18px !important;
          }
2 Likes
1418

hmm, has this always been faulty, or is it the update…

type: custom:mushroom-chips-card
chips:
  - type: entity
    card_mod:
      style: |
        ha-card {
          --chip-background:
            {{'var(--alert-color)' if is_state('binary_sensor.oprit_person_detected','on') else
               'var(--state-inactive-color)'}};
        }

I do believe this worked, really.
didnt expect the update to break this (as it was for mushroom-template ?)

🔹 Card-mod - Add css styles to any lovelace card