Please tell me how to make a chip with a condition? When I add the condition, my chip doesnāt show up when triggered
- type: conditional
conditions:
- entity: binary_sensor.lumi_lumi_sensor_motion_aq2_iaszone
state: 'on'
Thank you.
The animation is still frozen my friend.
Canāt seem to make it play. Somehow, the animations from your part 1 do work, the animations from part 3 I canāt make them run on that condition / custom chip card.
It shows, but itās a static icon.
working hereā¦
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.cycle_day
state: 'on'
- entity: binary_sensor.luz_kitchen
state: 'on'
chip:
type: template
icon_color: amber
icon: mdi:lightbulb-on
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
.content {
animation: illumination 2s infinite;
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 100%, 35% 60%, 35% 43%, 43% 35%, 65% 40%, 70% 75%, 100% 100%); }
}
Use dev tools to check the state of your binary_sensor.
Post your code and someone will help out.
I think whatās breaking it all is the background removal. Cus individually it works, but not on the complete card setting. No issue, Iāll rebuild them with the proper code, specifically with the " mushroom-template-chip:nth-child(1)$: |" options.
Thank you.
Another one for you, Iām able to make the background follow the state with this bit of code:
{% if is_state('light.lightstrip_kitchen_light', 'on') %}
background: rgba({{ (state_attr('light.lightstrip_kitchen_light', 'rgb_color') | join(',')) }},0.1)
How would this work for āicon_colorā inside a custom:mushroom-template-card?
icon_color: >-
{% if states('light.candeeiro_cozinha') == 'on' %}
#F5C02F
{% elif states('light.lightstrip_kitchen_light') == 'on' %}
'rgba({{ (state_attr('light.lightstrip_kitchen_light', 'rgb_color') |
join(',')) }},0.1)'
{% endif %}
This is returning me a white icon. Would be pretty cool if I was able to make the icon follow the LED RBG Color IF on. Thank you again.
You canāt use CSS there. It can only be used in card_mod.
Oh, I see.
So thereās no way to change the icon color dynamically?
Or thereās a different template to be added in the card_mod part?
Yes, something like this:
type: custom:mushroom-template-card
primary: Desk Light
icon: mdi:led-strip-variant
entity: light.office_desk_light
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'on') %}
{% set light_color = (state_attr(config.entity, 'rgb_color') | join(',')) %}
--icon-color: rgb({{ light_color }}) !important;
--shape-color: rgba({{ light_color }}, 0.1) !important;
{% endif %}
}
Does anyone know if this card has been adapted for the switch from Polymer to Lit?
Canāt find anything in the release notes.
1 Like
Thank you again.
Unfortunetely, still doesnāt work, in fact, itās breaking all the other code with it.
The background ādivisorā stopped showing, the icon size reduced size instead of being a little bigger too. Iām sorry for being so annoying, but this is harder than it seemed lol.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: input_boolean.room_kitchen
primary: Cozinha
secondary: >-
{{ states('sensor.temp_kitchen') | round(1) }}Ā°C | {{
states('sensor.humd_kitchen') | round(0) }}%
icon: mdi:fridge-outline
icon_color: blue
fill_container: true
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: cozinha
hold_action:
action: call-service
service: light.turn_off
data:
transition: 3
target:
area_id: kitchen
double_tap_action:
action: toggle
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 80px;
height: 65px;
margin-left: -18px !important;
}
mushroom-shape-icon {
{% if is_state(config.entity, 'on') %}
{% set light_color = (state_attr(config.entity, 'rgb_color') | join(',')) %}
--icon-color: rgb({{ light_color }}) !important;
--shape-color: rgba({{ light_color }}, 0.1) !important;
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if states('input_boolean.vacuum_kitchen') == 'off' %}
mdi:sprout-outline
{% endif %}
icon_color: pink
tap_action:
action: none
hold_action:
action: none
content_info: none
- type: template
icon_color: red
icon: |-
{% if states('input_boolean.vacuum_kitchen') == 'off' %}
mdi:sprout-outline
{% endif %}
entity: sensor.washing_machine
- type: template
icon_color: red
icon: |-
{% if states('input_boolean.vacuum_kitchen') == 'off' %}
mdi:sprout-outline
{% endif %}
entity: sensor.trockner
alignment: end
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
animation: spin 6s ease 1.5s infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
mushroom-template-chip:nth-child(2)$: |
ha-icon {
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
mushroom-template-chip:nth-child(3)$: |
ha-icon {
animation: shake 400ms ease-in-out infinite, drum 1s infinite;
transform-origin: 50% 65%;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
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); }
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-right: 6px;
}
card_mod:
style: |
ha-card {
height: 100px;
{% if is_state('light.lightstrip_kitchen_light', 'on') %}
background: rgba({{ (state_attr('light.lightstrip_kitchen_light', 'rgb_color') | join(',')) }},0.1)
{% elif is_state('light.candeeiro_cozinha', 'on') %}
background: rgba(245, 192, 47, 0.1);
{% endif %}
}
@EDIT:
I managed to fix the āconditionalā part. Instead of using conditions, Iām using ātemplatesā with states on the icons to show. It works. And letās me animate.
I just really need the Icon State thing to work if thatās possible. ALMOST THERE. 
After a long time away Iām back to further improving my dashboard - still the best looking one out there in my mind.
A simple request I canāt find the answer to. For the various rooms I only show temp and humidity on the home page (and eventually light the icon if the light in the room is on.
The code to show this is š”ļø{{ states('sensor.atc_9c32_temperature') | round(1) }}Ā°C š§{{ states('sensor.atc_9c32_humidity') | round(0) }}%
Where can I find the library of the icons (thermometer and water drop in this case) as Iām adding the battery level as well. I had a look at the mdi website but can only find the code to display the icons. I need the actual icons to copyā¦
Exactly what I was looking for
Thanks 
1 Like
Can you tell me what exactly I need to check? Which developer tools tab should I use?
You should go to Developer Tools > States > Search for binary_sensor.lumi_lumi_sensor_motion_aq2_iaszone and check what does it list.
Youāre looking for itās state. So whatās under the State Column, is the āOnā youāre looking for. If it isnāt on, you can see what it is there, and thatās what you need to type on the conditional.
Thanks for the quick reply. Its state is off, but when motion is detected, it changes to on. Tell me if Iām doing everything right? I choose the condition chip, and then in the condition tab I choose the required entity and specify the state on
If you intend that to only show if itās ON that exactly what you should be doing, yes.
When itās OFF isnāt gonna show anything. When itās ON itāll pass the condition.
The same would work for any other state. Imagine it was an alarm - for example - and you wanted it to show when you were away, youād put away there, so it would only show when the alarm state is away. If youāre home it doesnāt show cus the state is another.
You can even complicate it (I do that with some stuff), you can add states of TWO different entities. āIf lights AND motion onā for example, will show something, but both need to be on, otherwise it doesnāt show cus not all conditions are met.
1 Like
Thanks for your advice. What you said is very interesting. This worked for me. The only thing I will add in the chip tab is to add the same entity as in the condition tab
Hi @rhysb, I did and it works. However trying to use the same logic for a washing machine card and its not working.
Here is the code; where am I going wrong?
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: |-
{% set state=states(entity) %}
{% if state=='Running' %}
mdi:washing-machine
{% elif state== 'Delayed start' %}
mdi:washing-machine
{% elif state== 'Cycle is finished' %}
mdi:washing-machine
{% else %}
mdi:washing-machine-off
{% endif %}
secondary: |
Washing Machine
icon_color: |-
{% set state=states(entity) %}
{% if state=='Running' %}
green
{% elif state== 'Delayed start' %}
orange
{% elif state== 'Cycle is finished' %}
purple
{% else %}
grey
{% endif %}
primary: |2-
{% set d ={
'Delayed start': 'Delayed Start',
'Running': 'Running',
'Cycle is finished': 'Cycle Ended',
'Off': 'Off'
} %}
{{ d.get(states(entity)) }}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate_2
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite' if is_state(config.entity, 'Running') }}
transform-origin: 50% 110%;}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
Also would want to create weather button with multiple animations based on condition.