Hey guys! I need help. a long time ago my animations stopped working, and I tried everything but I cant get them to work, can someone help me and checkout what I’m doing wrong?
Thank you
example:
cards:
- type: custom:mushroom-template-card
icon: mdi:sofa
entity: light.livingroom_group
primary: Living Room
icon_color: |-
{% if is_state('light.livingroom_group', 'on') %}
orange
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: livingroom
secondary: '{{ states(''sensor.atc_0ae9_temperature'') }}°F'
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: ducky 2s ease-in-out infinite;' if
is_state('light.livingroom_group', 'on') }}
transform-origin: 50% 75%;
}
@keyframes ducky {
0%, 100% { transform: rotate(-15deg); }
50% { transform: rotate(15deg); }
}
- type: custom:mushroom-template-card
icon: mdi:bed-queen
primary: Bedroom
icon_color: |-
{% if is_state('light.bedroom_bathroom_group', 'on') %}
orange
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: bedroom
secondary: '{{ states(''sensor.ewelink_th01_temperature'') }}°F'
entity: light.bedroom_bathroom_group
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: ducky 2s ease-in-out infinite;' if
is_state('light.bedroom_bathroom_group', 'on') }}
transform-origin: 50% 75%;
}
@keyframes ducky {
0%, 100% { transform: rotate(-15deg); }
50% { transform: rotate(15deg); }
}
ha-icon should be ha-state-icon and --icon-animation: should just be animation:
An example
type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: red
card_mod:
style: |
ha-state-icon {
animation: rotate .5s infinite linear}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
1 Like
Thanksss! That solved it.
An example with a if statement that controls the animation.
type: custom:mushroom-template-card
primary: Spin
entity: fan.bedroom_fan
icon: mdi:fan
icon_color: red
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: rotate .5s infinite linear}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
{% endif %}
1 Like
dth97410
March 7, 2024, 10:46am
92
@rhysb Hi, is it possible to create an animation such as a pulsation effect or something else inside or outside the temperature entity, knowing that the entity is on an picture element ? I’ve tried but I can’t get it to work.
reypm
March 7, 2024, 3:09pm
93
I have a custom:mushroom-entity-card whose entity is a switch and I wonder if it is possible to animate the icon based on the switch state
type: custom:mushroom-entity-card
entity: switch.smartplug_top_fan_switch
name: Top Fan
fill_container: true
icon: mdi:fan
icon_type: icon
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
@reypm I literally just posted this yesterday (2 post ago) in this thread.
This code adjusted to use your switch vs the fan I posted.
type: custom:mushroom-template-card
primary: Spin
entity: switch.smartplug_top_fan_switch
icon: mdi:fan
icon_color: red
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: rotate .5s infinite linear}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
{% endif %}
1 Like
This is not the thread for this question. Please review
There are instructions for both picture element and animations in this extensive guide.
Hello,
My secondary text has suddenly turned white instead of gray. What do I add/change in the theme to get back the gray color?
cokelid
March 8, 2024, 9:08am
97
Mushroom with Alarmo?
say1897
March 8, 2024, 10:42am
98
Hello everyone,
I’m still relatively new to HA, but I’m making progress. Over the past few days, I’ve successfully experimented with the template cards and achieved very good results for myself.
Now I’m struggling with the mushroom-number-card.
Basically, the card is functioning. What I would like to do now is limit the maximum value to 1600 and color the slider red if the value is not 1600.
Is that even possible?
Possibly, can this be supplemented with Card-Mod? I would be very grateful for any help.
type: custom:mushroom-number-card
entity: number.bkw_limit_nonpersistent_absolute
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: call-service
service: number.set_value
target:
entity_id: number.bkw_limit_nonpersistent_absolute
data:
value: '1600'
icon_color: green
name: Einspeise-Limit
layout: horizontal
ffm777
March 8, 2024, 2:00pm
99
Hi,
EDIT: Sorry, solved it myself. Just had to reduce the size of the first card within the stack by adding “margin-bottom: -7px !important;” to the card style.
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Wohnen
secondary: >-
{{ states('sensor.xiaomi_temperature_wohnzimmer') | float(1) }} °C | {{
states('sensor.xiaomi_humidity_wohnzimmer') | int(0) }} %
icon: mdi:sofa
fill_container: true
layout: horizontal
multiline_secondary: false
tap_action:
action: navigate
navigation_path: "EG"
icon_color: teal
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-background-color), 0.025);
--mush-icon-size: 64px;
height: 56px;
margin-left: -20px !important;
}
ha-card {
--card-primary-font-size: 15px;
--card-secondary-font-size: 13px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.wohnzimmerlampen
state: 'on'
chip:
type: entity
entity: light.wohnzimmerlampen
icon_color: amber
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.wohnzimmerlampen
content_info: none
icon: mdi:lightbulb
- type: conditional
conditions:
- entity: climate.wohnzimmer
state: 'heat'
chip:
type: entity
entity: climate.wohnzimmer
icon_color: red
tap_action:
action: more-info
content_info: none
icon: mdi:fan
- type: conditional
conditions:
- entity: climate.wohnzimmer
state: 'cool'
chip:
type: entity
entity: climate.wohnzimmer
icon_color: blue
tap_action:
action: more-info
content_info: none
icon: mdi:fan
- type: conditional
conditions:
- entity: sensor.geschirrspuler_operation_state
state: 'Run'
chip:
type: entity
entity: sensor.geschirrspuler_remaining_program_time
icon_color: grey
tap_action:
action: more-info
content_info: none
icon: mdi:dishwasher
- type: conditional
conditions:
- entity: binary_sensor.fibaro_kueche_bewegung
state: 'on'
chip:
type: entity
entity: binary_sensor.fibaro_kueche_bewegung
icon_color: grey
tap_action:
action: none
content_info: none
icon: mdi:chef-hat
- type: conditional
conditions:
- entity: binary_sensor.presence_sensor_fp2_e84e_presence_sensor_1
state: 'on'
chip:
type: entity
entity: binary_sensor.presence_sensor_fp2_e84e_presence_sensor_1
icon_color: grey
tap_action:
action: none
content_info: none
icon: mdi:walk
- type: conditional
conditions:
- entity: binary_sensor.humidity_warning_wohnen
state: 'on'
chip:
type: entity
entity: binary_sensor.humidity_warning_wohnen
icon_color: red
tap_action:
action: none
content_info: none
icon: mdi:water-percent-alert
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-right: 6px;
}
card_mod:
style: |
ha-card {
height: 92px;
{% if is_state('light.wohnzimmerlampen', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
thesmer
March 8, 2024, 7:34pm
100
Hi I experience exactly the same, but I think it is not the bottom margin but the position in general.
How can I move all the icons in the lower row more up? Can anyone point me to the right correction?
This is my code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Arbeitszimmer
secondary: >-
{{ states('sensor.heizkoerperthermostat_arbeitszimmer_actual_temperature')
| round(1) }}°C
icon: mdi:monitor
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
entity: light.lichtschalter_arbeitszimmer
tap_action:
action: navigate
navigation_path: /lovelace-mushroom/arbeit
double_tap_action:
action: toggle
fill_container: true
layout: horizontal
multiline_secondary: false
badge_icon: >
{% if is_state_attr('climate.heizkoerperthermostat_arbeitszimmer',
'hvac_action', 'heating') %}
mdi:radiator
{% elif is_state_attr('climate.heizkoerperthermostat_arbeitszimmer',
'hvac_action', 'cooling') %}
mdi:snowflake
{% else %} mdi:radiator-disabled {% endif %}
badge_color: >
{% if is_state_attr('climate.heizkoerperthermostat_arbeitszimmer',
'hvac_action', 'heating') %}
red
{% elif is_state_attr('climate.heizkoerperthermostat_arbeitszimmer',
'hvac_action', 'cooling') %}
#03A9F4
{% else %} {% endif %}
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: 76px;
height: 66px;
margin-left: -18px !important;
--ha-card-border-width: 0;
}
mushroom-badge-icon {
left: 138px;
top: 40px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: switch.ledvance_smart_plug_1_switch
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:power-socket-de
- type: conditional
conditions:
- entity: binary_sensor.fensterkontakt_arbeitszimmer_state
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
- type: conditional
conditions:
- entity: binary_sensor.bewegungssensor_arbeitszimmer_iaszone
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: switch.klima_arbeitszimmer_power
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:air-conditioner
alignment: end
card_mod:
style: |
ha-card {
--chip-icon-size: 25px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.lichtschalter_arbeitszimmer', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
1 Like
Zenia
March 8, 2024, 10:00pm
101
Good day, everyone. Please help me to move second part of my Person Card to the left, for some reason it’s cut off on the phone screen. Thank you
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:mushroom-person-card
name: Yevgeniy
entity: person.yevgeniy
layout: vertical
icon_type: entity-picture
primary_info: state
secondary_info: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
border: none !important;
background: none !important;
}
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:mushroom-template-card
primary: >-
{%- if is_state('sensor.sm_s918u_battery_state', 'charging') %}
Charging 🔌
{%- elif is_state('sensor.sm_s918u_battery_state', 'discharging')
%}
Discharging 🙃
{% else %}
Full 💯
{% endif %}
secondary: Battery {{ states('sensor.sm_s918u_battery_level') }}%
entity: sensor.sm_s918u_battery_state
icon: mdi:battery-charging-high
icon_color: >-
{%- if is_state('sensor.sm_s918u_battery_state', 'charging') %}
yellow
{%- elif is_state('sensor.sm_s918u_battery_state', 'discharging')
%}
teal
{% else %}
green
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
justify-content: center;
--chip-icon-size: 24px;
--chip-height: 54px;
--chip-with:
width: var(--chip-height) !important;
border-radius: 50% !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
entity: sensor.sm_s918u_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
alignment: center
I solved:
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-left: -68px !important;
}
Just add a negative margin-top: to the chips card
card_mod:
style: |
ha-card {
--chip-icon-size: 25px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-border-width: 0;
margin-top:-10px;
}
1 Like
This is assuming you have card-mod installed
card_mod:
style:
mushroom-number-value-control$: >
mushroom-slider { {% if states('number.bkw_limit_nonpersistent_absolute')
| int(0) != 88 %}
--main-color: red !important;
--bg-color: rgba(255,0,0, .2) !important;
{%endif%}
}
mushroom-shape-icon$: |
.shape { {% if states('number.bkw_limit_nonpersistent_absolute')
| int(0) != 88 %}
--shape-color: rgba(255,0,0, .2) !important;
--icon-color: red !important;
{%endif%}
}
I used my own entity so my number not 1600. I didn’t look into your max value question. That number is set by the device, but I’m sure there is a way with an input_number
2 Likes
Hi, I feel like an idiot but in all fairness I’m a newbie to HASS. I have blinds controlled via broadlink, and all I have is 3 scripts mapped to each broadlink call. DOWN | STOP | UP.
I’d like to use the mushroom card (without the state), but have three of those buttons line to the right.
Another issue is that those buttons have some text area next to them which is currently a single space.
Can some please let me know the best cards to use? Thank you
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-entity-card
icon: mdi:roller-shade
name: Blind 1
entity: script.room_1_blind_1_down
tap_action:
action: none
secondary_info: none
fill_container: true
- type: custom:mushroom-entity-card
icon: mdi:arrow-down-bold
entity: script.room_1_blind_1_down
secondary_info: none
name: ' '
fill_container: false
- type: custom:mushroom-entity-card
icon: mdi:stop
entity: script.room_1_blind_1_stop
secondary_info: none
name: ' '
fill_container: false
- type: custom:mushroom-entity-card
icon: mdi:arrow-up-bold
entity: script.room_1_blind_1_up
secondary_info: none
name: ' '
fill_container: false
I’d lean towards Chips Card if you are using scripts. I’ll put together a quick sample. You have a ton of options…
type: custom:vertical-stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 35% 65%
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-cover-card
entity: cover.blind_tilt_098a
name: PC
tap_action:
action: toggle
icon: mdi:blinds-horizontal-closed
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: blue !important;
border-radius: 4px !important;
}
.: |
ha-state-icon {
color: white;
--icon-symbol-size: 20px;
}
ha-card {
border: none;
--card-primary-font-size: 10px;
--card-secondary-font-size: 10px;
position:absolute;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: script.fan_speed_1
content_info: none
tap_action:
action: toggle
icon: mdi:arrow-up-bold
- type: entity
entity: script.fan_speed_1
content_info: none
tap_action:
action: toggle
icon: mdi:stop
- type: entity
entity: script.fan_speed_1
content_info: none
icon: mdi:arrow-down-bold
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-icon-size: 20px;
--chip-border-radius: 4px;
padding: 10px;
--chip-background: red;
}
1 Like
thesmer
March 9, 2024, 7:33am
106
Wonderful. Works like a charm. Many thanks.
as you can see in the code below the icon is a fan which means switch is on, spin the fan, switch is off do nothing, can I get some help? I did some search in the forums but was unable to found my answer 
