You do it like this:
2 Likes
Try something like this then:
type: custom:mushroom-template-card
primary: Office Temperature
secondary: '{{ states(entity) | round(1) }} °C'
icon: ''
entity: sensor.rhys_office_sensor_temperature
card_mod:
style: |
ha-card {
{% set current_temp = states(config.entity) | int %}
--text-color: rgb(var(--rgb-
{%- if current_temp < 18 -%}
red
{%- elif current_temp < 21 -%}
yellow
{%- elif current_temp > 25 -%}
orange
{%- else -%}
white
{% endif %}
));
--primary-text-color: var(--text-color);
--secondary-text-color: var(--text-color);
}
1 Like
It is a lot of extra work, but you could use a pop-up instead. It will look more polished too.
Thank you, so I think I made a universal confirmation like ‚do you want to start / stop?‘ and schon with the icon that the heater is running …
At this moment I try to get your rotating icon an your timer border running. 
Greats, Steffen
1 Like
Try restarting HA and clear you browser cache.
Hi! It’s possible to create a custom collapsible control, like climate card? Thanks!
You are the best… thank you alot! If you only knew how long i been trying to figure this out…
Thanks once again!! 
1 Like
Do you have any idea why this is happening?
Have a look in Developer Tools → States at the entity you are using to see what the value is there.
Yes/maybe. Give us some more details on what you are trying to do.
Ah, negative fraction. Trying using | float instead of | int. You will also need to do <= or >= otherwise you are not catering for when it is 0.
Looks cold where you are 
H!!. I want to click on an icon and the options appear in a drop-down menu, like collapsible controls
Hey guys!
I’m trying to use Spin Animation but only when the entity is toggled.
Can someone please help me with how to do it?
type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: teal
entity: switch.livingroomfan1
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
}
Here’s some examples to help you get started:
3 Likes
non of them really helps me. I’m trying to get the fan to spin and only when it is toggled.
and I’m not sure how to do it, or if you can even right any code under style at all.
So I was able to do this:
type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: |-
{% if is_state('switch.livingroomfan1', 'on') %}
teal
{% endif %}
entity: switch.livingroomfan1
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
}
But im not sure how to make the animation to stop spinning while the entitiy is off
That was in reply to arielo61.
For your question, have a look here
1 Like
Try using:
ha-icon {
{{ '--icon-animation: spin 1s linear infinite;' if is_state('switch.livingroomfan1', 'on') }}
}
3 Likes
YESSSS You’re the man Marco thanks!
Hi Rhys,
Can you assist again.
I cannot seem to get the badge icon to move using your code here: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #2456 by rhysb
Here is my code as it stands:
icon: mdi:water-opacity
primary: Kitchen Sink Water Filter
icon_color: grey
secondary: '{{ (states(entity) | as_datetime | as_local - now()).days + 1 }} days remaing'
entity: input_datetime.kitchen_sink_water_filter
badge_icon: mdi:exclamation-thick
badge_color: red
hold_action:
action: more-info
tap_action:
action: call-service
service: script.reset_reminder
data: {}
target:
entity_id: input_datetime.kitchen_sink_water_filter
confirmation:
text: Are you sure you want to reset the timer?
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-orange)) {{ ((states(config.entity) | as_datetime | as_local - now()).days + 1) / 30 * 100 }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
mushroom-state-info$: |
.primary:after {
content: " (30 Days)";
color: rgb(var(--card-background-color));
font-style: bold;
font-size: 10px
}
I also want the badge only to appear when the date has lapsed
2 Likes