I have done it like this now:
card_mod:
style: |
ha-card {
--chip-background: transparent;
--chip-border-color: transparent;
}
Is that the right way?
With that you are making it so all chips have no background and no border. If thats what you want then sure.
Otherwise if you only want to change one at a time you need to make sure you place the card mod under the chip itself like this for example.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
card_mod:
style: |
ha-card {
border: inset blue 2px !important;
}
- type: template
icon: mdi:test-tube
card_mod:
style: |
ha-card {
border: outset green 2px !important;
}
What you have used is like this:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
- type: template
icon: mdi:test-tube
card_mod:
style: |
ha-card {
border: outset green 2px !important;
}
And this will apply to the card containing the chips, instead of the chip itself.
Thanks! good to know the difference to 
Template card with vertical layout.
Iām looking to bring the Off (primary) up closer to the bottom of the button and struggling.
Any help is appreciated. Thanks!
Please do post what you have tried next time 
type: custom:mushroom-template-card
primary: 'Off'
secondary: Test
icon: mdi:power
layout: vertical
card_mod:
style:
mushroom-state-info$: |
.primary {
position: relative;
bottom: 10px !important;
}
Hi guys 
I have this interesting problemā¦ I would like to animate a chip card with the condition.
If I write the script like this, the icon is displayed when āinput_boolean.vd_testā is turned on, but the animation does not work 
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: input_boolean.vd_test
state: 'on'
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.vd_test
icon: mdi:test-tube
icon_color: red
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: pulse 2s ease-in-out infinite;
}
But when I create a classic ācustom:mushroom-template-cardā the animation works normally 
type: custom:mushroom-template-card
icon: mdi:pulse
icon_color: accent
primary: ''
secondary: Aktivita domƔcnosti
card_mod:
style: |
ha-state-icon {
animation: pulse 2s ease-in-out infinite;
}
ha-card {
border: unset;
background: unset;
padding-left: 0px !important;
{
Does anyone know where the problem might be? 
I am redesigning a mobile dashboard and would like to display chip cards based on conditions. Of course animated icons 
For example, if the washing machine is on, show the icon and animate it.
Thank you in advance for any help! 
@dimitri.landerloos , i tried this card mod code. the static boder line works. the animated border does not work on this card.
im trying to show the border when there is motion, for now the border stays ad all time. Can you pherhaps point me in the right direction?
the code:
show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.oprit
camera_image: camera.oprit
aspect_ratio: 16x9
card_mod:
style: |
ha-card {
-- if (binary_sensor.motion_sensor_inloopkast_occupancy == 'on') return;
border: 2.5px outset red
}
the output:
the red border is there all the time.
Hi Jeroen,
- Your question has nothing to do with mushroom cards. This topic can only really help you with that.
- What you seem to be applying is not yaml or css.
A yaml template controlling whether the border should be shown or not would be something like this:
type: custom:mushroom-template-card
icon: mdi:test-tube
card_mod:
style: |
ha-card {
{% if states('binary_sensor.hallway_motion_sensor_occupancy') == 'on' %}
border: red outset 2px !important;
{% endif %}
}
You can only mix yaml templates with the CSS in card mod. Nothing else. Any state output of the yaml template is rendered as is in the CSS btw.
point 1, youre right! i have a lot of mushroom card, and this is I think the only not mushroom card, found youre ācard modā guide
and i toughed i will askā¦ you never no.
but , it is working now wiht youre code! So thank you verry much.
I have the same problem, I think chips donāt support animation icons.
Not true. But there does seem to be an issue with the built in animations:
I see you pointed out to at some keyframes, I tried the dishwasher etc, they have already keyframes.
On an entity card they work, when I take a chips card it wonāt work.
Show me what you have tried. I have multiple chip animations.
Examples:
On a entity card its working code:
type: custom:mushroom-template-card
icon: mdi:dishwasher
icon_color: '{{ ''blue'' if is_state(''binary_sensor.vaatwasser_status'', ''on'') }}'
primary: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('binary_sensor.vaatwasser_status', 'on') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
on a chip card not, code
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:dishwasher
icon_color: |-
{% if is_state('binary_sensor.vaatwasser_status', 'on') %}
blue
{%endif%}
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('binary_sensor.vaatwasser_status', 'on') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
-
Not how you apply almost anything to the chips. You can only do things to the background of the chip by targeting the chip directly like this.
-
You are using an old animation. I have updated those animations from Rhysb. Its in the first post in the topic.
Do it like this instead.
Code
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:dishwasher
icon_color: |-
{% if is_state('binary_sensor.vaatwasser_status', 'on') %}
blue
{%endif%}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{{ 'animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('binary_sensor.vaatwasser_status', 'on') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
I dont mean this in any rude way or with any slight, but it does not feel like you have actually read any of these posts? There is a specific chip section even with animation examples for both the background and icon of the chipsā¦
Also just to add that there is no way that your first card animation works either unless you are using a version of mushroom from at least 6 months ago.
For your template card it would be like this:
Code
type: custom:mushroom-template-card
icon: mdi:dishwasher
icon_color: '{{ ''blue'' if is_state(''binary_sensor.vaatwasser_status'', ''on'') }}'
primary: ''
card_mod:
style: |
ha-state-icon {
{{ 'animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('binary_sensor.vaatwasser_status', 'on') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
2 Likes
thx for youre reply,
i did try to find &search some info before i ask something.
the code for the chip is not working for me, i get the coler etc. but not the animation.
And the new code that you showd me for the entity cardā¦ strangeā¦ but not working, while my ā oldā code of the animation is working
What version of mushroom - card mod - etc are you using?
card mod: 3.2.2
mushroom: 2.6.3
both have updateās, i will make a back-up, update both, and try again.
That will be why. Both outdated. Get ready for all your existing mushroom animations breaking and needing an update.
Dont forget to manually clear your cache from browser/app after any card mod update.
oke, i have update card mod + mushroom, youre code for the chips is working now! thx.
i will search for the post about the new animation codes
1 Like