one other question. Is there a way to use a template sensor with color code to use as icon color?
Help.
The color og secondary text color is not responding to the template
type: custom:mushroom-template-card
primary: Bad
secondary: |-
{{states ('sensor.sensor_bad_1_etg_temperature')}}°C
-
{{states ('sensor.sensor_bad_1_etg_humidity')}}%
icon: mdi:bathtub
entity: switch.double_switch_2_current_value
icon_color: |-
{% if is_state('switch.double_switch_2_current_value', 'on')%}
orange
{% else %}
blue
{% endif %}
badge_icon: mdi:fan
badge_color: |-
{% if is_state('switch.double_switch_2_current_value', 'on')%}
blue
{% endif %}
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/bad
hold_action:
action: toggle
fill_container: true
card_mod:
style: |
mushroom-badge-icon {
{% if is_state('switch.double_switch_2_current_value_2', 'on')%}
animation: spin 1s linear infinite;
{% else %}
display: none;
{% endif %}
}
ha-state-icon {
--icon-symbol-size: 30px;
}
secondary-text-color {
{% if is_state('climate.floor_thermostat', 'heat') %}
red
{% elif is_state('climate.floor_thermostat', 'off') %}
#03A9F4
{% else %}
#6c6c75
{% endif %}
}
I respect your time @dimitri.landerloos , hope you’re able to help me out some day.
Or @LiQuid_cOOled eventually?
Many thanks and have a great day!
There is a lot going on with your card mod. Play around with this and we’ll go from there.
card_mod:
style: |
mushroom-badge-icon {
animation: spin 750ms linear infinite;
}
ha-card {
--icon-symbol-size: 10px;
{% if is_state('climate.floor_thermostat', 'heat') %}
--secondary-text-color: blue !important;
--primary-text-color: green !important;
{% else %}
--secondary-text-color: red !important;
--primary-text-color: yellow !important;
{% endif %}
--icon-symbol-size: 10px;
}
We can consolidate the code, but check out @dimitri.landerloos guide about .: | and animations.
1 Like
Hi everyone, I’m going crazy, I can’t get this animation to work, please help me. Thank you.
type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: '{{ ''red'' if states(''sensor.casa_delle_fate_riscaldamento'') | float > 1 }}'
primary: null
secondary: '{{states(''sensor.termosifoni_temperature'') + ''%'' }}'
card_mod:
style: |
ha-state-icon {
{% if is_state('sensor.casa_delle_fate_riscaldamento') | float > 1 }
--card-mod-icon: mdi:radiator-off
{% else %}
--card-mod-icon: mdi:bulb;
animation: clip 1.5s linear infinite;
{% endif %};
}
@keyframes clip {
0% { clip-path: inset(50% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
mushroom-shape-icon {
--shape-color: transparent !important;
}
mushroom-badge-icon {
visibility: hidden;
}
Sorry to tell you this - its really annoying when its something simple, but you are just missing a % at the end of your if statement:
{% if is_state('sensor.casa_delle_fate_riscaldamento') | float > 1 %}
I don’t believe it!!! I’m stupid, really stupid!!! Thank you very much, sorry if I wasted your time
1 Like
Never any need to apologise 
1 Like
And if i want an other badge showing up on left side with this template:
{% if is_state(‘climate.floor_thermostat’, ‘heat’) %}
How is that?
(tried an other 2 badge code, but i did not get it to work
type: custom:mushroom-template-card
primary: Bad
secondary: |-
{{states ('sensor.sensor_bad_1_etg_temperature')}}°C
-
{{states ('sensor.sensor_bad_1_etg_humidity')}}%
icon: mdi:bathtub
entity: switch.double_switch_2_current_value
icon_color: |-
{% if is_state('switch.double_switch_2_current_value', 'on')%}
orange
{% endif %}
badge_icon: |-
mdi:fan
badge_color: |-
{% if is_state('switch.double_switch_2_current_value', 'on')%}
blue
{% endif %}
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/bad
hold_action:
action: toggle
fill_container: true
card_mod:
style: |
mushroom-badge-icon {
{% if is_state('switch.double_switch_2_current_value', 'on')%}
animation: spin 1s linear infinite;
{% else %}
display: none;
{% endif %}
}
sorry i don’t undestand your response.
i would like that the text scrolling automatically without overlapping with primary field
you probably dont understand because that reply isnt to you 
ok sorry
by the way for my issue you can help me?
As if anyone was looking for inspiration for a card for a washing machine, I made one for the Siemens IQ800 WM6HXFf42PL but it works with any via Home Connect Alt.
Show me what your integrations for a washing machine look like.
3 Likes
Something like this?
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:washing-machine
entity: switch.wasmachine_smartplug
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Active Power
content:
type: custom:history-explorer-card
header: Wasmachine
defaultTimeRange: 24h
decimation: true
graphs:
- type: line
entities:
- entity: sensor.wasmachine_smartplug_power
badge_icon: mdi:power
badge_color: |-
{% if states("sensor.b") | float(0) > 5 %}
blue
{% endif %}
icon_color: |-
{% if states("sensor.wasmachine_smartplug_power") | float(0) > 5 %}
blue
{% endif %}
primary: Was
secondary: |
{{ states('sensor.energie_vandaag_wasmachine')|float(0) | round(2) }} kWh
card_mod:
style:
mushroom-badge-icon$: |
.badge {
position: relative;
top: 1px;
left: 70px;
--badge-icon-size: 12px;
--badge-size: 20px;
}
.: |
ha-state-icon {
{{'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if states('sensor.wasmachine_smartplug_power') | float > 5 }}
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); }
}
- type: custom:mushroom-template-card
icon: mdi:washing-machine
entity: switch.wasmachine_smartplug
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Active Power
content:
type: custom:history-explorer-card
header: Wasmachine
defaultTimeRange: 24h
decimation: true
graphs:
- type: line
entities:
- entity: sensor.wasmachine_smartplug_power
badge_icon: mdi:power
badge_color: |-
{% if states('sensor.wasmachine_smartplug_power') | float(0) > 5 %}
blue
{% endif %}
icon_color: |-
{% if states('sensor.wasmachine_smartplug_power') | float(0) > 5 %}
blue
{% endif %}
primary: Was
secondary: |
{{ states('sensor.energie_vandaag_wasmachine')|float(0) | round(2) }} kWh
card_mod:
style:
mushroom-badge-icon$: |
.badge {
position: relative;
top: 1px;
left: 70px;
--badge-icon-size: 12px;
--badge-size: 20px;
}
.: |
ha-state-icon {
{{'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if states('sensor.b') | float > 5 }}
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); }
}
- type: custom:mushroom-template-card
icon: mdi:washing-machine
entity: switch.wasmachine_smartplug
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Active Power
content:
type: custom:history-explorer-card
header: Wasmachine
defaultTimeRange: 24h
decimation: true
graphs:
- type: line
entities:
- entity: sensor.wasmachine_smartplug_power
badge_icon: mdi:power
badge_color: |-
{% if states("sensor.wasmachine_smartplug_power") | float(0) > 5 %}
blue
{% endif %}
icon_color: |-
{% if states('sensor.wasmachine_smartplug_power') | float(0) > 5 %}
blue
{% endif %}
primary: Was
secondary: |
{{ states('sensor.energie_vandaag_wasmachine')|float(0) | round(2) }} kWh
card_mod:
style:
mushroom-badge-icon$: |
.badge {
position: relative;
top: 1px;
left: 70px;
--badge-icon-size: 12px;
--badge-size: 20px;
}
.: |
ha-state-icon {
{{'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if states('sensor.wasmachine_smartplug_power') | float > 5 }}
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); }
}
1 Like
- type: custom:mushroom-template-card
primary: Stand
icon: mdi:sun-snowflake-variant
icon_color: >
{% if is_state("climate.tv_ruimte", 'heat') %}
[200, 62, 77]
{% elif is_state("climate.tv_ruimte", 'cool') %}
[128, 223, 255]
{% elif is_state("climate.tv_ruimte", 'dry') %}
[200, 142, 77]
{% elif is_state("climate.tv_ruimte", 'fan_only') %}
[200, 209, 251]
{% else %}
[84, 84, 84]
{% endif %}
tap_action:
action: toggle
secondary: >
{% if not is_state("climate.tv_ruimte", 'off') and if is_state("input_boolean.tvruimte_airco_krachtig", 'on') %}
Boost
{% if not is_state("climate.tv_ruimte", 'off')}
{% elif state=='heat' %}
Verwarmen
{% elif state=='cool' %}
Koelen
{% elif state=='dry' %}
Drogen
{% else %}
Ventileren
{% endif %}
{% endif %}
entity: input_boolean.airco_stand_beschikbaar
fill_container: true
layout: horizontal
multiline_secondary: false
what is wrong here ?
Can you post the entire card code?
The combined IF statements are incorrect and you have two {%endif%} statements.
If you have 2 if statements you need 2 ends, or not ?
(I edited the post before)
What are you trying to achieve with the second if statement? If it’s off and input is off too?
I have a boost function on the airco. When the boost function is on (input-boolean) and the airco is on (if not is_state(“climate.tv_ruimte”, ‘off’) then I want “Boost” on the second line and not one of the other words. so else if it is heat,cool, dry or fan only I want the dutch translated words on it
See if this works
secondary: >
{% if states('climate.tv_ruimte') == 'on' and states('input_boolean.tvruimte_airco_krachtig') == 'on' %}
Boost
{% elif is_state('climate.tv_ruimte', 'heat') %}
Verwarmen
{% elif is_state('climate.tv_ruimte', 'cool') %}
Koelen
{% elif is_state('climate.tv_ruimte', 'dry') %}
Drogen
{% else %}
Ventileren
{% endif %}