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

[dimitri.landerloos]

Works just fine to me.

Can you show the entire config please.

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:microwave
icon_color: red
card_mod:
  style: |
    ha-state-icon:before {
       content: "";
       position: absolute;
       width: 25%;
       height: 25%;
       margin: 10%;
       animation: cook 1s linear infinite;
     }
     @keyframes cook { 
       0%, 100% { background: linear-gradient(90deg, white 0%, transparent 50%, transparent 100%); }
       33% { background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%); }
       66% { background: linear-gradient(90deg, transparent 0%, transparent 50%, white 100%); }
     }

[image969 (James Scialdone)]

Is there a way to display a text field with a mushroom card?

I have helper set up for input_text

I have a script written so when I type in a song, it plays on Alexa

but I can’t get the actual TEXT BOX to appear on a card, without tappign it to go to the sub menu

[kbrown01]

Here is one I use for text input with a few mushroom buttons. The input just uses entities, but stacking it together with mushroom buttons to execute and clear:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      max_cols: 3
      grid-template-columns: 80% 10% 10%
    cards:
      - type: entities
        entities:
          - entity: input_text.vizio_search
        card_mod:
          style: |
            ha-card {box-shadow:  none;}
      - type: custom:mushroom-entity-card
        entity: script.1700689406434
        layout: horizontal
        secondary_info: none
        primary_info: none
        fill_container: true
        icon_color: blue
        card_mod:
          style: |
            ha-card {box-shadow:  none;}
        tap_action:
          action: call-service
          service: script.1700689406434
      - type: custom:mushroom-entity-card
        entity: script.clear_vizio_search
        layout: horizontal
        primary_info: none
        secondary_info: none
        fill_container: true
        icon_color: blue
        card_mod:
          style: |
            ha-card {box-shadow:  none;}
        tap_action:
          action: call-service
          service: script.clear_vizio_search

Looks like this:

I will likely remove the icon on the left and/or replace it with the mushroom to execute the search, not sure. But gives an idea of combining using stack-in-card.

There is one caveat which has nothing to do with mushroom or anything and has been reported many times as it relates to input_text and mobile. If you use mobile and click in the input_text, the popup keyboard appears. You type in text using the keyboard. The state of the input_text will not change until you click the button in the keyboard or close the keyboard and click elsewhere. It is a pain, but no one seems to fix it. Would be so nice to have some service when the text changes, but it does not exist.

I would send you the scripts too but they are not relevant to your request. Mine is a GUI that allows you search on Vizio Smarcast TVs so it processes each letter one-by-one and then also has to clear the search box.

[image969 (James Scialdone)]

Thankkkkk you for the quick reply . Ya I use mobile and agree it’s annoying

I’m also using place meets home assistant card and for some reason on mobile only(or at least iPhone) every time I press a letter to type
In a movie, it kicks me out of the keyboard, as if I pressed done. One character at a time and that includes back spacing . I’ve tried to get answers on that one but no one has relied yet

[quinquelhas (Marco)]

Thanks Dimitri

It works…

[renk1]

My bad. Thanks it works now, although not in a conditional chip, are there other requirements for animations to work?

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - condition: state
        entity: input_select.maquina_lavar_state
        state: desligado
    chip:
      type: entity
      entity: input_boolean.maquina_lavar_anim
      content_info: none
      card_mod:
        style: |
          ha-state-icon {
            animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
            transform-origin: 50% 110%;
          }
          @keyframes shake {
            0%, 100% { transform: translate(0, 0) rotate(0); }
            20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
            40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
            60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
            80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
          }
          @keyframes drum {
            50%  { 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); }
          }
alignment: center

[dimitri.landerloos]

Chips are a little more complex (whether or not a conditional chip is used.) But in essence it would be done like this (nth-child(x) being the number of the chip you are applying it to):

type: custom:mushroom-chips-card
alignment: center
chips:
  - type: entity
    entity: input_boolean.alarm_skip
    icon: mdi:washing-machine
    content_info: none
card_mod:
  style:
    mushroom-entity-chip:nth-child(1)$: |
      ha-state-icon {
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      }
      @keyframes shake {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
        40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
        60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
        80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
      }
      @keyframes drum {
        50%  { 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); }
      }

