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

@Valdorama did you manage to add the badge to Mushroom Fan Card in the end? Can you share your code if so?

Try like this. If you dont like that the number now matches the color of the icon selected you can also change the color with color: white;

type: custom:mushroom-template-card
primary: ''
icon: none
layout: horizontal
icon_color: blue
entity: sensor.processor_use
badge_icon: mdi:speedometer
badge_color: '#3498db'
secondary: ''
tap_action:
  action: more-info
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        /* Radial progress bar */
        background: radial-gradient(var(--card-background-color) 60%, 
                                    transparent calc(60% + 1px)), 
                    conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%, 
                                    var(--card-background-color) 0% 100%);
      }
      .shape:after {
        content: '';
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: var(--icon-border-radius);
        background: var(--shape-color);
      }
    .: |
      ha-state-icon:after {
        content: "{{ states(config.entity) | round(0)  }}%";
        font-size: var(--card-primary-font-size);
        position: absolute;
        top: 21px;
        left: 12px;
      }

Remember to change the entity back to your own :slight_smile:

4 Likes

You can add a badge to any card with card-mod like this:

type: custom:mushroom-fan-card
entity: fan.bedroom_fan
show_percentage_control: true
collapsible_controls: true
show_oscillate_control: true
card_mod:
  style: |
    ha-state-icon:after {
      content: "{{state_attr('fan.bedroom_fan','percentage')}}%";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(var(--rgb-green));
      color: var(--card-background-color);
      font-weight: bolder;
      border-radius: 50%;
      top: -5px;
      right: -5px;
      width: 16px;
      height: 16px;
      font-size: 8px; 
    }

But in order to add an icon to the badge have a look at the below.

1 Like

some animations no longer work in Mushroom Cards - Build a beautiful dashboard easily.
I mention only a few

  • shower
  • sprinklers
  • motion

thanks for your work

This has already been addressed. Please check the below.

@carlone1
You might want to take a good and long read of this topic:

I mention only a few:

  • Preamble (especially!)
  • #1
  • #2
  • #4
  • #8
  • #15
  • #22
1 Like

hahah as usual, the cleanest code possible!

Thanks a lot!

The badge_icon: mdi:bug only works with template card as far as I know and tried. I could possibly try recreating the fan-card into template-card but I am planning to use it in other cases and would end up recreating many other cards as well.

With the code provided, I was able to get closer to what I am trying to achieve and now I’m struggling with the following:

  • The badge gets animated/rotated with the icon_animation: true setting in mushroom-fan-card
  • I would like to use mdi icon in the badge
    image image

This is my current code

type: custom:mushroom-fan-card
entity: fan.whisper_flex
icon_animation: true
show_percentage_control: true
collapsible_controls: true
tap_action:
  action: call-service
  service: script.fan_on_off_with_automation
card_mod:
  style: |
    ha-state-icon:after {
      content: "A";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(var(--rgb-blue));
      color: var(--card-background-color);
      font-weight: bolder;
      border-radius: 50%;
      top: -5px;
      right: -5px;
      width: 16px;
      height: 16px;
      font-size: 8px; 
    }

Anyone can please help me with that?

Anohter one for You Dimitri…
i saw your rotaing drum on washmachine icon in here…

i did fiddle around with it what im trying to do but somehow i fail…
sofar this icon works perfect…only not the rotaing drum
is this able to do it?

    mushroom-entity-chip:nth-child(8)$: |
      ha-state-icon {
        {% if is_state('switch.wasmachine','on') %}
            animation: shake 400ms ease-in-out infinite,  wash 1s ease-in-out infinite;
            transform-origin: 50% 58%;
          {% else %}

          {% endif %}
        }
        @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 wash {
          50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%,
          36% 73%, 35% 100%, 100% 100%, 100% 0); }

If you read the post i linked you it is definitely possible to set an mdi icon in the fake badge that we have created. You will need to download an icon pack etc. But the post makes it quite clear how to do it.

You dont need to use badge_icon: at all.

We can base the “badge” on the mushroom-shape-icon. Instead of the ha-state-icon so it doesnt inherit any animations. Like this:

type: custom:mushroom-fan-card
entity: fan.bedroom_fan
show_percentage_control: true
collapsible_controls: true
show_oscillate_control: true
icon_animation: true
card_mod:
  style: |
    mushroom-shape-icon:after {
      content: "{{state_attr('fan.bedroom_fan','percentage')}}%";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(var(--rgb-green));
      color: var(--card-background-color);
      font-weight: bolder;
      border-radius: 50%;
      top: -5px;
      right: -5px;
      width: 16px;
      height: 16px;
      font-size: 8px; 
    }

