Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

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?

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

1 Like

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

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;
      }
1 Like

Ahah guys u 'r so crazy :sweat_smile: So good customizing stuff. :fire: :+1: Thanks for the clarification and help.

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! :rofl:

1 Like

image

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?

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. :sweat_smile:

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?

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;

                      }

almost thereā€¦

image

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

1 Like

Wow, I will try this, thanks.

image

Already something similar to the expected result, thanks again!

A few more questions, I searched, but didā€™t find answers:

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

image

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

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

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:

6 Likes

This is all mostly clear, thanks again. :+1:

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.

1 Like

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:
image

1 Like

Oh homie, so fast and so easy, but da*n :frowning: I couldnā€™t come to this on my own. :man_facepalming:Thanks *1000 :muscle: :+1:

1 Like

This topic was automatically closed after reaching the maximum limit of 10000 replies. Continue discussion at Mushroom Cards - Build a beautiful dashboard easily :mushroom: (Part 2).