Or like this with a conditional chip:

type: custom:mushroom-chips-card
alignment: center
chips:
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.alarm_skip
        state: 'off'
    chip:
      type: entity
      entity: person.dimitri_landerloos
      icon: mdi:washing-machine
card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-entity-chip$: |
        ha-state-icon {
          animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
          transform-origin: 50% 110%;
        }
        @keyframes shake {
          0%, 100% { transform: translate(0, 0) rotate(0); }
          20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
          40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
          60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
          80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
        }
        @keyframes drum {
          50%  { 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); }
        }

[renk1]

I see, it now works, going to try with multiple chips now. Thank you vm

[MARTWIN (Martinho)]

For some reason this animation broke? The ping from the background works, but the robot animation on the icon stopped? Can you please help me with this cus I’m losing my mind lol

type: custom:mushroom-template-card
primary: ''
secondary: '{{ states(''input_text.jarvis_chat'') }}'
icon: |-
  {% if states('input_boolean.jarvis_ai') == 'on' %}
  mdi:robot-excited-outline
  {% else %}
  mdi:robot-dead
  {% endif %}
fill_container: true
multiline_secondary: true
entity: input_text.jarvis_chat
tap_action:
  action: more-info
layout: vertical
hold_action:
  action: more-info
icon_color: |-
  {% if states('input_boolean.jarvis_ai') == 'on' %}
  blue-grey
  {% else %}
  disabled
  {% endif %}
double_tap_action:
  action: navigate
  navigation_path: /lovelace/jarvis
card_mod:
  style:
    mushroom-shape-icon$: |

      .shape {
        --shape-animation: ping 2s infinite;
      }

      ha-icon {
        --icon-animation: tilt 4s infinite, blink 4s infinite; 
        transform-origin: 50% 92%;
      }

      @keyframes tilt {
        0%, 100% { transform: rotate(0deg); }
        33% { transform: rotate(8deg); }
        66% { transform: rotate(-8deg); }
        }
      @keyframes blink {
        0%, 20%, 30%, 45%, 55%, 70%, 80%, 100% { clip-path: inset(0 0 0 0); }
        25% { clip-path: polygon(0 0, 100% 0, 100% 53%, 25% 52%, 24% 77%, 75% 77%, 76% 52%, 100% 52%, 100% 100%, 0 100%); }
        50%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 51% 54%, 51% 76%, 76% 77%, 75% 53%, 100% 52%, 100% 100%, 0 100%); }
        75%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 24% 53%, 24% 77%, 47% 77%, 47% 52%, 100% 52%, 100% 100%, 0 100%); }
        }
      @keyframes ping {
        0% { box-shadow: 0 0 5px 1px rgba(var(--rgb-blue-grey), 0.7);
        }
        100% { box-shadow: 0 0 5px 15px transparent;
        }
    .: |
      ha-card {
        box-shadow: none;
        background: rgba(0,0,0,0);
        text-align: center;
      }

[dimitri.landerloos]

You updated from an old version of mushroom to a new one. It was mentioned in the breaking changes for one of the newer versions. But how animations are applied changed. Check the updated animations 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 …

But to fix yours its this:

type: custom:mushroom-template-card
primary: ''
secondary: '{{ states(''input_text.jarvis_chat'') }}'
icon: |-
  {% if states('input_boolean.jarvis_ai') == 'on' %}
  mdi:robot-excited-outline
  {% else %}
  mdi:robot-dead
  {% endif %}
fill_container: true
multiline_secondary: true
entity: input_text.jarvis_chat
tap_action:
  action: more-info
layout: vertical
hold_action:
  action: more-info
icon_color: |-
  {% if states('input_boolean.jarvis_ai') == 'on' %}
  blue-grey
  {% else %}
  disabled
  {% endif %}
double_tap_action:
  action: navigate
  navigation_path: /lovelace/jarvis
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes blink {
        0%, 20%, 30%, 45%, 55%, 70%, 80%, 100% { clip-path: inset(0 0 0 0); }
        25% { clip-path: polygon(0 0, 100% 0, 100% 53%, 25% 52%, 24% 77%, 75% 77%, 76% 52%, 100% 52%, 100% 100%, 0 100%); }
        50%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 51% 54%, 51% 76%, 76% 77%, 75% 53%, 100% 52%, 100% 100%, 0 100%); }
        75%  { clip-path: polygon(0 0, 100% 0, 100% 53%, 24% 53%, 24% 77%, 47% 77%, 47% 52%, 100% 52%, 100% 100%, 0 100%); }
      }
      @keyframes ping {
        0% { box-shadow: 0 0 5px 1px rgba(var(--rgb-blue-grey), 0.7);}
        100% { box-shadow: 0 0 5px 15px transparent;}
      }
    .: |
      ha-card {
        box-shadow: none;
        background: rgba(0,0,0,0);
        text-align: center;
      }
      ha-state-icon {
        animation: tilt 4s infinite, blink 4s infinite; 
        transform-origin: 50% 92%;
      }
      @keyframes tilt {
        0%, 100% { transform: rotate(0deg); }
        33% { transform: rotate(8deg); }
        66% { transform: rotate(-8deg); }
      }

