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
You can format the date/time with .strftime() like this:
{{ now().strftime("%A, %-d %B %Y") }}
Format code reference:
https://strftime.org/
Made itā¦ 
you are really Genius.
Thank you So muchā¦ you are the best
1 Like
You can change the Mushroom Climate Buttons like this:
type: custom:mushroom-climate-card
entity: climate.air_conditioner
hvac_modes:
- 'off'
- heat
- heat_cool
show_temperature_control: true
primary_info: state
secondary_info: name
card_mod:
style:
mushroom-state-info$: |
.primary:after {
content: " | {{ states('sensor.lounge_sensor_humidity') | round(1) }} %";
}
mushroom-climate-hvac-modes-control $ mushroom-button:nth-child(1) $: |
.button {
--card-mod-icon: mdi:mushroom;
}
.: |
mushroom-climate-hvac-modes-control {
transform: scalex(-1);
}
Note that the :nth-child() numbering is reversed because we have reversed the buttons.
2 Likes
Title and entity:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Study
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Bens PC
secondary: |-
{{ states((entity)) | title }} {% if is_state((entity), 'on') %}
{% if (now() - states('sensor.winterfell_lastactive')|as_datetime).total_seconds() < 10 %}
- Active
{% else %}
- Inactive
{% endif %}
{% endif %}
icon: mdi:microsoft-windows
icon_color: |-
{% if is_state((entity), 'off') %}
disabled
{% else %}
blue
{% endif %}
badge_icon: >-
{% if (now() -
states('sensor.winterfell_lastactive')|as_datetime).total_seconds() <
10 %}
mdi:run
{% else %}
''
{% endif %}
badge_color: >-
{% if (now() -
states('sensor.winterfell_lastactive')|as_datetime).total_seconds() <
10 %}
green
{% else %}
''
{% endif %}
entity: switch.winterfell
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
ha-card:active {
background: rgba(var(--rgb-disabled), 0.1);
transform: scale(0.985);
transition: 0s;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: button.winterfell_lock
icon_color: white
icon: mdi:lock
content_info: none
tap_action:
action: call-service
service: button.press
target:
entity_id: button.winterfell_lock
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-primary-text-color), 0.05);
--chip-border-width: 0;
--icon-color: rgb(var(--rgb-white));
}
- type: entity
entity: button.winterfell_sleep
icon_color: white
icon: mdi:power-sleep
content_info: none
tap_action:
action: call-service
confirmation:
text: Are you sure you want to Sleep?
service: button.press
target:
entity_id: button.winterfell_sleep
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-primary-text-color), 0.05);
--chip-border-width: 0;
--icon-color: rgb(var(--rgb-white));
}
- type: entity
entity: button.winterfell_restart
icon_color: white
icon: mdi:restart
content_info: none
tap_action:
action: call-service
confirmation:
text: Are you sure you want to Restart?
service: button.press
target:
entity_id: button.winterfell_restart
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-primary-text-color), 0.05);
--chip-border-width: 0;
--icon-color: rgb(var(--rgb-white));
}
- type: entity
entity: button.winterfell_shutdown
icon_color: white
icon: mdi:power
content_info: none
tap_action:
action: call-service
confirmation:
text: Are you sure you want to Shutdown?
service: button.press
target:
entity_id: button.winterfell_shutdown
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-primary-text-color), 0.05);
--chip-border-width: 0;
--icon-color: rgb(var(--rgb-white));
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
CPU/RAM/GPU:
type: conditional
conditions:
- entity: sensor.winterfell_cpuload
state_not: unavailable
card:
type: vertical-stack
cards:
- type: grid
square: false
columns: 3
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.winterfell_cpuload
color: rgb(76, 175, 80)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 65%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
legend:
show: false
chart:
height: 170px
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-entity-card
entity: sensor.winterfell_cpuload
primary_info: name
secondary_info: state
name: Core
icon: mdi:cpu-64-bit
icon_color: green
layout: vertical
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
top: -63px;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 158px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.winterfell_memoryusage
color: rgb(33, 150, 243)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 65%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
legend:
show: false
chart:
height: 170px
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-entity-card
entity: sensor.winterfell_memoryusage
primary_info: name
secondary_info: state
name: Memory
icon_color: blue
layout: vertical
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
top: -63px;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 158px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.winterfell_gpuload
color: rgb(233, 30, 99)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 65%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
legend:
show: false
chart:
height: 170px
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-entity-card
entity: sensor.winterfell_gpuload
primary_info: name
secondary_info: state
name: GPU
icon: mdi:expansion-card
icon_color: pink
layout: vertical
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
top: -63px;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 158px;
}
Harddrives:
type: vertical-stack
cards:
- type: conditional
conditions:
- entity: sensor.winterfell_cpuload
state_not: unavailable
card:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
icon: mdi:sd
icon_color: red
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
primary: C Drive
secondary: '{{ state_attr((entity), ''UsedSpacePercentage'') }} %'
multiline_secondary: false
entity: sensor.winterfell_storage_c
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (state_attr(config.entity, 'UsedSpacePercentage')) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
.: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
icon: mdi:harddisk
icon_color: teal
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
primary: D Drive
secondary: '{{ state_attr((entity), ''UsedSpacePercentage'') }} %'
multiline_secondary: false
entity: sensor.winterfell_storage_d
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (state_attr(config.entity, 'UsedSpacePercentage')) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
.: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
icon: mdi:harddisk
icon_color: orange
layout: vertical
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
primary: E Drive
secondary: '{{ state_attr((entity), ''UsedSpacePercentage'') }} %'
multiline_secondary: false
entity: sensor.winterfell_storage_e
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (state_attr(config.entity, 'UsedSpacePercentage')) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
.: |
ha-card {
--ha-card-border-width: 0;
}