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

[dimitri.landerloos]

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

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

[Tadies]

Thank You again Dimitri!!!
You rock!!

[Andrea_Ciullini]

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?

[dimitri.landerloos]

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

[Andrea_Ciullini]

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

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

[dimitri.landerloos]

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 }}

[eMeF]

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

[hsec]

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

[dimitri.landerloos]

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

[hsec]

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

[Jshaw20 (Jack)]

Hi,
does anyone have a template on building something like this please?
dont want to use groups, want to be able to have the person cards and use entities. e.g garage door with icon and under the name a sub line with status. But still able to click them using action so i can either navigate to another page, or use a popup ect…

[paddy0174 (Patrick)]

That is a horizontal-stack-card, where “normal” mushroom-cards are placed inside. The first two ones a person cards, the rest entities. This is the vertical layout on the card, and the “secondary-info” is the state.

Nothing really fancy, this is clickable in around five minutes and needs literally no YAML interaction.

[Jshaw20 (Jack)]

ok thanks for your help, I will have a play around with that

[paddy0174 (Patrick)]

Really, it’s not that I don’t want to give you a template, but you really are faster, if you just use the UI editor. If you’d need to change the entity names in the template, it will take longer as you clicking the different buttons together.

EDIT:

• Go to the dashboard to change and open the edit mode
• Add a new card type horizontal-stack
• Add a Mushroom person-card
• change the entity to the person you want
• select “vertical-layout” in the select “layout”
• select “entity-picture” under “icon type”

Voilà, you got the first button of the picture you posted. Just go along with the other buttons.

[Jshaw20 (Jack)]

yes this has worked thanks

[Jshaw20 (Jack)]

hi, this is the problem I remember with this in the past; the gaps between them are too big

EDIT: and not all the text fits on, this why I thought it needs a template?

[PskNorz (NoRz)]

Hey guys,

I’m trying to create a card that combines temperature and humidity. I’ve managed to do it, I just want to add the icons before the meter readings and remove the main icon.

This is my card that i am trying to create. On the red boxes i want to put icons.

And this is something that i have in my current card and i am trying to do.

And this is my code.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Δωματιο
    secondary: >-
      {{ states('sensor.temperature_39') }} | {{ states('sensor.humidity_38')
      }}
    icon: mdi:thermometer-water
    card_mod:
      style: |
        ha-card {
          z-index: 1;
          --ha-card-border-width: 0;
        }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.temperature_5
        name: Temperature
        color: '#ff33ff'
      - entity: sensor.humidity_38
        name: Humidity
        color: '#3399ff'
        y_axis: secondary
    height: 50
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          height: 100%;
          width: 100%;
          top: 0px;
          --ha-card-border-width: 0;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
        }

[ncd]

did you find an answer?

[dimitri.landerloos]

You can insert emojis into your secondary info. But you cant color them like you have in your example.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Δωματιο
    secondary: >-
      🌡{{ states('sensor.office_temperature_humidity_temperature') }} | 💧{{
      states('sensor.office_temperature_humidity_humidity') }}
    icon: null
    card_mod:
      style: |
        ha-card {
          z-index: 1;
          --ha-card-border-width: 0;
        }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.office_temperature_humidity_temperature
        name: Temperature
        color: '#ff33ff'
      - entity: sensor.office_temperature_humidity_humidity
        name: Humidity
        color: '#3399ff'
        y_axis: secondary
    height: 50
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          height: 100%;
          width: 100%;
          top: 0px;
          --ha-card-border-width: 0;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
        }

[dimitri.landerloos]

No matter what you do you will always have text wrapping issues. Ensure that your names and states are short if you are going to have small cards.

On the issue of spacing. If you want them closer i would recommend taking a look at the layout card as it lets you define column widths for each column/card

So change what @paddy0174 gave you in this section to layout card instead:

• Go to the dashboard to change and open the edit mode
• add the layout card and set up your column widths
• Add a Mushroom person-card
• change the entity to the person you want
• select “vertical-layout” in the select “layout”
• select “entity-picture” under “icon type”