[Vandana (Vandana Dass)]

that are photoshopped icons.

Can you plz help with the code

[dimitri.landerloos]

Well you said:

@Vandana

The yellow circular progress-bar works and the days left are updated accordingly.

So i assumed you had at least this set up. So why i asked for what you already had. Better to work from what you have than start from scratch.

But something like this?

type: custom:mushroom-template-card
primary: Test
icon: mdi:wifi
icon_color: amber
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {% if states('sensor.washing_machine_washer_job_state') != 'none' %} {{(((((as_timestamp(states('sensor.washing_machine_washer_completion_time')) - as_timestamp(states('input_datetime.washing_machine_start_time')))) - (as_timestamp(now()) - (as_timestamp(states('input_datetime.washing_machine_start_time'))))) / (as_timestamp(states('sensor.washing_machine_washer_completion_time')) - as_timestamp(states('input_datetime.washing_machine_start_time')))) * 100) | round(0)}}% {% else %} 100% {% endif %} 0%, var(--card-background-color) 0% 100%);
      }
    .: |
      ha-state-icon::after {
        content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Trappa')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';
        position: absolute;
        top: -11%;
        right: -11%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 15px;
        height: 15px;
        font-size: 9px;
        font-weight: 700;
        background-color: rgba(var(--rgb-amber), 0.5);
        border-radius: 50%;
      }

You would use your templates that.

1. Count how many of something here:

content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Trappa')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';

Make sure you keep the quotes.

2. A template that calculates the percentage left on something. It needs to end up being expressed as a string that says 12% for example. In this section:

{% if states('sensor.washing_machine_washer_job_state') != 'none' %} {{(((((as_timestamp(states('sensor.washing_machine_washer_completion_time')) - as_timestamp(states('input_datetime.washing_machine_start_time')))) - (as_timestamp(now()) - (as_timestamp(states('input_datetime.washing_machine_start_time'))))) / (as_timestamp(states('sensor.washing_machine_washer_completion_time')) - as_timestamp(states('input_datetime.washing_machine_start_time')))) * 100) | round(0)}}% {% else %} 100% {% endif %}

I am calculating how much time has elapsed from when my washing machine started and then how much is left and expressing that as a percentage.

[MARTWIN (Martinho)]

You’re right. I’ve been a little “out” of changes other than the HA main ones for a good moment. I completely missed that and it explains why some of my other icons are broken too.

I’m gonna take a deep read on that and sort those icons out. Appreciate you. Have a wonderful day.

[dimitri.landerloos]

To give you the main points.

ha-icon is now ha-state-icon and is seperated from mushroom-shape-icon so you no longer do this:

card_mod:
  style: 
    mushroom-shape-icon$: |
      ha-icon {
      }

You can instead just do:

card_mod:
  style: |
    ha-state-icon {
    }

.shape is still under mushroom-shape-icon though.

card_mod:
  style: 
    mushroom-shape-icon$: |
      .shape {
      }

--icon-animation is just animation now. --shape-animation remains however.

And thats about it

[domenico.a86 (Domenico)]

thanks it works great!!!

[Vandana (Vandana Dass)]

@dimitri.landerloos

So i assumed you had at least this set up. So why i asked for what you already had. Better to work from what you have than start from scratch.

