Kevin - the animation function âspinâ is built in and will make what youâre trying to do a little easier.
This is what I added to mine to make it spin.
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: spin 3s linear infinite;' if (is_state('switch.hrv','on')) }}
}
OMG THANK YOU!
I have been hunting and trying to figure this out for hours⌠And this was my second attempt at it.
I have been searching for âAnimate Mushroom Template Badgeâ and variations. hopefully this will help someone else find it.
Now - for the followup challenge. How do I get both animations of the main icon, and the badge into the same card? I donât understand the purpose of the pipe ("|") used in some of the examples. My main icon animation uses "style: " without the pipe. Instead it is after the âmushroom-shape-icon$:â line.
If I add the pipe to the example below, it breaks it. but without the pipe, the badge animation doesnât work. I would like to better understand the actual function of the pipe if thereâs a reference i can be pointed at. And if you have a quick fix for me to accommodate both animations, that would be helpful as well.
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if( state_attr('climate.thermostat','hvac_action')=="heating") %}
{{ '--icon-animation: flame 3s linear infinite; transform-origin: 50% 50%;' }}
{% elif ( state_attr('climate.thermostat','hvac_action')=="cooling") %}
{{ '--icon-animation: aircon 3s linear infinite;' }}
{% endif %}
}
@keyframes flame {
0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
}
@keyframes aircon {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
}
UPDATE:
Figured it out (I think) by chasing down the pipe character some more. Iâm still not really sure what it does - but knowing that it was important enough to likely be related to the root of my problems, I also discovered " .: | " and started playing.
From how the HA GUI handles text coloring for syntax stuff, I realized that by using the pipe character you are sort of entering into a mode that doesnât apply the usual yaml filtering. I believe this is because it is treating everything as exact text, to be fed straight out to CSS (in this case). So I need a way to get out, to escape out, of this mode. indentation is the key. Moving below the indentation level of the | characterâs line got me back to normal looking yaml in the HA GUI. But I canât use âstyle:â a second time to open a new block to add my other animation/card-mod details.
Enter " .: "
I gather, from my very limited experience, this is sort of a indent level modifer (or at least Iâm using it that way) so I can add my other animations in, and push them one more indentation in. This way, I can still escape back to the original level and continue adding functionality.
I know, none of this makes a ton of sense to me either, but hopefully itâs the start of the journey towards actually understanding. Again, if anyone has a way to explain this to me, or documentation that covers it, please let me know.
Soooooo.
I created this. And it fracking works!
card_mod:
style:
.: |
mushroom-badge-icon {
{% if( state_attr('climate.thermostat','fan_action')=="running") %}
animation: spin 750ms linear infinite;
opacity: 60%;
{% endif %}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
mushroom-shape-icon$: |
ha-icon {
{% if( state_attr('climate.thermostat','hvac_action')=="heating") %}
{{ '--icon-animation: flame 3s linear infinite; transform-origin: 50% 50%;' }}
{% elif ( state_attr('climate.thermostat','hvac_action')=="cooling") %}
{{ '--icon-animation: aircon 3s linear infinite;' }}
{% endif %}
}
@keyframes flame {
0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
}
@keyframes aircon {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
}
@fellipute Thanks but I have those option selected:
Here are the settings for evening lights
Here are the settings for Night Lights
What you can see is that Fireplace Border and Corridor Spots are common to both, just different dimming.
Thanks for that!!! Is it possible to have icons with fill option? thanks in advance.
Hi lads,
My shutters provided trough my local domotics provider doesnât support âstop / pauseâ function
(i can use the slider to set it to percentage X or Y but i only use that as a secondary control)
my primary control look like this:
is there a way to completly hide the pause / stop button and keep the other 2?
Iâve been scratching my head in the exact same way, Iâve coded web sites in the distant past but none of this came up then. I guess things moved on while I was doing other things!
If anyone finds a good explainer for | and .: I think a lot of us would love to read it.
Replying to myself but just wanted to update that Iâve managed to make my intended cards work, and want to leave them here so people can just adapt them for themselves if needed:
Note that those cards are still kind of a âmessâ but were more of a test to see what I could / couldnât do, and what worked and what didnât. So whatâs there, works. Just replace what you need / understand itâs construction.
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: >
{{ '#%02x%02x%02x' % state_attr('light.lightstrip_kitchen_light',
'rgb_color') if states('light.lightstrip_kitchen_light') == 'on' else
'disabled' }}
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;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.vacuum_kitchen
state: 'on'
chip:
type: template
icon: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' %}
mdi:robot-vacuum
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
mdi:robot-vacuum
{% endif %}
icon_color: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'cleaning' %}
pink
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
content_info: none
- type: conditional
conditions:
- entity: input_boolean.vacuum_kitchen
state: 'on'
chip:
type: template
icon: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' %}
mdi:robot-vacuum
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
mdi:robot-vacuum
{% endif %}
icon_color: |-
{% if states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'cleaning' %}
pink
{% elif states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'returning' %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
content_info: none
- type: conditional
conditions:
- entity: input_boolean.vacuum_kitchen
state: 'on'
chip:
type: template
icon: >-
{% if states('input_boolean.vacuum_kitchen') == 'on' %}
mdi:robot-vacuum
{% elif states('input_boolean.test_martwin') == 'on' and
states('input_boolean.room_bedroom') == 'on' %}
mdi:robot-vacuum
{% endif %}
icon_color: >-
{% if states('input_boolean.vacuum_kitchen') == 'on' and
states('vacuum.robot_cleaner') == 'cleaning' %}
pink
{% elif states('input_boolean.test_martwin') == 'on' and
states('input_boolean.room_bedroom') == 'on' %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
content_info: none
alignment: end
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-icon {
animation: shake 400ms ease-in-out infinite;' if is_state('binary_sensor.input_asciugatrice', 'on') }}
transform-origin: 50% 58%;
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);
}
@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); }
}
mushroom-conditional-chip:nth-child(2):
mushroom-template-chip$: |
ha-icon {
animation: shake 400ms ease-in-out infinite;' if is_state('binary_sensor.input_asciugatrice', 'on') }}
transform-origin: 50% 58%;
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);
}
@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); }
}
mushroom-conditional-chip:nth-child(3):
mushroom-template-chip$: |
ha-icon {
animation: shake 400ms ease-in-out infinite;' if is_state('binary_sensor.input_asciugatrice', 'on') }}
transform-origin: 50% 58%;
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);
}
@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); }
}
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 %}
}
As a plus, Iâve also managed to create a entity card that has an animated icon, background with states and so on. If you thing this is what you were looking for, get it here:
type: custom:mushroom-entity-card
entity: input_boolean.season_autumn
icon_color: deep-orange
icon: ''
fill_container: false
layout: vertical
tap_action:
action: toggle
name: Autumn
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state('input_boolean.season_autumn', 'on') %}
ha-icon {
--icon-animation: wave 6s ease infinite;
}
@keyframes wave {
50% { transform: rotatey(180deg); --icon-color: rgb(var(--rgb-brown)); }
}
.shape {
--shape-animation: color 6s ease infinite;
}
@keyframes color {
50% { --shape-color: rgba(var(--rgb-brown), 0.2); }
}
}
{% endif %}
.: |
:host {
background: var(--card-background-color);
border-radius: var(--ha-card-border-radius);
}
ha-card {
{% if is_state('input_boolean.season_autumn', 'on') %}
background: rgb(240, 163, 10, 0.05)
{% endif %}
}
For the RGBs, if you think you need anywhere to get them, get them here:
Can anyone help reduce the stack-in-card height? I canât deal with it. Or maybe someone can advise on how to make such a card better 
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Pogoda
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 60% auto
margin: '-4px'
cards:
- type: custom:mushroom-template-card
icon: |-
{% set state = states(entity) %}
{% if state == "clear-night" %}
mdi:weather-night
{% elif state == "cloudy" %}
mdi:weather-cloudy
{% elif state == "fog" %}
mdi:weather-fog
{% elif state == "hail" %}
mdi:weather-hail
{% elif state == "lightning" %}
mdi:weather-lightning
{% elif state == "lightning-rainy" %}
mdi:weather-lightning-rainy
{% elif state == "partlycloudy" %}
mdi:weather-partly-cloudy
{% elif state == "pouring" %}
mdi:weather-pouring
{% elif state == "rainy" %}
mdi:weather-rainy
{% elif state == "snowy" %}
mdi:weather-snowy
{% elif state == "snowy-rainy" %}
mdi:weather-snowy-rainy
{% elif state == "sunny" %}
mdi:weather-sunny
{% elif state == "windy" %}
mdi:weather-windy
{% elif state == "windy-variant" %}
mdi:weather-windy-variant
{% else %}
mdi:weather-cloudy-alert
{% endif %}
icon_color: |-
{% set state = states(entity) %}
{% if state == "clear-night" %}
orange
{% elif state == "cloudy" %}
grey
{% elif state == "fog" %}
grey
{% elif state == "lightning" %}
yellow
{% elif state == "lightning-rainy" %}
blue
{% elif state == "partlycloudy" %}
amber
{% elif state == "sunny" %}
amber
{% elif state == "pouring" %}
blue
{% elif state == "rainy" %}
blue
{% elif state == "snowy" %}
black
{% elif state == "snowy-rainy" %}
black
{% elif state == "windy" %}
green
{% elif state == "windy-variant" %}
green
{% else %}
default
{% endif %}
primary: |-
{% set condition_map = {
"clear-night": "pogodna noc",
"cloudy": "pochmurno",
"exceptional": "warunki nadzwyczajne",
"fog": "mgĹa",
"hail": "grad",
"lightning": "wyĹadowania atmosferyczne",
"lightning-rainy": "burza",
"partlycloudy": "czÄĹciowe zachmurzenie",
"pouring": "ulewa",
"rainy": "deszczowo",
"snowy": "opady Ĺniegu",
"snowy-rainy": "deszcz ze Ĺniegiem",
"sunny": "sĹonecznie",
"windy": "wietrznie",
"windy-variant": "wietrznie"
}
%}
{{ condition_map.get(states(entity)) }}
tap_action:
action: navigate
navigation_path: /lovelace/climate
entity: weather.home
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0;
}
cards:
- type: custom:mushroom-chips-card
alignment: end
card_mod:
style: |
div.chip-container {
margin-bottom: -14px;
}
chips:
- type: entity
entity: sensor.temperature_outdoor
icon_color: amber
- type: entity
entity: sensor.humidity_outdoor
icon_color: blue
- type: custom:mushroom-chips-card
alignment: end
chips:
- type: entity
entity: sensor.pressure_outdoor
icon_color: green
- type: entity
entity: sensor.home_forecast_precipitation_probability
icon_color: purple
This is awesome. Great work.
I use some icons for the job_state of my washing machine. Maybe you can make a animation for those icons.
Weightsensing: mdi:scale
Wash: mdi:waves
Rinse: mdi:water
spin: mdi:fan. For the spin i use the animation you already made.
Giving my two cents, you could try adding fill_container: true to the custom:mushroom-template-card.
Otherwise, if you really want to change manually or the previous didnât work, something like this will do the trick:
card_mod:
style:
ha-card {
height: 123px;
}
Hi guys, these contents are really fantastic. I managed to animate a template card, but Iâm struggling with chips cards. Could you give me a tip?
type: custom:mushroom-chips-card
chips:
- type: template
entity: fan.ao_ventilatore
icon: mdi:fan
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
{{ 'animation: rotate 1s linear infinite;' if is_state('fan.ao_ventilatore', 'on') }}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
still can not get it to work any more help?
Read what I posted 3 or 4 posts above. Thereâs exactly what you need.
Hi, can anyone please recommend a flower/plant card fitting to the mushroom dashboard?
Thank you!
Can you tell what theme you are using?
Mushroom shadow⌠But I guess such a card fits all mushroom dashbords, doesnât it?
Yeah, me too! Thank you for your answer! However, it is not such a fit among the other cards, donât you think?
I mean, the plant icon, its size etcâŚ
Iâm searching for something that doesnât stand outâŚ
In fact, what happened to this project?
Due to the fact that i have my 18 plants on one dashboard with no other cards. it is not a real problem.
But maybe it is an Option to build it on your own.
Put things together with vertcal-stack-in-card. The upper part as a template card and the lower may as chips card only with values.
