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

LiQuid_cOOled · February 20, 2024, 10:14am

You’ll have to get the pics of the icons you want to use, but google is easy for that

Just remember you can use the template badge for one icon, but the images let you put anything in the badge.

type: custom:mushroom-template-card
primary: Two Badges
secondary: more info
entity: light.pc_lights
icon: mdi:lightbulb
icon_color: white
tap_action:
  action: toggle
card_mod:
  style: |
    ha-state-icon::after {
      content: "";
      position: absolute;
      top: 0%;
      right: 70%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 14px;
      height:14px;
      border-radius: 50%;
      position: absolute;
      background-repeat: no-repeat;
      background-image: url("/local/pics/fire-red.png") !important;
      background-position: top;
      background-size: cover;
      font-size: 10px;

           }
      ha-state-icon::before {
      content: "";
      position: absolute;
      top: 0%;
      right: -6%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 14px;
      height:14px;
      border-radius: 50%;
      background-image: url("/local/pics/fire-red2.png") !important;
      background-position: top;
      background-size: cover;
      font-size: 10px;

         }

SoulAssassin · February 20, 2024, 10:36am

Incredible! I understood u correctly? - If I want to use several badges, should I use both in the template (in ::after and in ::before), and should I also refuse to use the standard badge icon (badge_icon:)? Or I can combined badge_icon: for first and use second icon in ::before?

LiQuid_cOOled · February 20, 2024, 10:39am

Yes and yes. You’ll be restricted to standard icons with the badge, so you could do a standard icon and a custom image. With option 2 you can do two custom images

LiQuid_cOOled · February 20, 2024, 10:51am

You can go crazy. This is something Dimitri put together during a previous post we were discussing.

type: custom:mushroom-template-card
icon: mdi:test-tube
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: none;
        --icon-symbol-size: 75px !important;
        --icon-size: 75px !important;
      }
      .shape:after {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        bottom: 27px;
        right: 32px;
        background: yellow; 
      }
      .shape:before {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        bottom: 27px;
        left: 12px;
        background: green; 
      }                    
    .: |
      ha-state-icon {
        color: transparent !important;
      }
      ha-state-icon:after {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 11px;
        left: 34px;
        background: red;
      }             
      ha-state-icon:before {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 11px;
        left: 12px;
        background: blue;
      }
      mushroom-shape-icon:after {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 7px;
        left: 23px;
        background: purple;
      }                       
      mushroom-shape-icon:before {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 25px;
        left: 38px;
        background: orange;
      }
      mushroom-state-item:after {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        bottom: 35px;
        left: 34px;
        background: lime;
      }
      mushroom-state-item:before {
        content: "";
        height: 10px;
        width: 10px;
        position: absolute;
        top: 37px;
        left: 19px;
        background: aqua;
      }                          
      ha-card {
        box-shadow: none;
        --ha-card-border-width: 0px;
        padding-bottom:28px;
        background: none;
      }

SoulAssassin · February 20, 2024, 11:17am

Ahah guys u 'r so crazy So good customizing stuff. Thanks for the clarification and help.

LiQuid_cOOled · February 20, 2024, 11:20am

lol…I’m a rookie. Only been at it since December, just a fast learner. Honestly some incredibly smart folks in this forum!!

Did semi competitive high end PC overclocking before this became my addiction!

SoulAssassin · February 20, 2024, 11:37am

One more q, as I see lock icon is cutted by round left-down and up-right, how to resize round border? My attempts to fix this have not been successful so far.

And by the way, I didn’t find one more point: is it possible to rigidly set the size of the icon to be used?

SoulAssassin · February 20, 2024, 11:40am

There are a lot of incredibly knowledgeable people here! I’ve been putting off playing with mushrooms for a very long time, but now it’s time to tidy up my dashboard a little.

LiQuid_cOOled · February 20, 2024, 11:47am

Yes we can use z-index to prevent the cutting and set the icon size to your liking. Can you post that card’s code?

SoulAssassin · February 20, 2024, 12:00pm

Right now, it’s your code, but with my image:

                ha-state-icon::after {
                  content: "";
                  position: absolute;
                  top: 0%;
                  right: 70%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 14px;
                  height:14px;
                  border-radius: 50%;
                  position: absolute;
                  background-repeat: no-repeat;
                  background-image: url("/local/lovelace/bathroom/lock-open-variant-outline.png") !important;
                  background-position: top;
                  background-size: cover;
                  #background: grey;
                  font-size: 10px;

                      }

LiQuid_cOOled · February 20, 2024, 12:15pm

almost there…

LiQuid_cOOled · February 20, 2024, 12:19pm

card_mod:
  style: |
    ha-state-icon::after {
      content: "";
      position: absolute;
      top: -1%;
      right: 75%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20px;
      height:20px;
      border-radius: 50%;
     background-image: url("/local/pics/lock-open-variant-outline.svg") !important;
      background-size: 80% 80%;
      background-repeat: no-repeat;
            }

