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

[j.otte]

what do i wrong here? the loading animatie its nog working

type: custom:mushroom-template-card
icon: mdi:battery
icon_color: |-
  {% if is_state('switch.oplader_mama', 'on') %}
   green
  {% endif %}
primary: ''
secondary: Mama
tap_action:
  action: toggle
layout: vertical
fill_container: true
entity: switch.oplader_mama
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: charge 3s linear infinite;' if is_state(config.entity, 'on') }}
      }
      @keyframes charge {
        0%, 80% { clip-path: inset(0 0 0 0); }
        10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
        20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
        30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
        40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
        50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
        60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
        70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
      }

[j.otte]

i have the problem,

card_mod:
  style: |
    ha-state-icon {
        {{'animation: charge 3s linear infinite;' if is_state(config.entity, 'on') }}
      }
      @keyframes charge {
        0%, 80% { clip-path: inset(0 0 0 0); }
        10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
        20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
        30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
        40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
        50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
        60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
        70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
      }

[FLaKas (Jorge)]

Hello @rhysb , about the animated icons I can’t see them animated. I put the code, for example:

type: custom:mushroom-template-card
icon: mdi:shower-head
icon_color: light-blue
primary: Shower
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: clip 0.7s ease-out infinite;
      }
      @keyframes clip {
        0% {clip-path: inset(0 0 45% 0); }
        100% { clip-path: inset(0 0 0 0);

I’ve already reinstalled mushroom and card-mod, where should I look?

[hsec]

Do it like this:

type: custom:mushroom-template-card
icon: mdi:shower-head
icon_color: light-blue
primary: Shower
card_mod:
  style: |-
    ha-state-icon {
        animation: clip 0.7s ease-out infinite;
      }
      @keyframes clip {
        0% {clip-path: inset(0 0 45% 0); }
        100% { clip-path: inset(0 0 0 0);

[FLaKas (Jorge)]

Thank you so much!

[dimitri.landerloos]

Also i have updated all of the animations by @rhysb recently here:

Mushroom Cards - Build a beautiful dashboard easily

Hi @rhysb, i have made a general mushroom - card-mod styling guide that i have posted here. i have linked to your resource on animations from it because it is great. however since it was made a few things have changed with the way that animations are applied and we get a bunch of questions regarding it right now because people want to use your animations. so i hope you dont mind that i have gone through and updated each of your animations below and will be posting them as a reply here. i will …

[tempus2016 (Tempus)]

Anyone know what could be causing this with the mushroom shadow theme?

The default HA theme and default mushroom theme work fine and show the borders exactly like the other cards. When I choose mushroom shadow theme, the swipe card has a weird background.

[dimitri.landerloos]

i had this issue as well.

its fixed if you put your swipe card inside of a stack in card. the swipe still works as expected if you do

[tempus2016 (Tempus)]

Looks like it’s due to

.swiper-container {
overflow: hidden;
}

It hides the overflow to hide the other cards but also hides the shadow.

[tempus2016 (Tempus)]

It looks a lot better but is not perfect. It shows a shadow on the right side now where the bottom card doesn’t. Maybe a padding issue.

[dimitri.landerloos]

Try and post your yaml. Do you have 2 cards in a stack that both swipe by any chance?

EDIT: Actually send me a message instead. This has nothing to do with mushroom so lets take it off the thread.

[tvds (Tim)]

@1umnyy

Can you share the code for the first 2? Pretty useful overview

[Guizmos]

Hi
You must have at least two cards. The first is a simple card with a tap_action which will call the service:

            type: custom:mushroom-template-card
            secondary: ''
            icon: mdi:home
            layout: vertical
            icon_color: green
            tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: set
                ids:
                  - home: toggle

in this example I named the map “home” but you can name it whatever you want.

then the second map is defined like this:

        type: custom:local-conditional-card
        default: hide
        id: home
        card:
          type: vertical-stack
          title: Lampes
          cards:
            - square: false
              type: grid
              cards:
                - type: custom:mushroom-template-card
                  layout: vertical
                  primary: Led
                  secondary_info: none
                  entity: switch.lampe_led
                  icon: mdi:wall-sconce-round-variant
                  icon_color: |-
                    {% if is_state('switch.lampe_led', 'on') %}
                      black
                    {% else %}
                      grey
                    {% endif %}
                  card_mod:
                    style: |
                      ha-card {
                        {% if is_state(config.entity, 'on') %}
                          background-color: rgba(147,112,219, 1);
                        {% else %} 
                          background-color: rgba(var(--rgb-card-background-color));
                        {% endif %}
                      }

you have to define the id of the card with the same name as the one above (in this example “home”) and then you put the card you want

[Evirc]

Hi, i have added a card with the code

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:trash-can
    icon_color: green
    primary: Trash
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            clip-path: inset(26% 0 0 0);
          }
  - type: custom:mushroom-template-card
    icon: mdi:trash-can
    icon_color: green
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: lid 1s ease infinite;
            clip-path: inset(0 0 75% 0);
            transform-origin: 50% 25%;
          }
          @keyframes lid {
            0%, 50%, 80%, 100% { transform: translateY(0); }
            10% { transform: translateY(-5px) rotate(-37deg); }
            20% { transform: translateY(-5px) rotate(31deg); }
            30% { transform: translateY(-5px) rotate(-25deg); }
            40% { transform: translateY(-5px) rotate(19deg); }
            60% { transform: translateY(-3px); }
          }
          .shape {
            --shape-color: none;
            top: 0.3px;
          }
          .: |
            ha-card {
              width: 66px;
              top: -66px;
            }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

but the result is without animation

what am I wrong?

[dimitri.landerloos]

Check the updated animations.
the way that animations are applied has changed.

Mushroom Cards - Build a beautiful dashboard easily

Hi @rhysb, i have made a general mushroom - card-mod styling guide that i have posted here. i have linked to your resource on animations from it because it is great. however since it was made a few things have changed with the way that animations are applied and we get a bunch of questions regarding it right now because people want to use your animations. so i hope you dont mind that i have gone through and updated each of your animations below and will be posting them as a reply here. i will …

[Electrickoolaid]

Hey everyone, I recently set up the Mushroom theme and I really like it, but there’s one issue I’ve noticed and wondering if anyone has this same issue?

When using the mushroom light control slider, when I am controlling a single light such as a lamp, the slider is smooth and acts as I would expect.

When I have a group of lights and an adjusting the brightness slider, it jumps around for about a second after I make the change. I believe it’s updating all of the lights in the group and is a bit delayed in updating the brightness slider in the UI to reflect all of the lights updating. Does this make sense?

So for example I will update a light group with the slider from 100% to 25%, when I release the slider it will jump from 100 to 25 back to 100 and then settle on 25. The lights themselves dim as expected but it’s hard to get it to move to the correct setting as it will jump around in the UI a couple times before going to the correct setting. Anyone else seen this?

Edit: just realized it’s not only with mushroom. Seems to be some sort of issue with Philips hue lights that was supposedly fixed a while ago but doesn’t seem to be working for me. I’ll look into it more elsewhere

[Mattia2399]

Good morning everyone, I created this pop-up menu to navigate between the tabs of the various pages. I followed @Guizmos advice to use local-conditional-card but now I have to solve this problem with CSS.

Now, however, I have to make sure that when I tap on the icon, both the tab changes and the selected room is also highlighted in the pop-up menu. The problem is that the tap_action supports only one function and I wasn’t able to do it using a script.

type: custom:local-conditional-card
default: hide
id: prova
card:
  type: custom:stack-in-card
  mode: vertical
  cards:
    - type: custom:mushroom-template-card
      primary: Home
      secondary: ''
      icon: mdi:home
      icon_color: white
      fill_container: false
      layout: vertical
      tap_action:
        action: fire-dom-event
        local_conditional_card:
          action: set
          ids:
            - rooms: toggle
      card_mod:
        style: |
          ha-card {
            width: 210px;
            height: 20px;
            --spacing: 0px;
            padding-top: 10px !important;
            //box-shadow: var(--ha-card-box-shadow) !important;
            //border-radius: 10px 10px 10px 10px !important;
            transition: all 0s;
            --icon-size: 60px;
          }
          mushroom-shape-icon {
            --shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Home') else 'none' }}), 0.4) !important;
          }
    - type: custom:mushroom-template-card
      primary: Cucina
      secondary: ''
      icon: mdi:fridge
      icon_color: white
      fill_container: false
      layout: vertical
      entity: input_select.seleziona_stanza
      tap_action:
        action: call-service
        service: input_select.select_option
        target:
          entity_id: input_select.seleziona_stanza
        data:
          option: Cucina
      card_mod:
        style: |
          ha-card {
            width: 210px;
            height: 20px;
            --spacing: 0px;
            padding-top: 10px !important;
            //box-shadow: var(--ha-card-box-shadow) !important;
            //border-radius: 10px 10px 10px 10px !important;
            transition: all 0s;
            --icon-size: 60px;
          }
          mushroom-shape-icon {
            --shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Cucina') else 'none' }}), 0.4) !important;
          }
    - type: custom:mushroom-template-card
      primary: Salotto
      secondary: ''
      icon: mdi:sofa
      icon_color: white
      fill_container: false
      layout: vertical
      entity: input_select.seleziona_stanza
      tap_action:
        action: call-service
        service: input_select.select_option
        target:
          entity_id: input_select.seleziona_stanza
        data:
          option: Salotto
      card_mod:
        style: |
          ha-card {
            width: 210px;
            height: 20px;
            --spacing: 0px;
            padding-top: 10px !important;
            //box-shadow: var(--ha-card-box-shadow) !important;
            //border-radius: 10px 10px 10px 10px !important;
            transition: all 0s;
            --icon-size: 60px;
          }
          mushroom-shape-icon {
            --shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Salotto') else 'none' }}), 0.4) !important;
          }
  card_mod:
    style: |
      ha-card {
        position: fixed !important;
        top: auto;
        bottom: 75px;
        left: 15px;
        right: 0;
        animation: slide-up 0.5s;
        z-index: 5 !important;
        width: 210px;
        height: 400px !important;
        padding: 0px;
        overflow-y: hidden;
        box-shadow: var(--ha-card-box-shadow) !important;
        border-radius: 35px 35px 35px 35px !important;
      }
      @keyframes slide-up {
        from {
          transform: translateY(100%);
        }
        to {
          transform: translateY(0);
        }
      }
persist_state: false

I used to use an input_select but now I have to change everything.

[spacekiek]

Nice!
Do you know if it’s possible to adjust the slide with intervals (0% / 20% / 40% etc… ) ?

[andyblac (Andy Blackburn)]

could someone help me a garage door animation, I would like it to to animate from closed state to open open state whilst the door is opening, stay open whilst the door is open, then reverse the animate when it closing.

[dimitri.landerloos]

Hey, this is the best you can do if you do it in an easy way.

it will run the animation once when the state is changed. and it will then stay open if the cover entity is opened. and stay closed if the cover entity is closed.

however, the big downside is that the animation also runs on any page refresh. not much you can do about that unfortunately. another smaller downside is that the close only starts when the door is triggered as closed. not when it first starts closing.

you could make it better if you have a garage door that tells you exact position of it rather than just open close, but that is quite rare.

type: custom:mushroom-template-card
primary: Double Garage
icon: mdi:garage-variant
entity: cover.office_blinds
icon_color: amber
card_mod:
  style: |
    ha-state-icon {
      {% if states(config.entity) == 'open' %}
        clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0);
        animation: open 3s;
      {% else %}
        clip-path: inset(0 0 0 0);
        animation: close 3s;
      {% endif %}
    }
    @keyframes open {
      0% { clip-path: inset(0 0 0 0); }
      25%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
      50%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
      75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
    }
    @keyframes close {
      0% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
      25%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
      50%  { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
      75% { clip-path: inset(0 0 0 0); }
    }