Nothing its change
@LiQuid_cOOled I mean something like this, like in person card or climate card out of box, but in template card:
have you found a solution? im trying without success
Hi, I have problem with modification, my theme: ios dark mode. After add modification background is still black, is it possible change this?
@SoulAssassin This will animate only the icon.
type: custom:mushroom-chips-card
chips:
- type: template
content: test
icon: mdi:fan
icon_color: red
- type: entity
content_info: none
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
1 Like
@LiQuid_cOOled absolutely. I literally spent the last 10 days going through this whole thread trying to learn so that I wouldn’t have to bother anybody. I just couldn’t get there. I appreciate any input you are willing to offer. I’d 100% prefer to learn opposed to having it handed to me. Thank you!!
Yes we can do that. I’ll put it together and explain what the steps are.
This is the standard way to add a badge to a template card
type: custom:mushroom-template-card
primary: Light Count Badge
secondary: more info
entity: light.pc_lights
icon: mdi:washing-machine
icon_color: white
tap_action:
action: toggle
badge_icon: mdi:circle
badge_color: red
card_mod:
style: |
mushroom-badge-icon {
--icon-color: white;
}
This is a highly customizable dual 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: "{{ states('sensor.lights_on') }}";
position: absolute;
top: 0%;
right: 70%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height:14px;
border-radius: 50%;
background-repeat: no-repeat;
background: red;
font-size: 10px;
}
ha-state-icon::before {
content: "{{ states('sensor.lights_on') }}";
position: absolute;
top: 0%;
right: -6%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height:14px;
border-radius: 50%;
background-repeat: no-repeat;
background: red;
font-size: 10px;
}
5 Likes
I believe this should work for you. the logic needed a different approach.
type: custom:mushroom-template-card
primary: |-
{% if is_state('binary_sensor.regensensor', 'on') %}
Het regent
{% else %}
Droog
{% endif %}
secondary: ''
icon: |-
{% if is_state('binary_sensor.regensensor', 'on') %}
mdi:weather-rainy
{% elif is_state('sun.sun', 'above_horizon') %}
mdi:weather-sunny
{% else %}
mdi:moon-waning-crescent
{% endif %}
entity: binary_sensor.regensensor
icon_color: |-
{% if is_state('binary_sensor.regensensor', 'on') %}
blue
{% else %}
yellow
{% endif %}
fill_container: true
multiline_secondary: true
tap_action:
action: more-info
card_mod:
style: |
ha-state-icon {
{% set k = states('binary_sensor.regensensor') %}
{% if (k == "on") %}
animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite;
{% elif (k == "off") %} animation: cloudy 0s ease-in-out infinite, rain 0s infinite;
{% endif %}
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px) }
30% { transform: translateX(-1px) }
45% { transform: translateX(1.5px) }
75% { transform: translateX(-3.2px) }
}
@keyframes rain {
50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%)}
} }
this is really great it works!!! what exactly did you modify because I need to get two more maps working,
this one for example:
- type: custom:mushroom-entity-card
entity: sensor.wind_gust
fill_container: true
icon_color: orange
icon: mdi:weather-windy-variant
layout: vertical
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); }
}
Thank u very much! 
Your animation was being applied to every state of binary_sensor.regensensor. I simply separated the animation to apply only run when your sensor was "on " (rainy)
The remainder of your code was great and I’m sure my code can be streamlined even more.
This animation works, some animation I try works also, but I can’t get pulse animation in chip. 
Post the code please. Animations have become fickle especially with If statements
Btw, it’s possible to show two badge icon without text?
I tried like this:
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: pulse 2s ease-in-out infinite;
}
Yes, but you have to use a image(for the icon) for the second badge. Still easy!
1 Like
I’m trying to close my case using several badges on my washing machine, where one of them is the socket, and the second is the status of the hatch, whether it is closed or not. 
I’ll send you what you need
1 Like