just to be 100% clear. not my animation. credit to @rhysb.

What you seem to be missing is that when we have the rotating drum we are actually using 2 chips and overlaying them. currently in your code i see only 1 chip.

so you would need something like this:

type: custom:mushroom-chips-card
chips:
  - type: template
  - type: template
  - type: template
  - type: template
  - type: template
  - type: template
  - type: template
  - type: entity
    entity: switch.office_screen_left
    icon: mdi:washing-machine
    content_info: none
    icon_color: orange
  - type: template
    icon: mdi:washing-machine
    icon_color: orange
    card_mod:
      style: |
        ha-card {
          left: -44.5px;
          top: 0px;
          background: none !important;
          border: none !important;
          box-shadow: none !important;
        }
card_mod:
  style:
    mushroom-entity-chip:nth-child(8)$: |
      ha-state-icon {
        {% if is_state('switch.wasmachine','on') %}
          animation: shake 400ms ease-in-out infinite;
        {% else %}

        {% endif %}
        transform-origin: 50% 58%;
        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);
        filter: drop-shadow(2px 2px 3px rgba(var(--rgb-black), 0.4));
      }
      @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); }
      }
    mushroom-template-chip:nth-child(9)$: |
      ha-state-icon {
        {% if is_state('switch.wasmachine','on') %}
          animation: spin 1s linear infinite;
        {% else %}

        {% endif %}
        transform-origin: 50% 58%;
        clip-path: circle(21.7% at 50% 58%);
      }
      @keyframes spin {
        0% { transform: rotate(0); }
        100%  { transform: rotate(360deg); }
      }

Untitled video - Made with Clipchamp (94)
I have put in a bunch of template chips because i noticed that your entity chip is the 8th chip.

Keep in mind that this code provided only works if the chips being overlayed with eachother are next to eachother in the main chip card. if they arent you would need to adjust the values and my recommendation is then to put your chip that is being overlayed at the very end and never put any new chip after it. you can then adjust the left: amount and set the position: absolute like this:

type: custom:mushroom-chips-card
chips:
  - type: template
  - type: entity
    entity: switch.office_screen_left
    icon: mdi:washing-machine
    content_info: none
    icon_color: orange
  - type: template
  - type: template
  - type: template
  - type: template
  - type: template
  - type: template
  - type: template
    icon: mdi:washing-machine
    icon_color: orange
    card_mod:
      style: |
        ha-card {
          position: absolute;
          left: 44.5px;
          top: 0px;
          background: none !important;
          border: none !important;
          box-shadow: none !important;
        }
card_mod:
  style:
    mushroom-entity-chip:nth-child(2)$: |
      ha-state-icon {
        {% if is_state('switch.office_screen_left','on') %}
          animation: shake 400ms ease-in-out infinite;
        {% else %}

        {% endif %}
        transform-origin: 50% 58%;
        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);
        filter: drop-shadow(2px 2px 3px rgba(var(--rgb-black), 0.4));
      }
      @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); }
      }
    mushroom-template-chip:nth-child(9)$: |
      ha-state-icon {
        {% if is_state('switch.office_screen_left','on') %}
          animation: spin 1s linear infinite;
        {% else %}

        {% endif %}
        transform-origin: 50% 58%;
        clip-path: circle(21.7% at 50% 58%);
      }
      @keyframes spin {
        0% { transform: rotate(0); }
        100%  { transform: rotate(360deg); }
      }

Untitled video - Made with Clipchamp (93)

1 Like

Thank You again Dimitri!!!
You rock!!

1 Like

hello, my code is this but animation is always on. can you help me please?

              - type: custom:mushroom-template-card
                entity: sensor.microonde_power
                name: Microonde
                icon: mdi:microwave
                icon_color: blue
                icon_type: icon
                primary: Microonde
                tap_action:
                  action: navigate
                  navigation_path: consumi
                card_mod:
                  style: |
                    ha-card {
                      padding: 12px;
                      margin-left: 12px;
                      background: none;
                      box-shadow: none;
                    }
                    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%); }
                    }
           
                    {{ 'animation: java 4s linear infinite;' if states('sensor.microonde_power') | float > 4 }}

is the last line not correct?

The last line is not needed for anything.
it doesnt refer to the animations that you have keyframes for.

you have 2 options on how to do your if statement. either like this:

