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

[martinst (Martin)]

I want to have the washingmachine icon to wobbling. I have found this in this topic which works in a template card but it doesn’t work on a template chip. Does anybody know what I have to do to let it also work on a chip template?

This works:

type: custom:mushroom-template-card
primary: Washing Machine
entity: sensor.washing_machine
icon: mdi:washing-machine
icon_color: blue
tap_action:
  action: none
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --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); }
      }

And on the template it doesn’t work:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:washing-machine
    icon_color: blue
    tap_action:
      action: none
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --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); }
          }

[Robbi-Ho (Rob)]

I think you’ll find everything you want to know in this post:

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

Mushroom Animations - Part 1 [Mushroom Chip Animated Scene] I thought I’d share some CSS animations I’ve been working on for Mushroom cards. All these CSS animations require Thomas Lovén’s card_mod. This can be installed via HACS. There are a few, so I’ll probably add them gradually. Make sure to return to this post so you don’t miss out. Built-in Mushroom Animations There are two built-in animations for Mushroom cards that can be used without specifying a…

https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/3240?u=robbi-ho

[martinst (Martin)]

Yes I know. But I want to use a template in a chip instead of an entity card without chip.

[jar87 (Jarosław Drewnicki)]

Hi Guys.

Im having problem with giving custom names in template mushroom card. My status of vacuum is "charging", and i want change it to my language: "ładowanie". How i can do this? Ive tried many ways but i`m not able to find solution:/

This is code for that card. What i did wrong?;/

- type: custom:mushroom-template-card
                style: |
                  ha-card {
                    padding-bottom: 50px !important;
                  }
                primary: George
                secondary: >
                  Status: {{ state_attr('vacuum.roborock_vacuum_a15', 'status')
                  }}
                icon: |-
                  {% set mode = states('vacuum.roborock_vacuum_a15') %}
                  {% if mode == 'charging', %}
                  mdi:robot-vacuum-variant
                  {% elif mode == 'cleaning', %}
                  mdi:robot-vacuum
                  {% else %}

                  {% endif %}
                icon_color: >-
                  {% set status =
                  state_attr('vacuum.roborock_vacuum_a15','status') %}

                  {% if status == 'charging', %}

                  grey

                  {% elif status == 'zoned_cleaning', %}

                  yellow

                  {% endif %}

[nullae (null)]

What a coincidence, I did something similar a week or so ago.
I used the media-light-sync addon on some dummy light entities and modified the code to publish a sensor of values attached.

Far less elegant than your solution. Node-red isn’t something I’ve played wit but I will defs give your version a shot. Having specific colours like light/muted light/dark colours seems very practical.

I wonder if there’s a way to pull contrasting secondary colours using this node-red method?
They can look quite nice when my version decides to give me one.

I also butchered your lovely ultrablur to have an animated background:

Moving Ultrablur code:

          card_mod:
            style: |
              ha-card:before {
                transform: translate3d(0,0,0);
                -webkit-transform: translate3d(0,0,0);

                content: "";
                position: absolute;
                height: 100%;
                width: 100%;
                background-size: 100% 100%;
                filter: blur(150px) saturate(200%);
                background: url('/local/nya.webp') center no-repeat;

                {% if not is_state('media_player.currently_playing', 'idle') %}
                  background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
                  background-size: 400% 400%;
                  animation: Gradient 30s linear infinite;
                {% endif %}

              }
              ha-card {
                transform: translate3d(0,0,0);
                -webkit-transform: translate3d(0,0,0);
                --ha-card-border-width: 0;
                margin-top: -4px;
                margin-bottom: -4px;
              }
              @keyframes Gradient {
                0% {
                  background-position: 0% 50%;
                }
                25% {
                  background-position: 50% 0%;
                }
                50% {
                  background-position: 100% 50%;
                }
                75% {
                  background-position: 50% 100%;
                }
                100% {
                  background-position: 0% 50%;
                }
              } 

Thanks for this awesome card btw

[remmob]

Hi Guys,

Is it possible to make the secondary_info into a template sensor?
I want to display the battery state and signal strength of my solar screens as secondary info.
Specially for the covercard, but other cards would be nice too.

[Sylwester (Sylwester Olik)]

Try to do the same how you did for icon

secondary: >-
  {% set mode = states('vacuum.roborock_vacuum_a15') %}
                  {% if mode == 'charging', %}
                  Status: ładowanie
                  {% elif mode == 'cleaning', %}
                  Status: sprzątanie
                  {% else %}

                  {% endif %}

or how you did with icon color

[jar87 (Jarosław Drewnicki)]

Thank You!

I dont know why i didnt found that earlier…

[jwaz73 (James)]

The process for animating the chips is different than in the cards. Have a look at this post…

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

Mushroom Animations - Part 5 Mushroom Chip Animations [Mushroom Chip Animated Scene]

Chip Animated Scene

type: custom:mushroom-chips-card chips: - type: template icon: mdi:mushroom icon_color: red - type: template icon: mdi:snail icon_color: brown - type: template icon: mdi:flower icon_color: amber - type: template icon: mdi:butterfly icon_color: cyan card_mod: style: mushroom-template-chip:nth-child(1)$: | ha-icon { anima…

[jwaz73 (James)]

Sorry, didn’t see the first reply until I was already clicking the reply button…

[fversteegen (Frank)]

Does anyone know how to do a conditional icon animation? Tried various flavors, but none appear to work. Best guess yaml thus far:

card_mod:
  style: |-
    ${ if states('sensor.droger_power') | float >1 {
      'ha-icon {--icon-animation: spin 1s linear infinite; }'
    } else {
    }}

[tbrasser (Thomas Brasser)]

card_mod:
  style: |
    ha-icon {
      {% if states('sensor.droger_power')|float > 1 %}
      --icon-animation: spin 1s linear infinite;
      {% endif %}
    }

[MrHollow]

Thanks for this, it’s looks beautiful

[sunny]

Perfekt, thank you so much! Will try to understand the lovelace_gen part. Looks interesting.

[Frusciantism]

Hello everyone!

I’m trying to put in my template as secondary information the state of the train line, the sensor tells me the state as “Ok” or “Problem”. However when i put the following code

{{ states('binary_sensor.idfm_a_vincennes_vincennes') }}

gives me the OFF information, when the real status is OK

Thanks to all!

[sjabby]

Is there a easy way to get the chips to look more minimalist ui?

I really like most of Mushroom but struggle with the chips as they don’t look very polished.

[Vintage89]

I’m getting this error in node red. What can I do of fix it?

[OBoudreaux]

Anyone have an idea on how to make a chip invisible? I have a section of my dashboard that uses conditional chips for notifications (trash day, freeze warning, etc.) but if none of them are active, the blocks below are shifted up.

I’m currently using a light chip to hold the vertical spacing constant. Instead, I would like to put an empty template chip without a border or fill. I have card-mod but I can’t figure out the css for for the chip background. (for the example below I’m using red instead of var(--card-background-color) just to make it easier to see than off black on black)

chips:
  - type: template
    card_mod:
      style: |
        ha-card {
          border-style: none;        #works
          background: red;           #does nothing
          background-color: red;     #does nothing
          color: red;                #does nothing
        }

[viper80 (Robert)]

I have a fan timer set, it counts down to 0.
timer.fan_timer_minutes

How to get this effect:

[bigverm23]

trying these out for the first time…can someone help me understand why my first 3 lights in the middle grid are so crunched, and how to resolve that?

title: Home
views:
  - title: Grid layout
    type: custom:grid-layout
    layout:
      grid-template-columns: 30% 35% 35%
      grid-template-rows: auto
      grid-template-areas: |
        "left middle right"
      mediaquery:
        '(max-width: 600px)':
          grid-template-columns: 100%
          grid-template-areas: |
            "left"
            "right"
        '(max-width: 800px)':
          grid-template-columns: 50% 50%
          grid-template-areas: |
            "header sidebar"
            "main main"
            "footer footer"
    cards:
      - type: custom:mod-card
        view_layout:
          grid-area: left
        card_mod:
          style: |
            ha-card {
              background: rgba(0,0,0,0.3);
              border-radius: 30px;
              padding: 10px;
            }
        card:
          type: vertical-stack
          cards:
            - type: custom:weather-card
              entity: weather.home
              name: Mt. Airy
              current: true
              details: false
              forecast: true
              hourly_forecast: false
              number_of_forecasts: '5'
              style: >
                ha-card {
                  background: rgba(255,255,255,0.2);
                  box-shadow: none;
                  border-radius: 30px;
                  height: 100%; # was 240px
                  }
                ha-card > div.forecast.clear.spacer > div:nth-child(n) >
                div.precipitation {
                  font-size: 12px;
                }

                ha-card > div.current > span.icon.bigger {
                  left: -2em;
                }

                ha-card > div.current > span.title {
                  left: 3.5em;
                  font-size: 32px;
                  font-weight: 300;
                  color: var(--secondary-text-color);
                }

                ha-card > div.current > span.temp {
                  color: var(--secondary-text-color);
                  font-size: 2.5em;
                  right: 1.3em;
                }

                ha-card > div.current > span.tempc {
                  color: var(--secondary-text-color);
                  margin-top: -10px;
                }
            - type: custom:mod-card
              card_mod: null
              style: |
                ha-card {
                  background: rgba(255,255,255,0.2);
                  box-shadow: none;
                  border-radius: 30px;
                  height: 100%; # was 240px
                  }
              card:
                type: grid
                columns: 3
                square: false
                cards:
                  - type: vertical-stack
                    cards:
                      - type: picture-entity
                        card_mod:
                          style: |
                            ha-card {
                              border-radius: 50px;
                              padding: 0px;
                              height: 70px !important;
                              width: 70px;
                              margin: auto;
                              margin-top: 5px;
                            }
                        show_name: false
                        show_state: false
                        action: none
                        entity: person.katie
                        state_image:
                          home: >-
                            https://www.life360.com/img/user_images/6993ff6a-32a6-4c78-8847-24ce0445486d/normalized_9f2552c0-6369-42a5-aef1-50daa478a079.jpg?fd=2
                          not_home: /local/katiebw.png
                          Lavoro Andre: null
                          Casa Pinto: null
                      - type: custom:button-card
                        entity: proximity.katie_home
                        show_icon: false
                        show_label: false
                        show_name: false
                        show_state: true
                        styles:
                          card:
                            - background: none
                            - font-size: 14px
                            - margin: auto
                          state:
                            - color: var(--secondary-text-color)
                  - type: vertical-stack
                    cards:
                      - type: picture-entity
                        show_name: false
                        show_state: false
                        action: none
                        entity: person.ken_vermillion
                        state_image:
                          home: /local/kenny.png
                          not_home: /local/kennybw.png
                          Lavoro Mary: null
                          Casa Pinto: null
                        card_mod:
                          style: |
                            ha-card {
                              border-radius: 50px;
                              padding: 0px;
                              height: 70px !important;
                              width: 70px;
                              margin: auto;
                              margin-top: 5px;
                            }
                      - type: custom:button-card
                        entity: proximity.kenny_home
                        show_icon: false
                        show_label: false
                        show_name: false
                        show_state: true
                        styles:
                          card:
                            - background: none
                            - font-size: 14px
                            - margin: auto
                          state:
                            - color: var(--secondary-text-color)
                  - type: vertical-stack
                    cards:
                      - type: picture-entity
                        card_mod:
                          style: |
                            ha-card {
                              border-radius: 50px;
                              padding: 0px;
                              height: 70px !important;
                              width: 70px;
                              margin: auto;
                              margin-top: 5px;
                            }
                        show_name: false
                        show_state: false
                        action: none
                        entity: person.addie
                        state_image:
                          home: >-
                            https://www.life360.com/img/user_images/d57efd85-ae7b-47f4-b148-20abb06f6f4d/3ff819d9-6086-4ef3-8efc-23362044262d.jpg?fd=2
                          not_home: >-
                            https://www.life360.com/img/user_images/d57efd85-ae7b-47f4-b148-20abb06f6f4d/3ff819d9-6086-4ef3-8efc-23362044262d.jpg?fd=2
                          Lavoro Andre: null
                          Casa Pinto: null
                      - type: custom:button-card
                        entity: proximity.addie_home
                        show_icon: false
                        show_label: false
                        show_name: false
                        show_state: true
                        styles:
                          card:
                            - background: none
                            - font-size: 14px
                            - margin: auto
                          state:
                            - color: var(--secondary-text-color)
            - type: custom:auto-entities
              show_empty: false
              card:
                type: entities
                show_header_toggle: false
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(255,255,255,0.2);
                      box-shadow: none;
                      border-radius: 30px;
                      height: 100%; # was 240px
                      }
              filter:
                include:
                  - entity_id: /[Bb]attery/
                    state: <=25
                  - entity_id: /[Ww]ater/
                    state: wet
              sort:
                method: state
                numeric: true
            - type: custom:atomic-calendar-revive
              entities:
                - entity: calendar.vermillion42_gmail_com
              showColors: true
              maxDaysToShow: 21
              maxEventCount: 7
              showMonth: true
              showNoEventsForToday: false
              refreshInterval: 30
              style: |
                ha-card {
                  background: rgba(255,255,255,0.2);
                  box-shadow: none;
                  border-radius: 30px;
                  height: 100%; # was 240px
                  }
                ha-card > div.cal-nameContainer > div {
                  font-size: 32px;
                  font-weight: 300;
                  color: var(--secondary-text-color);
                }
              tap_action: more-info
              firstDayOfWeek: 1
              showDate: false
              showHiddenText: false
              showEventIcon: true
              showWeekDay: true
              sortByStartTime: true
              calShowDescription: false
              dimFinishedEvents: false
              showLoader: false
              showLocation: true
              showCurrentEventLine: false
              showProgressBar: false
              locationTextSize: 90
              hoursFormat: 12h
      - type: custom:mod-card
        view_layout:
          grid-area: middle
        card_mod:
          style: |
            ha-card {
              background: rgba(0,0,0,0.3);
              border-radius: 30px;
              padding: 10px;
            }
        card:
          type: vertical-stack
          cards:
            - type: grid 
              title: Lights
              cards: 
                - type: custom:mushroom-light-card
                  entity: light.outside_lights
                  icon: mdi:coach-lamp
                  layout: horizontal
                  tap_action:
                    action: toggle
                - type: custom:mushroom-light-card
                  entity: light.family_room_lights
                  icon: mdi:coach-lamp
                  layout: horizontal
                  show_brightness_control: true
                  hide_state: false
                  tap_action:
                    action: toggle
                - type: custom:mushroom-light-card
                  entity: light.sunroom_lights
                  icon: mdi:coach-lamp
                  layout: horizontal
                  show_brightness_control: true
                  hide_state: false
                  tap_action:
                    action: toggle
              columns: 3
              square: false