You can’t add ha-card { without a .: |
card_mod:
style:
mushroom-shape-icon$: |
.shape {
margin-top: -40px;
mushroom-state-info$: |
.container {
margin: -10px;
}
.: |
ha-card {
height: 108px !important;
}
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 15px 0px 55px 10px;
}
mushroom-shape-icon$: |
.shape {
margin-top: -40px;
}
.: |
ha-card {
height: 108px !important;
{% if is_state('climate.eetplaats','off') %}
background-color: rgb({{ states("input_text.kleur_iconen")}})
{%- else -%}
background: none;
{%- endif %}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
@keyframes blink {
50% {opacity: 0;}
}
Where do I put the keyframes ? It looks like indentation is not OK…
You do not have an animation defined and are you trying to animate the icon or the whole card. Placing it under ha-card is unusual
animation:
Thank you for the updated code, but still not animated on my end. Is there something I am missing?
I can’t even get it to animate when I have a single card for it:
type: custom:mushroom-template-card
icon: mdi:sprinkler
icon_color: cyan
primary: Sprinkler
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: sprinkle 2s linear infinite;
transform-origin: 29% 88%; {% endif %}
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
You do not have an entity defined. Either add entity: or define the entity in this line
{% if is_state('light.xxxx', 'on') %}
card_mod:
style:
mushroom-state-info$: |
.container {
margin-top: -30px;
}
mushroom-shape-icon$: |
.shape {
margin-top: -40px;
}
.: |
ha-state-icon {
animation: blink 1s infinite, illumination 1s infinite ;
}
@keyframes blink {
50% {opacity: 0;}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
ha-card {
height: 108px !important;
{% if is_state('climate.eetplaats','off') %}
background-color: rgb({{ states("input_text.kleur_iconen")}})
{%- else -%}
background: none;
{%- endif %}
}
This works to animate my thermostat. Im trying to duplicate for my Rain Bird watering system
type: custom:mushroom-template-card
entity: climate.omnilink_main_t_stat
primary: Main Climate
secondary: >-
{% if state_attr('climate.omnilink_main_t_stat', 'hvac_action') == "heating"
%}
Heating - {{states('sensor.omnilink_main_t_stat_temp') }} °F
{% elif state_attr('climate.omnilink_main_t_stat', 'hvac_action') == "cooling" %}
Cooling - {{states('sensor.omnilink_main_t_stat_temp') }} °F
{% else %}
Idle - {{states('sensor.omnilink_main_t_stat_temp') }} °F {% endif %}
icon: >-
{% if state_attr('climate.omnilink_main_t_stat', 'hvac_action') == "heating"
%} mdi:heat-wave {% elif state_attr('climate.omnilink_main_t_stat',
'hvac_action') == "cooling" %} mdi:snowflake {% else %} mdi:thermometer {%
endif %}
icon_color: >-
{% if state_attr('climate.omnilink_main_t_stat', 'hvac_action') == "heating"
%} orange {% elif state_attr('climate.omnilink_main_t_stat', 'hvac_action') ==
"cooling" %} blue {% else %} grey {% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-state-icon {
{% if state_attr('climate.omnilink_main_t_stat', 'hvac_action') == "heating" %}
animation: pulse 3s ease-in-out infinite;
{% elif state_attr('climate.omnilink_main_t_stat', 'hvac_action') == "cooling" %}
animation: spin 6s linear infinite;
{% else %}
{% endif %}}
Let’s start with this. Replace with your sprinkler entity
entity: your_entity
type: custom:mushroom-template-card
icon: mdi:sprinkler
entity: light.pc_lights
icon_color: |
{{ 'blue' if is_state(config.entity, 'on') else 'grey' }}
primary: Sprinkler
card_mod:
style: |
ha-state-icon {
rotate: -90deg;
{% if is_state(config.entity, 'on') %}
animation: sprinkle 2s linear infinite;
{% endif %}
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
Okay, I copied this code and it looks good. Now I just need to figure out how to only display it when the sprinkler entity is “on”
The animation?
Yes, the animation will not start when the entity changes to “on”.
The secondary word changes from “off” to “on”, but nothing in the icon changes… current code:
type: custom:mushroom-template-card
icon: mdi:sprinkler
entity: switch.rain_bird
icon_color: |
{{ 'blue' if is_state(switch.rain_bird, 'on') else 'grey' }}
primary: Sprinkler
secondary: |-
{% if is_state ('switch.rain_bird', 'off') %}
Off
{% else %}
On
{% endif %}
card_mod:
style: |
ha-state-icon {
{% if is_state(switch.rain_bird, 'on') %}
animation: sprinkle 2s linear infinite;
{% endif %}
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
add single quotes around {% if is_state('switch.rain_bird', 'on') %}
That did it! Man, thank you. You are great at this!! Instant responses. I’m such a noob
Thanks!
Everyone has to start the learning process somewhere, happy it’s working for you!
Well, my net project is to add “push down” effect to all my buttons. This is what my current iOs UI looks like:
And I want to add this to the whole dashboard:
You can just add it to the card mod code on each card or create a theme to apply to all your cards.
card_mod:
style: |
ha-state-icon {
rotate: -90deg;
{% if is_state('switch.rain_bird', 'on') %}
animation: sprinkle 2s linear infinite;
{% endif %}
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
Working on it now, thanks! Probably easiest to do it this way instead of a theme?
I avoid themes, but it’s pretty easy to set up. DM me if you want to go that route and I’ll help.
Same question though 
I have copied the code from above, changed the entities. When the watersensor is on, it changes color to blue else grey. This is working fine, however no animation.
type: custom:mushroom-template-card
icon: mdi:sprinkler
entity: binary_sensor.group_watersensor
icon_color: |
{{ 'blue' if is_state('binary_sensor.group_watersensor', 'on') else 'grey' }}
primary: Sprinkler
secondary: |-
{% if is_state ('binary_sensor.group_watersensor', 'off') %}
Off
{% else %}
On
{% endif %}
card_mod:
style: |
ha-state-icon {
{% if is_state(binary_sensor.group_watersensor, 'on') %}
animation: sprinkle 2s linear infinite;
{% endif %}
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 15px 0px 55px 10px;
}
mushroom-shape-icon$: |
.shape {
margin-top: -40px;
}
.: |
ha-state-icon {
animation: blink 1s infinite, illumination 1s infinite ;
}
@keyframes blink {
{% if is_state("input_boolean.ruimte5",'on') %}
50% {opacity: 0;}
{%- else -%}
{%- endif %}
}
@keyframes illumination {
{% if is_state("input_boolean.ruimte5",'on') %}
0%, 100% { clip-path: inset(0 0 0 0); }
95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
{%- else -%}
{%- endif %}
ha-card {
height: 108px !important;
{% if is_state("input_boolean.ruimte5",'on') %}
background-color: rgb({{ states("input_text.kleur_iconen")}})
{%- else -%}
background: none;
{%- endif %}
}
When input_boolean is off, my card is small. When it is on, it is 108px.Why does this happen ?