I guess no then
Can some please help me animate this? Trying to get the fan to spin…
I feel the indentation is off but struggling to figure it out:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: navigate
navigation_path: '#fan'
hold_action:
action: more-info
double_tap_action:
action: toggle
entity: fan.fan
icon: |-
{% if is_state(entity, 'on') %}
mdi:fan
{% else %}
mdi:fan-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
#9CAFAA
{% else %}
#B4B4B8
{% endif %}
card_mod:
style: |
ha-card {
--chip-background: {{ '#E8EFCF' if is_state(config.entity, 'on') else '#F6F5F2' }};
box-shadow: '' !important;
justify-content: center;
--chip-height: 35px;
--chip-border-radius: 10px;
--chip-icon-size: 20px;
--chip-font-size: 10px;
--text-color: {{ '#9CAFAA' if is_state(config.entity, 'on') else '#B4B4B8' }};
font-style: bold;
font-variant: small-caps;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
font-family: "Roboto";
font-weight: bolder;
width: '' !important;
min-width: '' !important;
}
.: |
{% if is_state(config.entity,'on') %}
ha-state-icon {
animation: spin 1.0s linear infinite;
}
@keyframes wobbling {
0% {transform: rotate(-10deg);}
100% {transform: rotate(10deg);}
}
{% else %}
ha-state-icon {
animation: spin 5s linear infinite;
}
@keyframes wobbling {
0% {transform: rotate(-10deg);}
100% {transform: rotate(10deg);}
}
{% endif %}
- i would recommend not putting if statements around elements unless strictly neccesary, so like this instead:
ha-state-icon {
{% if is_state(config.entity,'on') %}
animation: spin 1.0s linear infinite;
{% else %}
animation: spin 5s linear infinite;
{% endif %}
}
@keyframes wobbling {
0% {transform: rotate(-10deg);}
100% {transform: rotate(10deg);}
}
@keyframes wobbling {
0% {transform: rotate(-10deg);}
100% {transform: rotate(10deg);}
}
- You have the same keyframes twice for no reason it seems.
ha-state-icon {
{% if is_state(config.entity,'on') %}
animation: spin 1.0s linear infinite;
{% else %}
animation: spin 5s linear infinite;
{% endif %}
}
@keyframes wobbling {
0% {transform: rotate(-10deg);}
100% {transform: rotate(10deg);}
}
- you actually arent even using those keyframes because you are using the spin animation in your animation code instead which is built into mushroom. wobbling isnt a built in one, so you would need keyframes, but you arent using it.
ha-state-icon {
{% if is_state(config.entity,'on') %}
animation: spin 1.0s linear infinite;
{% else %}
animation: spin 5s linear infinite;
{% endif %}
}
- When addressing icons in chips you cant target the chip directly. you need to go through the main chip card, like this (nth-child, being the number of the chip you are targetting):
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
icon_color: green
content: Test
entity: switch.office_screen_left
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if is_state(config.entity,'on') %}
animation: spin 1.0s linear infinite;
{% else %}
animation: spin 5s linear infinite;
{% endif %}
}
- this also means that unfortunately that we cant use
config.entityto target the entity in the chip, as it isnt passed to the main chip card. so you have to specify the entity in your if statement.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
icon_color: green
content: Test
entity: switch.office_screen_left
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if is_state('fan.fan','on') %}
animation: spin 1.0s linear infinite;
{% else %}
animation: spin 5s linear infinite;
{% endif %}
}
- this is from experience, the built in animations like spin, dont always seem to react well in chips on all browsers, so i would add keyframes for it just in case.
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if is_state('fan.fan','on') %}
animation: spin 1.0s linear infinite;
{% else %}
animation: spin 5s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
so final it would look like this:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: navigate
navigation_path: '#fan'
hold_action:
action: more-info
double_tap_action:
action: toggle
entity: fan.fan
icon: |-
{% if is_state(entity, 'on') %}
mdi:fan
{% else %}
mdi:fan-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
#9CAFAA
{% else %}
#B4B4B8
{% endif %}
card_mod:
style: |
ha-card {
--chip-background: {{ '#E8EFCF' if is_state(config.entity, 'on') else '#F6F5F2' }};
box-shadow: '' !important;
justify-content: center;
--chip-height: 35px;
--chip-border-radius: 10px;
--chip-icon-size: 20px;
--chip-font-size: 10px;
--text-color: {{ '#9CAFAA' if is_state(config.entity, 'on') else '#B4B4B8' }};
font-style: bold;
font-variant: small-caps;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
font-family: "Roboto";
font-weight: bolder;
width: '' !important;
min-width: '' !important;
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if is_state('fan.fan','on') %}
animation: spin 1.0s linear infinite;
{% else %}
animation: spin 5s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
3 Likes
Thank you so much for taking the time to break it down so well - it’ll be clear for anyone who reads this is the future as well.
Can you let me know what are the default animations built into Mushroom cards and how would I go about using them?
Is it just adding the below to the main chip card (nth-child)?
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: spin 1.0s linear infinite;
and replace the spin with the respective animation name?
if you haven’t already read his guide it’s definitely worth reading. everything and more is there for animations, states which ones are built in.
1 Like
Is there any way to dynamic flex/resize mushroom template cards?
I’d like the card to cover the whole row if there is no conditional card showing up and adjust its width accordingly if a conditional card is active at the end of the same row
Hi, I have a simple chip card that is a tracker entity. I can only have it show state or name. How can I make it show name AND state?
something like this?
type: custom:mushroom-chips-card
chips:
- type: template
content: |-
{{ state_attr('device_tracker.simonsphone', 'friendly_name') }}
{{ states('device_tracker.simonsphone') }}
icon: mdi:home
icon_color: blue
card_mod:
style: |
ha-card {
width: 30px ;
}
1 Like
Precisely that! Thank you
Climate card, is there a way I can specify an alternative temp sensor rather than the default one that is picked up from my aircon unit, which is not accurate. TiA 
Hi
Im trying to simplify one of my light cards. Right now I have pool lights that have call it 10 different colors they can change to which are all listed in effect. So what happens right now is when I go to turn on the light it pops up another box to turn the light on or off but also has a drop down with all the color lights listed under effect. I would like to have that drop down on the main light card instead of a separate pop up window so that I can choose the color and then light it be set that way. Is there anyway to handle this?
there’s a couple of custom cards that I can think of that will do what I think your after…
there’s Light entity card
and
I did something similar and used RGB light card with mushroom light card and used stack in card to make it look like one card
Hi everybody!
I am experiencing an unexpected behaviour with Mushroom Cards, in particular the mushroom-number-card.
I have bars that are fully filled even if the state of the card (displayed entities are sensors) are less than 100%.
In the following an explicative image:
What am I doing wrong?
The mushroom number card is only supposed to be used for input_number. or number. entities.
so only entities where the number can be changed by the user. it is slider, not a bar.
if you want bars that are filled in based on a number look into the bar card. you can then style it to be similar to the mushroom cards like i have here:
Hello, for a few weeks now I have had the problem that I can no longer switch off the light and the Sybol no longer lights up when the light is on. Have there been any changes made by Home assitant and what can I change to make it work again? Thanks in advance.
there hasn’t been any changes.
does the light work with a standard entity card ?
or with a mushroom template card?
type: custom:mushroom-template-card
primary: kitchen
secondary: ''
icon: mdi:light-switch
entity: light.kitchen_wall_lamp
tap_action:
action: toggle
icon_color: |-
{% set state = states('light.kitchen_wall_lamp') %}
{% if state >= "on" %} green
{% else %} grey
{% endif %}
This is the code:
I am not really gifted in this area, and have used a guide on youtube from everything smart home. It all worked in the beginning.
what integration are you using for the light ?
if you goto developer tools then the STATES tab and find the light entity what is the state of the light?
Sorry I should have been more clear, these aren’t your typical RGB lights that can change a million colors, there are 10 or so defined colors that change based on the effect lists. They change colors by turning the light on and off until it gets to the desired color. I assume the color sequence is based on the integration(Jandy iAquaLink). With that being said I don’t believe the RGB light card would do the trick. All I’m really trying to do is eliminate the pop up of another window that shows on/off and the effect drop down box. I would like the drop down box in the main mushroom light card if possible.