SoulAssassin · February 20, 2024, 12:58pm

Wow, I will try this, thanks.

SoulAssassin · February 20, 2024, 1:05pm

Already something similar to the expected result, thanks again!

SoulAssassin · February 20, 2024, 2:01pm

A few more questions, I searched, but did’t find answers:

Is it possible to change the background color of a standard badge?
Is it possible to change the color of the image in the template badge?

I would like the standard badge to have a background color of gainsboro on the right, and a template badge to have a white image color left (or for an image, only the image itself needs to be changed?).

...
          badge_icon: |-
            {% if is_state('switch.bathroom_washing_machine_socket', 'on') %}
              mdi:power-plug-outline
            {% else %}
              mdi:power-plug-off-outline
            {% endif %}
          badge_color: |-
            {% if is_state('switch.bathroom_washing_machine_socket', 'on') %}
               amber
            {% else %}
            {% endif %}
...

...
                ha-state-icon::after {
                  content: "";
                  position: absolute;
                  top: -5%;
                  right: 80%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 16px;
                  height:16px;
                  border-radius: 50%;
                  position: absolute;
                  background-repeat: no-repeat;
                  background-image: url("/local/lovelace/bathroom/lock-open-outline.svg") !important;
                  background-position: top;
                  background-size: 80% 80%;
                  background: gainsboro;
                  font-size: 10px;
                      }
...

j.otte · February 20, 2024, 2:10pm

hi, what is the good format to move such icons cards?
thank you for helping,

type: custom:mushroom-template-card
primary: Wind
icon: mdi:weather-windy-variant
icon_color: blue
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: cloudy 10s ease-in-out infinite, wind 5s infinite; 
      }
      @keyframes cloudy {
        0%, 100% { transform: translateX(3px); }
        30% { transform: translateX(-1px); }
        45% { transform: translateX(1.5px); }
        75% { transform: translateX(-3.2px); }
      }
      @keyframes wind {
        0%, 50%, 100% { clip-path: inset(0 0 0 0); }
        25% { clip-path: inset(0 0 37% 0); }
      }

dimitri.landerloos · February 20, 2024, 4:42pm

I have made many many posts about the updates to the animations that now happend roughly 6 months ago.

ill do it 1 more time, but after this, if someone asks about why their animations arent working and they are using the old path to the icon. i will not be replying.

ha-icon was moved out of the shadow root of mushroom-shape-icon$:.

ha-icon was renamed to ha-state-icon for consistency with native cards.

--icon-animation was removed and replaced with just animation to avoid confusion.

--shape-animation still exists so that you can animate the shape around the icon.

so for your specific code it would be:

card_mod:
  style: |
    ha-state-icon {
      animation: cloudy 10s ease-in-out infinite, wind 5s infinite; 
    }
    @keyframes cloudy {
      0%, 100% { transform: translateX(3px); }
      30% { transform: translateX(-1px); }
      45% { transform: translateX(1.5px); }
      75% { transform: translateX(-3.2px); }
    }
    @keyframes wind {
      0%, 50%, 100% { clip-path: inset(0 0 0 0); }
      25% { clip-path: inset(0 0 37% 0); }
    }

I also updated all of the animations long ago now already:

SoulAssassin · February 20, 2024, 6:46pm

This is all mostly clear, thanks again.

But for example, I still can’t figure out how to correctly use the two built-in animations that u talked about in your posts about animation… Spin and Pulse, a little higher @LiQuid_cOOled showed me how to use animation for exclusively an icon in a chip card, I was able apply several animations, but I could not get the pulse to work in my chip card.

          card_mod:
            style:
              mushroom-template-chip:nth-child(1)$: |
               ha-state-icon {
                    animation: pulse 2s ease-in-out infinite;
                  }
                }

I can do this with content, but not just with the icon. In this matter, everything is not entirely clear, at least for me.

dimitri.landerloos · February 20, 2024, 6:50pm

If you are using a $ in your path to your element. like here for example:

mushroom-template-chip:nth-child(1)$: |

you should use keyframes. the built in animations dont work on all browsers when addressed through the shadow root of an element. the $ is to show you are going through a shadow root.

example of keyframes:

        @keyframes pulse {
          0% {opacity: 100%;}
          50% {opacity: 0%;}
          100% {opacity: 100%;}
        }

so in your example:

          card_mod:
            style:
              mushroom-template-chip:nth-child(1)$: |
                ha-state-icon {
                  animation: pulse 2s ease-in-out infinite;
                }
                @keyframes pulse {
                  0% {opacity: 100%;}
                  50% {opacity: 0%;}
                  100% {opacity: 100%;}
                }

to show the shadow-root as an example:

SoulAssassin · February 20, 2024, 6:54pm

Oh homie, so fast and so easy, but da*n I couldn’t come to this on my own. Thanks *1000