You will want to use the Mushroom Template card instead.
cant use template conditions in any of the other cards.
I tried that also, but i canāt get the template card to display the entities output (EV connected etc)
put in a template in the āprimaryā text field that states if is state EV Disconnected then EV Disconnected. just as you have done for your color 
like this:
primary: |-
{% if is_state('sensor.myenergi_zappi_24887740_plug_status', 'EV Connected') %}
EV Connected
{% elif is_state('sensor.myenergi_zappi_24887740_plug_status', 'EV Disconnected') %}
EV Disconnected
{% elif is_state('sensor.myenergi_zappi_24887740_plug_status', 'Charging') %}
Charging
{% endif %}
Thank you very much obviously i have lots to learn how these are put together.
The below seems to be working for me.
type: custom:mushroom-template-card
primary: Hedwig Status
secondary: |2-
{% if is_state('sensor.myenergi_zappi_20_plug_status', 'EV Connected') %}
EV Connected
{% elif is_state('sensor.myenergi_zappi_2440_plug_status', 'EV Disconnected') %}
EV Disconnected
{% elif is_state('sensor.myenergi_zappi_240_plug_status', 'Charging') %}
Charging
{% endif %}
icon: mdi:ev-plug-ccs2
entity: sensor.myenergi_zappi_24887740_plug_status
icon_color: |2-
{% if is_state('sensor.myenergi_zappi_2740_plug_status', 'EV Connected') %}
amber
{% elif is_state('sensor.myenergi_zappi_2440_plug_status', 'EV Disconnected') %}
red
{% elif is_state('sensor.myenergi_zappi_2440_plug_status', 'Charging') %}
green
{% endif %}
layout: vertical
multiline_secondary: true
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
Hi All,
I have posted my guide HERE. for configuring mushroom cards with card mod.
i have hit the post limit on that topic for today, but i will continue to update it with each card. the sections are already written, so its just about getting to post each of them as a reply
@paddy0174 FYI 
10 Likes
Simple question I hope: I have a chips card with a fan switch toggle button. See code below (section entity switch alle badfans).
The issue I am having is - there are two fans, if one is on OR already off, when using this toggle button I turn one off and the other one. And not both on OR off. How to fix this? There is no condition option in the GUI editor. If I change the command to off or on - then I canāt toggle.
type: custom:mushroom-chips-card
chips:
- type: entity
entity: light.allelampenbinnen
content_info: name
tap_action:
action: call-service
service: light.turn_off
target:
entity_id: light.allelampenbinnen
data: {}
icon_color: accent
name: Uit
use_entity_picture: false
- type: entity
entity: switch.allebadfans
icon: mdi:fan
icon_color: accent
content_info: none
tap_action:
action: call-service
service: switch.toggle
target:
device_id:
- abcaa141710f3f7bc300449d8ade9f8c
- 7d89670c4a1e7b0222003514bfdb8124
data: {}
- type: weather
entity: weather.forecast_thuis
show_conditions: false
show_temperature: true
- type: entity
entity: sensor.p1_meter_5c2faf040d18_active_power
- type: entity
entity: sensor.watermeter_3c39e72f739a_active_water_usage
Instead of calling a toggle service maybe call a script service that checks the status of each of the fans before changing the states.
So just make your script first. Then test until it works the way you expect.
And then call the script on tap instead like this:
tap_action:
action: call-service
service: script.yourscriptnameoridhere
card_mod: null
style: |
ha-state-icon {
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if states('sensor.wasmachine_watt') | float > 5 }}
}
@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); }
}
is this good, he is now alwais animated and thats its not good
hey guys, trying to have a template card display itās state as secondary information. I have a door sensor that the primary info is Front Door, i want the secondary info to say Open or Closed, or whatever the state is. Any help would be much appreciated.
Like this:
card_mod:
style: |
ha-state-icon {
{{ 'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if states('sensor.wasmachine_watt') | float > 5 }}
}
@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); }
}
You had broken your if statement block because for you the if statement was combined with the animation.
This is why i prefer to do it like this. Just makes it easier to see what is going on.
card_mod:
style: |
ha-state-icon {
{% if states('sensor.wasmachine_watt') | float > 5 %}
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
{% else %}
{% endif %}
}
@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); }
}
1 Like
Yes. Just add the below in your secondary (of course change with your own binary sensor.)
{% if states('binary_sensor.bedroom_wardrobe_right_contact') == 'on' %}
Open
{% else %}
Closed
{% endif %}
If you want it to instead show any state the entity is. Use this instead.
{{ states('yourdevicetype.yourdevicename') }}
1 Like
thanks so much, worked perfectly.
1 Like
Hey guys,
I am trying to implement the trash can animation. However, the stack in card kina gives me a headache.
I have managed to implement everything I wanted with ONE exception. In the screenshot you can kinda see that the border of the card with the lid animation is visible behind the blue.
It IS very hard to see here though. In my dashboard it is a fine gray line surrounding the blue.
I do not know how to get rid of it. Changing the height of the ālid animationā card does not change anything and I do not know what else to change.
Here is the code:
type: conditional
conditions:
- entity: input_boolean.mulltonnenleerung
state: 'off'
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:trash-can
entity: calendar.muell
icon_color: |
{% set state=state_attr('calendar.muell','message') %}
{% if state=='Wertstoff' %}
green
{% elif state=='Papier' %}
blue
{% else %}
brown
{% endif %}
tap_action:
action: navigate
navigation_path: /calendar
badge_color: ''
primary: >-
{% if (states('calendar.muell') == 'on') %}
Heute wird die {{state_attr('calendar.muell','message')}}tonne geleert.
{% else %} Morgen wird die
{{state_attr('calendar.muell','message')}}tonne geleert. {% endif %}
secondary: |-
{% if (states('calendar.muell') == 'on') %}
MĆ¼lltonne rausgestellt?
{% else %}
Rausstellen nicht vergessen.
{% endif %}
card_mod:
style: |
ha-card {
border-color: {% if is_state_attr('calendar.muell','message', 'Wertstoff') %} #008000 {% elif is_state_attr('calendar.muell','message', 'Papier') %} #0066ff {% else %} #8B4513 {% endif %};
border-style: inset; border-width: 05px;
background-color: {% if is_state_attr('calendar.muell', 'message', 'Wertstoff') %} rgb( 31 139 34 / 0.1) {% elif is_state_attr('calendar.muell', 'message', 'Papier') %} rgb( 102 163 254 / 0.1) {% else %} rgb( 139 69 19 / 0.1){% endif %};
}
ha-state-icon {
clip-path: inset(25% 0 0 0);
}
- type: custom:mushroom-template-card
icon: mdi:trash-can
icon_color: |
{% set state=state_attr('calendar.muell','message') %}
{% if state=='Wertstoff' %}
green
{% elif state=='Papier' %}
blue
{% else %}
brown
{% endif %}
card_mod:
style: "ha-state-icon {\n animation: lid 1s ease infinite;\n clip-path: inset(0 0 75% 0);\n transform-origin: 50% 25%;\n }\n@keyframes lid {\n 0%, 50%, 80%, 100% { transform: translateY(0); }\n 10% { transform: translateY(-5px) rotate(-37deg); }\n 20% { transform: translateY(-5px) rotate(31deg); }\n 30% { transform: translateY(-5px) rotate(-25deg); }\n 40% { transform: translateY(-5px) rotate(19deg); }\n 60% { transform: translateY(-3px); }\n }\n\nha-card {\n width: 10px;\n top: -72px;\n left: 5px;\n border: none;\n height: 60px; \n }\t\n"
card_mod:
style: |
ha-card {
height: 78px;
}
I appreciate the help!!
1 Like
If i understand your question correctly the issue is the slight grey outline on the very edge of your entire card?
If so just try and add
border: none !important;
To your last ha-card section.
Also you had some issues in your structure for the animation in general. Below is it fixed. Will make it easier to diagnose issues in the future
type: conditional
conditions:
- entity: input_boolean.mulltonnenleerung
state: 'off'
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:trash-can
entity: calendar.muell
icon_color: |
{% set state=state_attr('calendar.muell','message') %}
{% if state=='Wertstoff' %}
green
{% elif state=='Papier' %}
blue
{% else %}
brown
{% endif %}
tap_action:
action: navigate
navigation_path: /calendar
badge_color: ''
primary: >-
{% if (states('calendar.muell') == 'on') %}
Heute wird die {{state_attr('calendar.muell','message')}}tonne geleert.
{% else %} Morgen wird die
{{state_attr('calendar.muell','message')}}tonne geleert. {% endif %}
secondary: |-
{% if (states('calendar.muell') == 'on') %}
MĆ¼lltonne rausgestellt?
{% else %}
Rausstellen nicht vergessen.
{% endif %}
card_mod:
style: |
ha-card {
border-color: {% if is_state_attr('calendar.muell','message', 'Wertstoff') %} #008000 {% elif is_state_attr('calendar.muell','message', 'Papier') %} #0066ff {% else %} #8B4513 {% endif %};
border-style: inset; border-width: 05px;
background-color: {% if is_state_attr('calendar.muell', 'message', 'Wertstoff') %} rgb( 31 139 34 / 0.1) {% elif is_state_attr('calendar.muell', 'message', 'Papier') %} rgb( 102 163 254 / 0.1) {% else %} rgb( 139 69 19 / 0.1){% endif %};
}
ha-state-icon {
clip-path: inset(25% 0 0 0);
}
- type: custom:mushroom-template-card
icon: mdi:trash-can
icon_color: |
{% set state=state_attr('calendar.muell','message') %}
{% if state=='Wertstoff' %}
green
{% elif state=='Papier' %}
blue
{% else %}
brown
{% endif %}
card_mod:
style: |
ha-state-icon {
animation: lid 1s ease infinite;
clip-path: inset(0 0 75% 0);
transform-origin: 50% 25%;
}
@keyframes lid {
0%, 50%, 80%, 100% { transform: translateY(0); }
10% { transform: translateY(-5px) rotate(-37deg); }
20% { transform: translateY(-5px) rotate(31deg); }
30% { transform: translateY(-5px) rotate(-25deg); }
40% { transform: translateY(-5px) rotate(19deg); }
60% { transform: translateY(-3px); }
}
ha-card {
width: 10px;
top: -72px;
left: 5px;
border: none;
height: 60px;
}
card_mod:
style: |
ha-card {
height: 78px;
border: none !important;
}
1 Like
what if i just want to show the last time the state changed as the secondary info?
I had the animation part the same way you wrote it. After saving it in HA and reopening the code it looked like what I postedā¦ So I assumed it wouldnāt make much of a difference except in readability.
I will correct it again!
Thank you so much for your help. That was the last part I still had to fix to make it look like I wanted it!! That concludes hours of work 
1 Like
Thats a bit harder depending on your exact requirements and will never really be perfect as it wont survive a HA restart.
So it will restart at 0 when HA restarts no matter what.
But the best version i have found is this:
{%- set time = (as_timestamp(now()) - as_timestamp(states.binary_sensor.bedroom_wardrobe_right_contact.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }}
Its the most flexible i have found because it counts days as well. Most code you find for this only counts hours and resets at 24 hours unfortunately. This works perfectly like youād expect
1 Like
For some reason this card sometimes displays like this;
(which is good)
And sometimes like this:
(which is not good)
This last one throws errors in Chrome Developer Tools:
This the code of the card:
type: custom:vertical-stack-in-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
primary: '{{states(''sensor.p1_meter_3c39e72cd756_active_power'')}} W'
secondary: Stroom
icon: mdi:power-plug
icon_color: green
entity: sensor.p1_meter_3c39e72cd756_active_power
- type: custom:mushroom-template-card
primary: '{{states(''sensor.gasverbruik_per_uur'')}} mĀ³'
secondary: Gas
icon: mdi:gas-burner
entity: sensor.gasverbruik_per_uur
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.p1_meter_3c39e72cd756_active_power
name: Temperature
color: var(--green-color)
- entity: sensor.gasverbruik_per_uur
name: Humidity
color: var(--blue-color)
y_axis: secondary
hours_to_show: 12
points_per_hour: 6
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
Any ideas? Thanks.
Edit #1: Saw a post in another topic:
Going to try that now.
1 Like
please i dont not understand more, we have change but is not good working
card_mod:
style: |
ha-state-icon {
animation: spin 0.5s linear infinite reverse;' if states('sensor.hybride_pomp_power') | float > 24 }}
border-radius: 50%;
border: 8px dotted rgb(var(--rgb-red));
}
.shape {
border: 4px dashed rgb(var(--rgb-green));
{{ '--shape-animation: spin 2s linear infinite;' if states('sensor.hybride_pomp_power') | float > 24 }}
--shape-color: none;
--icon-symbol-size: 5px;
--icon-size: 34px;
}
Is it possible to change the background color of a chip card depending on the state of a sensor? I know that the icon_color can be changed, but I need to change the background. Any help would be appreciated!