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.
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 
So good customizing stuff. 
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! 
1 Like
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.
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…
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.
Already something similar to the expected result, thanks again!
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;
}
...
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.
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:
1 Like
Oh homie, so fast and so easy, but da*n 
I couldn’t come to this on my own. 
Thanks *1000 
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 
(Part 2).