(my preference)

      {% if states('sensor.microonde_power') | float > 4 %}
        animation: cook 1s linear infinite;
      {% else %}

      {% endif %}

or you can do it like this:

{{ 'animation: cook 1s linear infinite;' if states('sensor.microonde_power') | float > 4 }}

so in all it would look like this (with my preference).

card_mod:
  style: |
    ha-card {
      padding: 12px;
      margin-left: 12px;
      background: none;
      box-shadow: none;
    }
    ha-state-icon:before {
      content: "";
      position: absolute;
      width: 25%;
      height: 25%;
      margin: 10%;
      {% if states('sensor.microonde_power') | float > 4 %}
        animation: cook 1s linear infinite;
      {% else %}

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

ok, thank you. i understand.
can i use also for color?

icon_color: '{{ ''blue'' if states('sensor.microonde_power') | float > 4 % }}'

sure.

like this:

icon_color: |-
  {% if states('sensor.microonde_power') | float > 4 %}
    blue
  {% else %}
    green
  {% endif %}

or like this:

icon_color: |-
  {{ 'blue' if states('sensor.microonde_power') | float > 4 }}
1 Like

OK, I see now how it works. I was expecting a somehow consistent approach with other icons but if that is the only way then why not. Thanks for that!

Here is my mushroom-fan-card with a custom badge.

Code
type: custom:mushroom-fan-card
entity: fan.whisper_flex
icon_animation: true
show_percentage_control: true
collapsible_controls: true
tap_action:
  action: call-service
  service: script.fan_on_off_with_automation
card_mod:
  style: |
    mushroom-shape-icon:after {
      content: "autorenew";
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(var(--rgb-blue));
      color: white;
      font-weight: bolder;
      border-radius: 50%;
      top: -5px;
      right: -5px;
      width: 16px;
      height: 16px;
      font-size: 12px; 
      font-family: 'Material Icons';
    }

See this post for more details Mushroom Cards - Build a beautiful dashboard easily 🍄 - #6539 by rhysb

3 Likes

@dimitri.landerloos

Do you know what is wrong with this code? Animation it is not working.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    alignment: end
    style: |-
      ha-card {
        --chip-box-shadow: none !important;
        --chip-background: none !important;
        --chip-border-width: 0px !important;
        --chip-spacing: 0px !important;
      }        
    chips:
      - type: template
        entity: media_player.living_room_tv
        icon: mdi:monitor
        icon_color: blue
        card_mod:
          style:
            mushroom-template-chip:nth-child(1)$: |
              ha-state-icon:before {
                animation: refresh 300ms linear infinite;
              }
              @keyframes refresh { 
                  0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
                  25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
                  50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
                  75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
                  100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
              } 

Quite a number of things.

  1. You are trying to drill to the specific chip which is correct for icon styling, but you have placed it under the specific chip rather than the main chip card.

  2. We cant use config.icon_color because there may be multiple entities in the main chip card. Drilling to the specific chip doesnt expose the actual entity to you. So you cant do rgba(var(--rgb-{{config.icon_color}}), 0.2)
    You have to just tell it what color you want to use unfortunately. rgba(var(--rgb-blue), 0.2)

  3. You cant have a pseudo element (what :before and :after creates) without having content be specified. Even if set to nothingcontent: '' it needs to be declared. It is also recommended to set the position of your pseudo element to absolute.

  4. Your pseudo element also had no size so even if it was created you wouldnt have been able to see it because the size is nothing.

The below should work.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: media_player.living_room_tv
        icon: mdi:monitor
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              --chip-box-shadow: none !important;
              --chip-background: none !important;
              --chip-border-width: 0px !important;
              --chip-spacing: 0px !important;
            } 
    alignment: end
    card_mod:
      style:
        mushroom-template-chip:nth-child(1)$: |
          ha-state-icon:before {
            content: '';
            position: absolute;
            width: 40%;
            height: 30%;
            margin: 5%;
            animation: refresh 300ms linear infinite;
          }
          @keyframes refresh { 
            0% { background: linear-gradient(180deg, rgba(var(--rgb-blue), 0.2) 0%, transparent 50%, transparent 100%); }
            25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-blue), 0.2) 25%, transparent 100%); }
            50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-blue), 0.2) 50%, transparent 100%); }
            75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-blue), 0.2) 75%, transparent 100%); }
            100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-blue), 0.2) 100%); }
          }
1 Like

@dimitri.landerloos you are fantastic!
And I really appreciate the explanation!!!

1 Like