Thanks @rhysb! Ill give it a try!
1 Like
did you ever found a solution ?
I have similer problems
@rhysb Hmmm, i modified the code to suit my need but doesnāt seem to be working.
What have I dont wrong?
type: custom:mushroom-number-card
entity: number.target_climate_temperature
card_mod:
style:
mushroom-state-info$: |
.secondary:after {
content: " ";
}
.: |
ha-card {
{% set value = states(config.entity) | int %}
--rgb-state-number: var(--rgb-
{%- if value < 20.0 -%}
blue
{%- elif value > 21.0 -%}
red
{%- else -%}
grey
{%- endif -%});
}
Could it be the decimals? The entity moves in 0.5 degree steps.
Update: Definitaly the decimals. If i remove the 0 after the decimal from one or the other value it works only for that one.
I am stumped! The output value from what I see is in Ā°C. If i put the degree symbol in after the value, then its blue regardless of what I set.
.: |
ha-card {
{% set value = states(config.entity) | int %}
--rgb-state-number: var(--rgb-
{%- if value < 20 Ā°C -%}
blue
{%- elif value > 21 Ā°C -%}
red
{%- else -%}
grey
{%- endif -%});
}
You would need to use | float instead of | int. You canāt include the unit in the comparison.
Try something like this:
type: custom:mushroom-number-card
entity: number.target_climate_temperature
card_mod:
style:
mushroom-state-info$: |
.secondary:after {
content: " Ā°C";
}
.: |
ha-card {
{% set value = states(config.entity) | float %}
--rgb-state-number: var(--rgb-
{%- if value < 20.0 -%}
blue
{%- elif value > 21.0 -%}
red
{%- else -%}
grey
{%- endif -%});
}
@rhysb Ok have tried that. had to make some modifications but it works now.
.: |
ha-card {
{% set value = states(config.entity) | float %}
--rgb-state-number: var(--rgb-
{%- if value <= 20.0 -%}
blue
{%- elif value >= 20.5 -%}
red
{%- else -%}
grey
{%- endif -%});
}
Needed the equal signs too. Thanks!!!
2 Likes
I havenāt @Michael_Dahl ā¦
Seems the issue also happens if I use a variant that doesnāt introduce the variables and just uses classic if, else etcā¦
@rhysb, could you possibly shed some light on this?
@Michael_Dahl I was just messing about and I think this solved it:
{% if (is_state('light.living', 'on')) and (is_state('switch.shellypluglivingmultimedia', 'on')) %}
green
{% elif is_state('light.living', 'on') %}
orange
{% elif is_state('switch.shellypluglivingmultimedia', 'on') %}
blue
{% endif %}
So itās more āsequentialā if you wish.
Just rebooted HA (because of the 2023.4.2 update) and seems all is well now.
1 Like
how to set the battery icon before the charge level?
secondary: ICON BATTARY ā{{ state_attr(entity, ābatteryā) }}%ā
type: custom:mushroom-template-card
primary: |-
{% if is_state(entity, 'on') %}
open
{% else %}
close
{% endif %}
secondary: '{{ state_attr(entity, "battery") }}%'
icon: |-
{% if is_state(entity, 'on') %}
mdi:window-open-variant
{% else %}
mdi:window-closed-variant
{% endif %}
entity: binary_sensor.okno_spalnia_contact
layout: vertical
icon_color: |-
{% if is_state(entity, 'on') %}
red
{% else %}
green
{% endif %}
Perfect thank you
Start with the hvac_modes buttons would have fit the cover, but unfortunately thatās how it is.
One more question, can I change the icon for auto mode, if so how?
type: custom:mushroom-climate-card
entity: climate.heizung_detlef
primary_info: state
secondary_info: last-updated
hvac_modes:
- 'off'
- heat
- auto
show_temperature_control: true
tap_action:
action: none
hold_action:
action: more-info
double_tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.primary:after {
content: " | {{ states('sensor.wandthermostat_detlef_humidity') | round(0) }} %";
}
.: |
mushroom-climate-hvac-modes-control {
transform: scalex(-1);
}
1 Like
Hi, Iām new to Mushroom, and am really liking it! Itās so polished and feels so professional.
I was wonderingā¦ is there a thread or a site where I can view nice custom cards? Like what is available on the Minimalist website. Itās nice to go to a central location and see effectively a gallery of whatās possible.
Otherwise, as far as Iām aware, the only option is to browse through all 6,000 posts in this thread, which would take a very long time, but also be difficult for maintenance purposes as there are no repos that get updated, etc.
If anyone can point me in the right direction, Iād be really grateful! Thanks!
Oh yes! Thank you! 
Hello,
I have a problem.
I click on lightsā> parterā>back and I canāt get to the previous window. I tried several options but I still didnāt succeed!
type: custom:mushroom-template-card
primary: ''
secondary: Lights
icon: mdi:lightbulb-group
icon_color: orange
layout: vertical
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Camere
content:
type: vertical-stack
cards:
- square: false
columns: 3
type: grid
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Parter
icon: mdi:lightbulb-group
icon_color: orange
layout: vertical
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Parter
content:
type: vertical-stack
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
primary: Back
icon: mdi:arrow-left
tap_action:
action: fire-dom-event
browser_mod:
service: navigate
data:
navigation_path: back
popup: true
card_mod: null
style: |
ha-card {
width: 140px;
margin-left: auto;
margin-right: auto;
background: rgba(var(--rgb-green), 0.1);
margin-bottom: 12px !important;
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
@rhysb I have another one for you that maybe you can help. Its based on an animated icon changing based on state.
So I was looking at your animation examples (all are amazing!) and came across an animation I would like to use; your Battery 2 animation.
type: custom:mushroom-template-card
icon: mdi:battery-high
icon_color: green
primary: 'Battery #2'
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: charge 3s steps(1) infinite;
}
@keyframes charge {
0% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
So I have a template card with the following set up for my EVās charge state.
type: custom:mushroom-template-card
secondary: Status
icon: |
{% set state=states(entity) %}
{% if state =='readyForCharging' %}
mdi:ev-station
{% elif state =='charging' %}
mdi:battery-alert
{% elif state =='notReadyForCharging' %}
mdi:battery-alert
{% else %}
mdi:battery-high
{% endif %}
icon_color: |-
{% set state = states(entity) %}
{% if state =='readyForCharging' %}
green
{% elif state =='charging' %}
green
{% elif state =='notReadyForCharging' %}
red
{% else %}
grey
{% endif %}
entity: sensor.charging_state
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
primary: |2-
{% set d ={
'readyForCharging': 'Ready to Charge',
'charging': 'Charging',
'notReadyForChargin': 'Not Ready'
} %}
{{ d.get(states(entity)) }}
How would I incorporate the animation for lets say for charging state? I will attempt to do others once you show me
Looking for some inspiration here.
Has anybody tackled making a card to control a smart oven?
Currently using simple-thermostat with some button cards and wellā¦ as you can see, itās ugly! LOL
Looking for ideas to mushroomize this!
1 Like
Hi folks!
Iām not going to lie. Iām a complete newbie/novice and I donāt really know what Iām doing when it comes to code or even home assistant etc. But Iām trying to learn.
Iāve got a question. Iām trying to create a new mobile friendly dashboard using Mushroom. Iām using a template card to make a nice little welcome message.
Thanks to the helpful resources online Iāve managed to find a templace code to put the day and date on the secondary information line. However, I was wondering if there was a way to change the format?
Currently itās set out for example āToday is Monday, 2023-04-09ā. However Iād like to if possible have it say āMonday 9th April 2023ā.
Hereās the code I currently have.
{% set time = now().weekday() %}
{% if (time >= 0) %}
Today is Monday, {{ now().date()}}
{% elif (time >= 1) %}
Today is Tuesday, {{ now().date()}}
{% elif (time >= 2) %}
Today is Wednesday, {{ now().date()}}
{% elif (time >= 3) %}
Today is Thursday, {{ now().date()}}
{% elif (time >= 4) %}
Today is Friday, {{ now().date()}}
{% elif (time >= 5) %}
Today is Saturday, {{ now().date()}}
{% elif (time >= 6) %}
Today is Sunday, {{ now().date()}}
{% else %}
Today is fudged....
{% endif %}
Does anyone know if thereās a change to this code that I can make or does anyone know how to code the format I want?
All help is greatly appreciated and apologies for being such a noob.
EDIT: Just noticed itās showing as Mondayā¦ Uhoh!
thank you for such quick respondā¦
iāve created script as you replied and put yaml cpde for reminder but it failed to work,
type: custom:mushroom-template-card
icon: mdi:timer
primary: Days to Reminder
icon_color: grey
secondary: >-
{{ (states(entity) | as_datetime | as_local - now()).days + 1 }}
days
hold_action:
action: call-service
service: script.reset_reminder
data: {}
target: {}
entity: input_datetime.reminder_date
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-blue)) {{ ((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);
}
1 Like
Kiosk-Mode 1.8.2 is out now and fixes the issue. If you still have problems make sure to clear your browser cache.
unfortunately, no 
1 Like