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

[Greminn (Simon)]

Thanks for the reminder!

type: custom:stack-in-card
mode: vertical
keep:
  background: false
  box_shadow: false
  margin: false
  outer_padding: true
  border_radius: false
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Next Rubbish Collection
        secondary: '{{ states("input_select.next_rubbish_collection_type") }} this Friday'
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod: null
        style: |
          ha-card {
            --card-primary-font-weight: 400;
            --card-secondary-font-weight: 400;!important;
            #margin-top: -5px;
            #margin-bottom: -5px;
          }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            content: ''
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: mdi:trash-can
            icon_color: >-
              {% if is_state('input_select.next_rubbish_collection_type',
              'Rubbish & Garden') %}
                red
              {% elif is_state('input_select.next_rubbish_collection_type',
              'Recycling & Glass') %}
                grey
              {% endif %}
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}red{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}grey{% endif %}), 0.2) !important;
                  border: none;
                  box-shadow: none;
                  top:5px;
                }
                ha-card:after {
                  content: "{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}done{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}close{% endif %}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}red{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}grey{% endif %}));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
          - type: template
            content: ''
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: mdi:trash-can
            icon_color: >-
              {% if is_state('input_select.next_rubbish_collection_type',
              'Rubbish & Garden') %}
                green
              {% elif is_state('input_select.next_rubbish_collection_type',
              'Recycling & Glass') %}
                grey
              {% endif %}
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}green{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}grey{% endif %}), 0.2) !important;
                  border: none;
                  box-shadow: none;
                  top:5px;
                }
                ha-card:after {
                  content: "{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}done{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}close{% endif %}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}green{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}grey{% endif %}));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
          - type: template
            content: ''
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: mdi:trash-can
            icon_color: >-
              {% if is_state('input_select.next_rubbish_collection_type',
              'Rubbish & Garden') %}
                grey
              {% elif is_state('input_select.next_rubbish_collection_type',
              'Recycling & Glass') %}
                yellow
              {% endif %}
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}grey{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}yellow{% endif %}), 0.2) !important;
                  border: none;
                  box-shadow: none; 
                  top:5px;
                }
                ha-card:after {
                  content: "{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}close{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}done{% endif %}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}grey{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}yellow{% endif %}));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
          - type: template
            content: ''
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
            icon: mdi:bottle-wine
            icon_color: >-
              {% if is_state('input_select.next_rubbish_collection_type',
              'Rubbish & Garden') %}
                grey
              {% elif is_state('input_select.next_rubbish_collection_type',
              'Recycling & Glass') %}
                blue
              {% endif %}
            card_mod:
              style: |
                ha-card {
                  background: rgba(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}grey{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}blue{% endif %}), 0.2) !important;
                  border: none;
                  box-shadow: none;
                  top:5px;
                }
                ha-card:after {
                  content: "{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}close{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}done{% endif %}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-{% if is_state('input_select.next_rubbish_collection_type', 'Rubbish & Garden') %}grey{% elif is_state('input_select.next_rubbish_collection_type', 'Recycling & Glass') %}blue{% endif %}));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -5px;
                  right: -5px;
                  width: 16px;
                  height: 16px;
                  font-size: 11px;
                  font-family: 'Material Icons';
                }
        alignment: end
        card_mod:
          style: |
            ha-card {
              top: 10px;
              right: 10px;
            }

[Dane31 (Dane)]

thankyou, and will do. I’ll test this out later today. Can you explain the difference between the two methods, i have not seen the host function before?

[weppa]

Legend! Thanks @Greminn

[Greminn (Simon)]

Ha! @weppa I like your icon use… have updated mine as well:

[johnhedge]

With the help of you and my son, I’ve been introduced to coding/yaml behind HA and I’ve now got a light counter and date displayed on my Mushroom card

[dimitri.landerloos]

Very happy to hear it! if you need any help feel free to message me directly. and if you want, check out my guide on css modifications with card mod on Mushroom Cards here:

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

[akeslo]

Thanks for this, this is handy! I’ll keep this card in mind.

Here is where I landed with the mushroom cards

[Jarne_Roussard]

hey can you share tis code or media card ?

[KingFisher]

Got it! Thanks again!

[KingFisher]

Hi Andrea, could you share the code for the multimedia page - it looks great!

[Jimmy_Berglund]

Thx man been looking for a answer on this for hours. Thx for sharing the info.

[schumi2004]

I must be doing something wrong but i added a few (diswasher, dryer and washingmachine) as test to my dashboard, assigned a input_boolean to it for testing purpose but none of the animations is working?

I have al lthe requirements installed so have no clue what is going wrong.

type: custom:mushroom-template-card
icon: mdi:dishwasher
icon_color: blue
primary: Dishwasher
entity: input_boolean.vaatwasser
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
        transform-origin: 50% 75%;
      }
      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
        40% { transform: translateY(-1.2px) rotate(5deg); } 
        60% { transform: translateY(-1.1px) 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); }
      }

[Mosher]

Hey,

could you please share this card YAML?

Thank you

[Mosher]

Hey,

what cards for Progress and Graph do you use?

Could you please share YAML?

Thanks

[cloudbr34k (Apples)]

Hey all, for some reason i cant figure out (NFI really) why when I put my cards in horizontal stack, the chips at the bottom are not displayed when I exit the GUI

Code for anyone interested - https://pastecode.io/s/dwai9o2z

[dimitri.landerloos]

This has been posted many times recently, but how animations are applied changed a few months back.

see the updated animations below:

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 …

[dimitri.landerloos]

post your yaml in the message itself.

people are not going to click a link no matter how trustworthy you may seem

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

[schumi2004]

I did do a search from bottom to top on terms like wobble, blink etc, tried several examples with chips and not but none of them worked. I did see your post but i thought it was a copy of rhysb’s post so skipped it.

Your updated versions work, thanks

[dimitri.landerloos]

Hi All,
I dont condone cross-posting, but i hope it will be a allowed in this instance as i just wanted a wider group to know about the alternative to the light card horizontal layout i created.

i didnt like the fact that a bunch of space is being wasted, and that you have very limited room for the slider. so i built this:

and its alternative that keeps the text in 2 rows:

check out the post with all of the details here:

Mushroom Inspiration!

Hi All, I have built an alternative to the existing mushroom horizontal layout that currently exists with card_mod: [image] i didnt like the fact that a bunch of space is being wasted, and that you have very limited room for the slider. so i built this: [image] and its alternative that keeps the text in 2 rows: [image] You need to ensure that you have layout: horizontal in your card it works with no buttons, 1 button or both of the buttons: [image] it will auto adjust th…

[nodz (Nelson Oliveira)]

Amazing cards… Did anyone create a great looking card for vacuum?