I thought you were talking about theses icons

@dimitri.landerloos

type: custom:mushroom-template-card
primary: Test
icon: mdi:wifi
icon_color: amber
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {% if states('sensor.washing_machine_washer_job_state') != 'none' %} {{(((((as_timestamp(states('sensor.washing_machine_washer_completion_time')) - as_timestamp(states('input_datetime.washing_machine_start_time')))) - (as_timestamp(now()) - (as_timestamp(states('input_datetime.washing_machine_start_time'))))) / (as_timestamp(states('sensor.washing_machine_washer_completion_time')) - as_timestamp(states('input_datetime.washing_machine_start_time')))) * 100) | round(0)}}% {% else %} 100% {% endif %} 0%, var(--card-background-color) 0% 100%);
      }
    .: |
      ha-state-icon::after {
        content: '{{ expand(states.light) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Trappa')) |rejectattr('entity_id', 'search', 'dz') |map(attribute='entity_id') |list | count }}';
        position: absolute;
        top: -11%;
        right: -11%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 15px;
        height: 15px;
        font-size: 9px;
        font-weight: 700;
        background-color: rgba(var(--rgb-amber), 0.5);
        border-radius: 50%;
      }

This is exactly what I wanted. Thank you so very much.

[Intro_Verti]

Hi (@dimitri.landerloos ),

I couldn’t find the trick along these 8.755 posts…
Is it possible to have this card in vertical layout? Or better said: the icon in the centre?

It is about this config:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:pine-tree
    icon_color: green
    primary: Aantal dagen tot Kerst
    secondary: >-
      {{ (states('input_datetime.christmas') | as_datetime | as_local -
      now()).days + 1 }} 
  - type: custom:mushroom-template-card
    icon: mdi:star-four-points
    icon_color: yellow
    primary: Star
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            animation: star 8s ease infinite alternate;
          }
          @keyframes star {
            0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
            50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
  - type: custom:mushroom-template-card
    icon: mdi:gift
    icon_color: red
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
            --icon-size: 20px;
            top: 16px;
            left: 18px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -132px;
          }
          ha-state-icon {
            animation: surprise 4s ease infinite;
          }
          @keyframes surprise {
            0%, 20%, 100% { transform: translateY(0); }
            2.5% { transform: translateY(-2px) rotate(-27deg); }
            5% { transform: translateY(-2px) rotate(21deg); }
            7.5% { transform: translateY(-2px) rotate(-15deg); }
            10% { transform: translateY(-2px) rotate(9deg); }
            12.5% { transform: translateY(0); }
            15% { transform: translateY(-1.2px) }
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
        }

I’d like to have it centred, what would look much better on my dash:

Thank you for any solution.

[Vandana (Vandana Dass)]

Please guide where do I insert the following code to animate the icon? I have changed the icon to mdi:fountain

    ha-state-icon {
      {% if is_state(config.entity, 'on') %}
        animation: fountain 1.5s ease infinite;
      {% endif %}  
    } 
     
     @keyframes fountain { 0%, 100 { clip-path: polygon(0 100%,
     0 0, 100% 0, 100% 100%); }

     50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100%
     100%); }

     60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79%
     36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }

     70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79%
     36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }

     80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79%
     36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
     }  

     ha-card {
        padding: 5px 0px 0px 0px !important;
     }    
     :host {
     --icon-size: 35px !important; 
     --card-primary-font-size: 9px !important;
     --card-secondary-font-size: 9px!important;
     }

[dimitri.landerloos]

Someone else asked this very recently so no extra work for me this time!

Mushroom Cards - Build a beautiful dashboard easily

please do ask for everything that you want to do and then what you have tried in the first post. i love helping people, but it isnt particularly fun to work on the same card multiple times. [Untitled video - Made with Clipchamp - 2023-11-28T143130.581] type: custom:stack-in-card cards: - type: custom:mushroom-template-card entity: switch.smart_switch_2101058756376290838848e1e94400bc_outlet icon: mdi:pine-tree icon_color: green primary: Luci Albero di Natale secondary: |- …

[Intro_Verti]

Sorry! But thanks @dimitri.landerloos

But, to learn from it: what is it , what makes the icon centered?
So I can reuse it?