Ah sorry didn’t see this update, It’s working now thanks.
Anyway to stop it animating when the state is off?
there is. I can’t remember but I think @dimitri.landerloos guide also has an example.
I haven’t tested but this should work
type: custom:mushroom-template-card
card_mod:
style: |
{% if 'on' in states('switch.4ch_relay_relay1') %}
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); }
}
{% else %}
{% endif %}
primary: ''
secondary: ''
icon: mdi:home
icon_color: green
1 Like
I would recommend that you put your if statements like this instead:
card_mod:
style: |
ha-state-icon {
{% if 'on' in states('switch.4ch_relay_relay1') %}
animation: cloudy 10s ease-in-out infinite, wind 5s infinite;
{% endif %}
}
@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); }
}
putting the if statements outside the elements that you are targetting and especially in between multiple elements tends to result in wonky behaviour.
2 Likes
Thankyou for correcting my code, much appreciated.
I’ve learnt something new 
plus for some reason I’ve always included {% else %} even if it’s not needed
Newbie here, can someone please help me with the code for changing a mushroom chip card’s background color based on the entity state (on/off)? I couldn’t seem to find it here!
Doe it go under card-mod?
Thanks.
The actual chip background or the color of the card background?
The chip background would be
type: custom:mushroom-chips-card
chips:
- type: entity
entity: your.device
card_mod:
style: |
ha-card {
--chip-background: {{ 'lime' if is_state(config.entity, 'on') else 'red' }};
}
Check out this guide. It will give you an idea of what standard options are and where card-mod is required.
Thanks for that quick one. I guess I’m still doing something wrong. Adding that in does nothing and breaks my other formatting for the chip.
EDIT: Added my relatively more complex chip template card code
type: custom:mushroom-chips-card
chips:
- type: template
entity: light.den
icon: |-
{% if is_state(entity, 'on') %}
mdi:sofa-single
{% else %}
mdi:sofa-single
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
#F97B22
{% else %}
#B4B4B8
{% endif %}
content: >-
Den: {{ expand(state_attr(entity, 'entity_id'))|
selectattr('state','eq','on')|map(attribute='entity_id')|list|count}} / {{
expand(state_attr(entity,
'entity_id'))|map(attribute='entity_id')|list|count }}
card_mod:
style: |
ha-card {
--chip-background: {{ 'lime' if is_state(light.den, 'on') else 'red' }};
box-shadow: none !important;
justify-content: right;
--chip-height: 35px;
--chip-border-radius: 0px;
--chip-icon-size: 18px;
--chip-font-size: 12px;
font-style: bold;
font-variant: small-caps;
padding-right: 0px;
padding-left: 0px;
font-family: "Roboto";
font-weight: bolder;
min-width: 70px !important;
}
If you a specifying the entity, you need single quotes around the entity.
--chip-background: {{ 'lime' if is_state('light.pine', 'on') else 'red' }};
- type: entity
entity: light.pine
tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:lamp
icon_color: green
content_info: none
card_mod:
style: |
ha-card {
--chip-background: {{ 'lime' if is_state('light.pine', 'on') else 'red' }};
justify-content: center;
--chip-height: 35px;
--chip-border-radius: 10px;
--chip-icon-size: 20px;
--chip-font-size: 9px;
font-style: bold;
font-variant: small-caps;
padding-right: 0px;
padding-left: 0px;
font-family: "Roboto";
font-weight: bolder;
min-width: 20px !important;
}
THANK YOU! Works like a charm! Also learned something new!
I’ll have another look at the Config guide. I just can’t seem to wrap my head around how to use .: | , or > or $
I’m just going to piggyback on your kind availability for another follow-up which I’ve been struggling with for days now.
If I were to add any sort of icon animation to this card, how would I go about formatting it into card-mod? Can you please draft an example code
Chips aren’t the best to start with. They are the most difficult to mod of the Mushroom Cards.
type: custom:mushroom-chips-card
chips:
- type: entity
entity: light.pc_lights
tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:lamp
icon_color: green
content_info: none
card_mod:
style: |
ha-card {
--chip-background: {{ 'lime' if is_state('light.pine', 'on') else 'red' }};
justify-content: center;
--chip-height: 35px;
--chip-border-radius: 10px;
--chip-icon-size: 20px;
--chip-font-size: 9px;
font-style: bold;
font-variant: small-caps;
padding-right: 0px;
padding-left: 0px;
font-family: "Roboto";
font-weight: bolder;
min-width: 20px !important;
}
card_mod:
style:
mushroom-entity-chip:nth-child(1)$: |
ha-state-icon {
animation: blink 2s linear infinite;
}
@keyframes blink { 50% {opacity: 0;} }
Thanks! What do you suggest I use as a card/template? I’m not yet there to use YAML for a complete card from scratch and mushroom chips offered some flexibility.
I see you’ve added a card-mod at the parent chip level - so if if I have multiple chips, I’d have to use child(2), child(3)…?
I’m assuming since you did it this way, there is no way of including this under style we used for the entity chip card?
Correct, Dimitri’s guide lays that out here. Understanding a template card is a good way to start.
There is also a section on understanding the shadow-root
If you are on Chrome, the Dev Tool helps layout the CSS structure as well. Right click and inspect or F12 will get you to the tool.
1 Like
Thank you. I’m going to do that now.
For some reason, your animation code didn’t seem to work for me. I’ve gone ahead and attempted to have it change based on state as well - I know it’s wrong, but if you will help me with figuring out the code.
type: custom:mushroom-chips-card
chips:
- type: template
entity: light.den
icon: |-
{% if is_state(entity, 'on') %}
mdi:sofa-single
{% else %}
mdi:sofa-single
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
#F97B22
{% else %}
red
{% endif %}
content: >-
Den: {{ expand(state_attr(entity, 'entity_id'))|
selectattr('state','eq','on')|map(attribute='entity_id')|list|count}} / {{
expand(state_attr(entity,
'entity_id'))|map(attribute='entity_id')|list|count }}
card_mod:
style: |
ha-card {
--chip-background: {{ 'lime' if is_state('light.den', 'on') else 'yellow' }};
box-shadow: none !important;
justify-content: right;
--chip-height: 35px;
--chip-border-radius: 0px;
--chip-icon-size: 18px;
--chip-font-size: 12px;
font-style: bold;
font-variant: small-caps;
padding-right: 0px;
padding-left: 0px;
font-family: "Roboto";
font-weight: bolder;
min-width: 70px !important;
}
card_mod:
style:
mushroom-entity-chip:nth-child(1)$: |
{% if is_state(entity, 'on') %}
ha-state-icon {
animation: blink 2s linear infinite;
}
@keyframes blink { 50% {opacity: 0;} }
{% else %}
ha-state-icon {
animation: blink 0s linear infinite;
}
@keyframes blink { 50% {opacity: 0;} }
{% endif %}
You switched to a template card so it not matching up.
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: blink 2s linear infinite;
}
@keyframes blink { 50% {opacity: 0;} }
Your If statement is also an issue.
If you just use
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: blink 2s linear infinite;
}
@keyframes blink { 50% {opacity: 0;} }
the animation works
card_mod:
style:
mushroom-template-chip:nth-child(1)$: >
ha-state-icon { animation: {{ 'blink 2s linear infinite;' if
is_state('light.den','on') else 'blink 0s linear infinite;' }}
}
@keyframes blink { 50% {opacity: 0;} }
Thanks a bunch! It’s 8:30AM where I live so off to work. I’m going to try this out in a few hours.
Thanks for the guidance - You’ve been awesome!
No problem! Happy to assist and have a good day…
I’m back only because for some reason the text color change code works for everyone but me!
Below is what was suggested by Dimitri and many others online:
card_mod:
style: |
ha-card {
--primary-text-color: blue;
}
This is me:
type: custom:mushroom-chips-card
chips:
- type: template
entity: light.den
icon: |-
{% if is_state(entity, 'on') %}
mdi:sofa-single
{% else %}
mdi:sofa-single
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
#F97B22
{% else %}
#D8AE7E
{% endif %}
content: >-
Den: {{ expand(state_attr(entity, 'entity_id'))|
selectattr('state','eq','on')|map(attribute='entity_id')|list|count}} / {{
expand(state_attr(entity,
'entity_id'))|map(attribute='entity_id')|list|count }}
card_mod:
style: |
ha-card {
--chip-background: {{ 'lime' if is_state('light.den', 'on') else '#FFF2D7' }};
box-shadow: none !important;
justify-content: right;
--chip-height: 35px;
--chip-border-radius: 10px;
--chip-icon-size: 18px;
--chip-font-size: 12px;
--primary-text-color: blue;
font-style: bold;
font-variant: small-caps;
padding-right: 0px;
padding-left: 0px;
font-family: "Roboto";
font-weight: bolder;
min-width: 70px !important;
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: >
ha-state-icon { animation: {{ 'blink 2s linear infinite;' if
is_state('light.den','on') else 'blink 0s linear infinite;' }}
}
@keyframes blink { 50% {opacity: 0;} }
Also, if I apply you background color conditional formatting to this, will it work? Something like the below?
--primary-text-color: {{ 'lime' if is_state('light.den', 'on') else '#FFF2D7' }};
try --text-color: blue; It should resolve your issue.
THANK YOU - AGAIN! Works like a charm - even with the conditional
How do I go about figuring this on my own without going crazy?