I am trying to create a card for a group of two switches that I want to behave in the same way as the light card when used with groups of lights. So when the group is toggled on the card is expanded to show both switches. When the group is switched off, the card then collapses.
Any help would be much appreciated. Apologies if the answer is really obvious - I have tried searching this thread and the docs to no avail
@rhysb Could you look at this room card I have and tell me if there is anything wrong with the code. It works but it causes 2 different android tablets to lag out or become unresponsive after a few mins. Works fine on PC or Android Phone. Have been unable to get any help and Iām running out of things to try.
square: false
columns: 1
type: grid
cards:
- square: false
columns: 1
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.master_bedroom_main_lights
icon: mdi:sofa
icon_color: '#03A9F4'
primary: Living Room
secondary: |
{{ state_attr('climate.my_ecobee','current_temperature')}}Ā°F
{% if is_state('climate.my_ecobee', 'cool') %}
Cooling
{% elif is_state('climate.my_ecobee', 'heat') %}
Heating
{% endif %}
layout: horizontal
badge_icon: |
{% if is_state('climate.my_ecobee', 'heat') %}
mdi:radiator
{% elif is_state('climate.my_ecobee', 'cool') %}
mdi:snowflake
{% else %} {% endif %}
badge_color: |
{% if is_state('climate.my_ecobee', 'heat') %}
red
{% elif is_state('climate.my_ecobee', 'cool') %}
blue
{% else %} {% endif %}
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -52px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
--secondary-text-color:
{% if is_state('climate.my_ecobee', 'heat') %}
red
{% elif is_state('climate.my_ecobee', 'cool') %}
#03A9F4
{% else %}
#6c6c75
{% endif %}
}
style: |
mushroom-badge-icon {
left: 90px;
top: 25px;
}
- type: custom:mushroom-template-card
primary: Lights
icon_color: disabled
icon: mdi:lightbulb-on
secondary: null
entity: light.master_bedroom_main_lights
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Lights
autoclose: false
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.master_bedroom_main_lights
name: Master Bedroom Light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-light-card
entity: light.master_bedroom_main_lights
name: Closet Light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
hold_action:
action: toggle
double_tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
{% if state_attr(config.entity, 'rgb_color') == none %}
--icon-color: rgb(255,190,137) !important;
--shape-color: rgb(255,190,137, 0.2 ) !important;
--icon-animation: illumination 1s infinite;
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
{% else %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
{% endif %}
}
ha-icon {
.: |
ha-card {
width: px;
margin-left: 35%;
top: -160px;
background: none;
}
:host {
--mush-icon-size: 45px;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
- type: custom:mushroom-template-card
primary: Cameras
icon_color: blue
icon: mdi:cctv
secondary: null
entity: camera.g3_flex_high
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Living Room Cameras
content:
type: vertical-stack
cards:
- type: picture-entity
show_state: false
show_name: true
camera_view: auto
image: https://demo.home-assistant.io/stub_config/bedroom.png
entity: camera.g3_flex_high
name: Living Room
camera_image: camera.g3_flex_high
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
hold_action:
action: toggle
double_tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: scan 5s ease-in-out infinite;
transform-origin: 90% 80%
}
@keyframes scan {
0%, 100% { transform: rotate(20deg); }
50% { transform: rotate(-15deg); }
}
.: |
ha-card {
width: px;
margin-left: 35%;
top: -180px;
background: none;
}
:host {
--mush-icon-size: 45px;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
- type: custom:mushroom-template-card
primary: Curtain's
secondary: ''
entity: cover.cover_group
icon: |
{% if is_state('cover.cover_group', 'open') %}
mdi:curtains
{% else %}
mdi:curtains-closed
{% endif %}
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'open') %}
{% if state_attr(config.entity, 'rgb_color') == none %}
--icon-color: rgb(255,190,137) !important;
--shape-color: rgb(255,190,137, 0.2 ) !important;
{% else %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
{% endif %}
}
.: |
ha-card {
width: px;
margin-left: 35%;
top: -200px;
background: none;
}
:host {
--mush-icon-size: 45px;
}
card_mod:
style: |
ha-card {
height: 178px !important;
width: px !important;
}
i asked openai to combine two styles into one
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
animation: borderPulse 2s ease-out infinite;
{% endif %}
}
ha-icon.mushroom-shape-icon {
{% if is_state(config.entity, 'on') %}
--icon-animation: open 3s ease-in-out infinite;
transform-origin: 30%;
animation: open 3s ease-in-out infinite;
{% endif %}
}
@keyframes borderPulse {
50% {
box-shadow: 0 0 10px lightblue;
}
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
but this code is not working. icon animation not working. how to fix?
Did you found a fix for the header?
Ok not quite what I had in mind @SteffenDE. The card icon configuration is right.
Have a look! 
What i am trying to achieve:
is to add another entity value next to running or minutes - āsensor.electrolux_sawa_washing_machine_wm1_cyclephaseā
@rhysb maybe you can help with the conditional of the spin? Spin only when running or other value? The moment I put a condition a static washing machine in red appears!
Reduce the size of the card by eliminating the white space.
Here is the code so far:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: |-
{% set state=states(entity) %}
{% if state=='Running' %}
mdi:washing-machine
{% elif state== 'Delayed start' %}
mdi:washing-machine
{% elif state== 'Cycle is finished' %}
mdi:washing-machine-alert
{% else %}
mdi:washing-machine
{% endif %}
icon_color: blue
entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate
primary: |2-
{% set d ={
'Delayed start': 'Delayed Start',
'Running': 'Running',
'Cycle is finished': 'Cycle Ended',
'Off': 'Off'
} %}
{{ d.get(states(entity)) }}
secondary: |
{{states('sensor.electrolux_sawa_washing_machine_wm1_timetoend')}} Min
card_mod:
style:
icon: |-
{% set state=states(entity) %}
{% if state=='Running' %}
mdi:washing-machine
{% else %}
mdi:washing-machine-off
{% endif %}
mushroom-shape-icon$: >
ha-icon {
{{ '--icon-animation: shake 400ms ease-in-out infinite;' if
is_state(config.entity, 'Running') }}
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: red
card_mod: null
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 80px;
top: -82px;
}
- type: custom:mushroom-template-card
entity: sensor.electrolux_sawa_washing_machine_wm1_cyclephase
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
icon: mdi:tshirt-crew-outline
entity: sensor.electrolux_sawa_washing_machine_wm1_programuid
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: '{{states(''sensor.electrolux_sawa_washing_machine_wm1_programuid'') }} '
- type: template
icon: mdi:thermometer
entity: sensor.electrolux_sawa_washing_machine_wm1_analogtemperature
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{{states('sensor.electrolux_sawa_washing_machine_wm1_analogtemperature')
}}Ā°C
- type: template
icon: mdi:alpha-s-circle-outline
entity: sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{{states('sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed')
}}
- type: template
entity: binary_sensor.electrolux_sawa_washing_machine_wm1_doorlock
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{% set d ={ 'off': 'Locked', 'on': 'Unlocked', } %}
{{d.get(states(entity)) }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:lock
{% else %}
mdi:lock-open-outline
{% endif %}
OK here is my full code, but I do not use a red washing in the machine but it toggels only if the machine is running.
Machine is off (showing last run):
Machine is running:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: HaushaltsgerƤte
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
height: 120px !important;
}
horizontal: false
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-shape-icon$: |
{% if is_state('sensor.miele_waschmaschine_status', 'running') %}
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
{% endif %}
entity: sensor.miele_waschmaschine_status
layout: horizontal
multiline_secondary: false
primary: Waschmaschine
secondary: |-
{% if is_state('sensor.miele_waschmaschine_status', 'running') %}
{{- 'Restlaufzeit ' + states('sensor.miele_waschmaschine_remaining_time') + ' ' -}}
{{- state_attr('sensor.miele_waschmaschine_remaining_time','unit_of_measurement') -}}
{{- ' (' + states('sensor.miele_waschmaschine_finish_at') + ')' -}}
{{- ' - ' + ct_state_translated('sensor.miele_waschmaschine_program_phase','de') -}}
{% else %}
{{- ct_state_translated('sensor.miele_waschmaschine_status','de') -}}
{% set lastrun = states('sensor.tmp_waschmaschine_lastrun') | as_datetime %}
{% if lastrun != None %}
{{- ' (Beendet ' -}}
{% if lastrun < today_at() - timedelta(days=1) %}
{{- as_timestamp(lastrun) | timestamp_custom('%d.%m. %H:%M') -}}
{% elif lastrun < today_at() %}
{{- as_timestamp(lastrun) | timestamp_custom('G. %H:%M') -}}
{% else %}
{{- as_timestamp(lastrun) | timestamp_custom('%H:%M') -}}
{% endif %}
{{- ')' -}}
{% endif %}
{% endif %}
icon: >-
{% if is_state('sensor.miele_waschmaschine_status', 'running') %}
mdi:washing-machine
{% elif is_state('sensor.miele_waschmaschine_status', 'program_ended')
%}
mdi:washing-machine-alert
{% else %}
mdi:washing-machine-off
{% endif %}
icon_color: |-
{% if is_state('sensor.miele_waschmaschine_status', 'running') %}
blue
{% else %}
grey
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-chips-card
alignment: justify
chips:
- type: template
card_mod:
style: |
ha-card {
background: none;
border: none;
box-shadow: none;
}
entity: binary_sensor.miele_waschmaschine_door
content: null
icon: |-
{% if is_state('binary_sensor.miele_waschmaschine_door','off') %}
mdi:lock
{% else %}
mdi:lock-open-variant
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.miele_waschmaschine_door','off') %}
red
{% else %}
green
{% endif %}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: template
card_mod:
style: |
ha-card {
background: none;
border: none;
box-shadow: none;
}
entity: sensor.miele_waschmaschine_program
content: |-
{% if states('sensor.miele_waschmaschine_program') != 'unknown' %}
{{- ct_state_translated('sensor.miele_waschmaschine_program','de') -}}
{% else %}
{{- '-' -}}
{% endif %}
icon: mdi:tshirt-crew-outline
icon_color: |-
{% if states('sensor.miele_waschmaschine_program') != 'unknown' %}
blue
{% else %}
grey
{% endif %}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: template
card_mod:
style: |
ha-card {
background: none;
border: none;
box-shadow: none;
}
entity: sensor.miele_waschmaschine_target_temperature
content: >-
{% set washtemp =
states('sensor.miele_waschmaschine_target_temperature') %} {% if
washtemp != 'unknown' %}
{{- washtemp + ' ' + state_attr('sensor.miele_waschmaschine_target_temperature','unit_of_measurement') -}}
{% else %}
{{- '-' -}}
{% endif %}
icon: mdi:thermometer
icon_color: |-
{% set washtemp =
states('sensor.miele_waschmaschine_target_temperature') %} {% if
washtemp != 'unknown' %}
{% if int(washtemp,0) <= 30 %}
yellow
{% elif int(washtemp,0) <= 60 %}
orange
{% else %}
red
{% endif %}
{% else %}
grey
{% endif %}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: template
card_mod:
style: |
ha-card {
background: none;
border: none;
box-shadow: none;
}
entity: sensor.miele_waschmaschine_spin_speed
content: >-
{% set washspeed = states('sensor.miele_waschmaschine_spin_speed')
%} {% if washspeed != 'unknown' %}
{{- washspeed + ' ' + state_attr('sensor.miele_waschmaschine_spin_speed','unit_of_measurement') -}}
{% else %}
{{- '-' -}}
{% endif %}
icon: mdi:alpha-s-circle-outline
icon_color: >-
{% set washspeed = states('sensor.miele_waschmaschine_spin_speed')
%}
{% if washspeed != 'unknown' %}
{% if int(washspeed,0) <= 500 %}
cyan
{% elif int(washspeed,0) <= 1000 %}
purple
{% else %}
pink
{% endif %}
{% else %}
grey
{% endif %}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
For the first point, just put a dash after {{ d.get(states(entity)) }} and enter whatever you want.
Example:
{{ d.get(states(entity)) }} | {{states('sensor.temperature}}
Ok that didnāt work, but this did:
secondary: |
{{states('sensor.electrolux_sawa_washing_machine_wm1_timetoend')}} Min
{{states('sensor.electrolux_sawa_washing_machine_wm1_cyclephase')}}
hi, how do I change the size and font of the Gauge text so that it looks more like the others?
- type: gauge
entity: sensor.openweathermap_uv_index
needle: true
min: 0
max: 12
segments:
- from: 0
color: '#43a047'
- from: 3
color: '#e7de3c'
- from: 6
color: '#FFA500'
- from: 8
color: '#db4437'
- from: 11
color: '#7B68EE'
name: Ćndice UV
unit: []
card_mod:
style: |
ha-card {
border: transparent;
margin-top: -10px;
scale: 90%;
}
replace it
<s>z-index: 9;</s>
z-index: 4;
and
<s>top: 0 px;</s>
top: var(--header-height);
I donāt have anything in my theme
Mushroom Shadow Mobile:
card-mod-theme: Mushroom Shadow Mobile
card-mod-root: |
.header {
display: none;
}
#view {
margin: 0 !important;
height: 100% !important;
}
# Home Assistant override
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-width: 0
modes:
light:
primary-text-color: "#212121"
primary-background-color: "#EFEFEF"
# header
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var(--primary-background-color)"
dark:
primary-text-color: "#DDDDDD"
primary-background-color: "#121212"
# header
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var(--primary-background-color)"
@rhysb
Need help adding the percent border to a mushroom entity/template card. This is what I have so far. Iāve seen several examples from you where the border percent works but there is an icon in the middle, and I want to have the numbers in the middle of the card. I couldnāt get it to work with the examples shown. My try is in the memory mushroom template card (33% in pic). Iām also trying to use badge color instead of icon color.
Is this possible to do with mushroom entity/template cards? Thanks in advance.
Current:
Want (but with numbers in card, not on outside):
Current code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon_color: ''
primary: unRAID
picture: |+
local/hlicons/unraid.png
- type: vertical-stack
cards:
- type: grid
square: false
columns: 6
cards:
- type: custom:mushroom-template-card
primary: ''
icon: none
layout: horizontal
entity: sensor.glances_unraid_cpu_used
badge_icon: mdi:speedometer
badge_color: '#3498db'
secondary: ''
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ states(config.entity) | round(0) }}%";
position: absolute;
font-size: var(--card-primary-font-size);
}
- type: custom:mushroom-template-card
primary: ''
icon: none
layout: horizontal
entity: sensor.glances_unraid_ram_used_percent
badge_icon: mdi:memory
badge_color: '#9b59b6'
secondary: ''
tap_action:
action: more-info
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.badge_icon_color }})) {{ (states(config.entity)) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "{{ states(config.entity) | round(0) }}%";
position: absolute;
font-size: var(--card-primary-font-size);
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.badge_icon_color }}), 0.2);
}
- type: custom:mushroom-template-card
primary: ''
icon: none
layout: horizontal
entity: sensor.3080_mining_rig_power
badge_icon: mdi:lightning-bolt
badge_color: red
secondary: ''
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ states(config.entity) | round(0) }}W";
position: absolute;
font-size: var(--card-primary-font-size);
}
- type: custom:mushroom-template-card
primary: ''
icon: none
layout: horizontal
entity: sensor.glances_unraid_cputin_temperature
badge_icon: mdi:thermometer
badge_color: green
secondary: ''
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ states(config.entity) | round(0) }}Ā°C";
position: absolute;
font-size: var(--card-primary-font-size);
}
- type: custom:mushroom-template-card
primary: ''
icon: none
layout: horizontal
entity: sensor.glances_unraid_mnt_cache_used_percent
badge_icon: mdi:alpha-c
badge_color: black
secondary: ''
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ states(config.entity) | round(0) }}%";
position: absolute;
font-size: var(--card-primary-font-size);
}
- type: custom:mushroom-template-card
primary: ''
icon: none
layout: horizontal
entity: sensor.unraid_array_usage
badge_icon: mdi:database
badge_color: black
secondary: ''
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ states(config.entity) | round(0) }}%";
position: absolute;
font-size: var(--card-primary-font-size);
}
Hi all, Iām working on this mini project to try and port a footer that looks like this. Now I will post the photos of what I managed to create by making do with my knowledge, but above all by studying the examples posted by the great @rhysb here on the forum.
Also Iād like to thank @piitaya for making these awesome cards.
Letās get to the point, this is my card:
NORMAL MODE
MUSIC MODE
In normal mode, the card allows you to switch between the various cards you see.
In music mode, the card will make room for a cute popup that will show the current track.
In all of this though, I need your help:
First @rhysb, Iām asking for your help to fix the CSS of this card a bit, especially to keep it stuck at the bottom.
create a popup or card extension at the bottom āHomeā , where you can choose the room to display via an input_select and state-switch.
Implement any popup on press for music
Any idea is welcome.
I am also attaching the code below if you want to test it (the sticky card code is missing because it doesnāt work as I would like)
type: custom:state-switch
entity: media_player.camera_mattia
default: <default>
transition: <transition>
transition_time: <transition_time>
states:
'off':
type: horizontal-stack
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: |-
{% if is_state('input_select.seleziona_stanza', 'Home') %}
Home
{% elif is_state('input_select.seleziona_stanza', 'Cucina') %}
Cucina
{% elif is_state('input_select.seleziona_stanza', 'Salotto') %}
Salotto
{% endif %}
secondary: ''
icon: |-
{% if is_state('input_select.seleziona_stanza', 'Home') %}
mdi:home
{% elif is_state('input_select.seleziona_stanza', 'Cucina') %}
mdi:fridge
{% elif is_state('input_select.seleziona_stanza', 'Salotto') %}
mdi:sofa
{% endif %}
icon_color: white
entity: input_select.seleziona_stanza
tap_action: none
card_mod:
style: |
ha-card {
--spacing: 8px;
--icon-size: 35px;
--primary-text-color: rgb(var(--rgb-white));
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_boolean.menu
double_tap_action:
action: none
icon: mdi:chevron-up
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Rhys
content:
type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
card_mod:
style: |
ha-card {
position: absolute;
left: 0px;
top: 10px;
}
alignment: end
card_mod:
style:
mushroom-template-chip:
$: |
mushroom-chip {
cursor: default !important;
}
.: |
ha-card {
height: var(--chip-height);
margin-right: calc(-1 * var(--chip-spacing));
transition: all 0s;
}
.chip-container * {
margin: 10px 10px 0px 0px;
display: flex;
}
mushroom-conditional-chip {
margin: 0px !important;
}
- type: custom:mushroom-title-card
title: 'Seleziona la vista:'
subtitle: ''
alignment: center
card_mod:
style: |
:host {
position: relative;
top: 0px;
z-index: 1;
--mush-title-padding: 12px 0px 12px;
}
ha-card {
background: rgba(var(--rgb-card-background-color), 0.2);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: var(--mush-chip-spacing, 8px);
border-radius: 0 0 24px 24px;
margin: -8px 0px 34px;
box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.16);
transition: all 0s;
}
ha-card:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0px;
//background: url('/local/camera_mattia.jpg') top center / 100%;
opacity: 0.4;
z-index: -1;
margin-top: -8px;
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Home
secondary: ''
icon: mdi:home
icon_color: black
fill_container: false
layout: horizontal
entity: input_select.seleziona_stanza
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.seleziona_stanza
data:
option: Home
card_mod:
style: |
ha-card {
width: 200px;
height: 20px;
--spacing: 0px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: 10px 10px 10px10px !important;
margin-left: auto;
margin-right: auto;
transition: all 0s;
--icon-size: 35px;
--primary-text-color: rgb(var(--rgb-black));
{% if is_state('input_select.seleziona_stanza', 'Home') %}
background: #eeeee4;
width: 300px;
height: 20px;
{% endif %}
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:mushroom-template-card
primary: Cucina
secondary: ''
icon: mdi:fridge
icon_color: black
fill_container: false
layout: horizontal
entity: input_select.seleziona_stanza
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.seleziona_stanza
data:
option: Cucina
card_mod:
style: |
ha-card {
width: 200px;
height: 20px;
--spacing: 0px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: 10px 10px 10px10px !important;
margin-left: auto;
margin-right: auto;
transition: all 0s;
--icon-size: 35px;
--primary-text-color: rgb(var(--rgb-black));
{% if is_state('input_select.seleziona_stanza', 'Cucina') %}
background: #eeeee4;
width: 300px;
height: 20px;
{% endif %}
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:mushroom-template-card
primary: Salotto
secondary: ''
icon: mdi:sofa
icon_color: black
fill_container: false
layout: horizontal
entity: input_select.seleziona_stanza
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.seleziona_stanza
data:
option: Salotto
card_mod:
style: |
ha-card {
width: 200px;
height: 20px;
--spacing: 0px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: 10px 10px 10px10px !important;
margin-left: auto;
margin-right: auto;
transition: all 0s;
--icon-size: 35px;
--primary-text-color: rgb(var(--rgb-black));
{% if is_state('input_select.seleziona_stanza', 'Salotto') %}
background: #eeeee4;
width: 300px;
height: 20px;
{% endif %}
}
mushroom-shape-icon {
--shape-color: none !important;
}
card_mod:
style:
ha-header-bar$: |
.mdc-top-app-bar__section--align-start {
justify-content: end !important;
}
.mdc-top-app-bar__section {
padding: 0px !important;
}
.mdc-top-app-bar__title {
display: none;
}
.mdc-top-app-bar__row {
height: 36px !important;
}
.mdc-top-app-bar {
padding: 8px;
}
.: |
ha-icon-button {
background: color-mix(in srgb, var(--grey-color) 10%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
ha-header-bar {
margin-bottom: -64px;
width: 36px;
margin-left: auto !important;
}
:host {
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--popup-min-width: 450px;
--mdc-icon-button-size: 36px;
--mdc-icon-size: 18px;
}
.content {
margin: -24px -24px -24px !important;
}
hold_action:
action: none
card_mod:
style: |
ha-card {
margin-top: 7px;
margin-left: 50px;
--chip-icon-size: 20px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
padding: 0px;
width: 210px;
height: 50px;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: 35px 35px 35px 35px !important;
background: var(--card-background-color);
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:music-note-eighth
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 120px;
transition: all 0.5s;
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:video
layout: vertical
icon_color: ''
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 80px;
transition: all 0s;
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:chart-bar
layout: vertical
icon_color: orange
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 40px;
transition: all 0s;
}
idle:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
secondary: ''
icon: |-
{% if is_state('input_select.seleziona_stanza', 'Home') %}
mdi:home
{% elif is_state('input_select.seleziona_stanza', 'Cucina') %}
mdi:fridge
{% elif is_state('input_select.seleziona_stanza', 'Salotto') %}
mdi:sofa
{% endif %}
layout: vertical
icon_color: white
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 0px;
transition: all 0.5s;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-media-player-card
entity: media_player.camera_mattia
layout: horizontal
show_volume_level: true
use_media_info: true
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
{% if not is_state(config.entity, 'off') %}
background: rgba(var(--rgb-card-background-color), 0.6) url( '{{ state_attr(config.entity, "entity_picture") }}' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
{% endif %}
border-radius: 35px 35px 35px 35px !important;
height: 50px !important;
margin-left: -8px;
}
card_mod:
style: |
ha-card {
width: 210px;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: 35px 35px 35px 35px !important;
margin-left: -40px;
{% if is_state('media_player.camera_mattia', 'off') %}
{% else %}
background-image: url( '{{ state_attr( "media_player.camera_mattia", "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color), 0.8);
background-blend-mode: overlay;
position: relative;
{% endif %}
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:video
layout: vertical
icon_color: ''
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 80px;
transition: all 0s;
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:chart-bar
layout: vertical
icon_color: orange
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 40px;
transition: all 0s;
}
playing:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
secondary: ''
icon: |-
{% if is_state('input_select.seleziona_stanza', 'Home') %}
mdi:home
{% elif is_state('input_select.seleziona_stanza', 'Cucina') %}
mdi:fridge
{% elif is_state('input_select.seleziona_stanza', 'Salotto') %}
mdi:sofa
{% endif %}
layout: vertical
icon_color: white
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 0px;
transition: all 0.5s;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-media-player-card
entity: media_player.camera_mattia
layout: horizontal
show_volume_level: true
use_media_info: true
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
{% if not is_state(config.entity, 'off') %}
background: rgba(var(--rgb-card-background-color), 0.6) url( '{{ state_attr(config.entity, "entity_picture") }}' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
{% endif %}
border-radius: 35px 35px 35px 35px !important;
height: 50px !important;
margin-left: -8px;
}
card_mod:
style: |
ha-card {
width: 210px;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: 35px 35px 35px 35px !important;
margin-left: -40px;
{% if is_state('media_player.camera_mattia', 'off') %}
{% else %}
background-image: url( '{{ state_attr( "media_player.camera_mattia", "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color), 0.8);
background-blend-mode: overlay;
position: relative;
{% endif %}
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:video
layout: vertical
icon_color: ''
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 80px;
transition: all 0s;
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:chart-bar
layout: vertical
icon_color: orange
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 40px;
transition: all 0s;
}
@rhysb - Iāve been trying to replicate something I saw you did on your room card where you made it reactive to light/dark mode.
Iāve got a media card iām working on and I am trying to apply a background to layout-card - this card doesnāt appear to support card-mod as it doesnāt have a ha-card element so iāve wrapped it in modcard.
Iām using the following code;
- type: custom:mod-card
card_mod:
style: |
:host([dark-mode]) {
background-image: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%) !important;
}
:host {
background-image: linear-gradient(0deg, rgba(200,200,200,1) 0%, rgba(200,200,200,1) 40%, rgba(200,200,200,0) 100%) !important;
}
But Iām seeing the background style from :host (the lighter one) get applied even when dark-mode is on.
However the same code works fine when I try it against another card like mushroom-template-card.
Any tips on how to get the background color following the theme ? - I donāt even seem to be able to use the theme variables in the gradient as it needs rgbaā¦ 
This is sweeet!!
If it could be done through the theme instead of a custom card it would be easy to make it stick to the bottom, damn
Iām running in a templating challenge.
I have the following card layout
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: All Chores
alignment: center
- type: custom:auto-entities
card:
type: grid
columns: 2
square: false
card_param: cards
filter:
include:
- entity_id: input_button.chore_*
options:
type: custom:mushroom-template-card
primary: '{{state_attr(''this.entity_id'', ''friendly_name'')}}'
secondary: >-
{% set chore = 'this.entity_id' | replace('input_button.','') %}
{% set midnight = today_at() %} {% set event =
state_attr('input_datetime.'+chore+'_next', 'timestamp') |
as_datetime | as_local %} {% set delta = event - midnight %}
{% if delta.days == 0 %}Vandaag{% elif delta.days == 1 %}Morgen{%
elif delta.days == 2 %}Overmorgen{% else %}Over {{ delta.days }}
dagen{% endif %}
Laatste: {{states('input_datetime.'+chore+'_last') }}
multiline_secondary: true
icon_color: >-
{% set chore = 'this.entity_id' | replace('input_button.','') %}{%
set midnight = today_at() %}{% set event =
state_attr('input_datetime.'+chore+'_next', 'timestamp') |
as_datetime | as_local %}{% set delta = event - midnight %}{% if
delta.days <= 0 %}red{% elif delta.days == 1 %}orange{% elif
delta.days == 2 %}orange{% else %}green{% endif %}
icon: '{{state_attr(''this.entity_id'', ''icon'')}}'
badge_icon: '{{ states(''input_number.''+chore+''_interval'')|int }}'
card_mod:
style:
mushroom-shape-icon$: null
.: |
mushroom-badge-icon:after {
content: "{% set chore = 'this.entity_id' | replace('input_button.','') %}
{{ states('input_number.'+chore+'_interval')|int }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: black;
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
badge_color: red
tap_action:
action: call-service
service: script.turn_on
target:
entity_id: script.chores_not_due_button_press
data:
variables:
button_id: this.entity_id
But it wonāt show the value of the according input_number in the badge. The value of this input_number is the interval in days.
Is this possible at all?
Iām playing with creating a sticky footer.
The width formatting seems to get lost with the bottom styling. Any clues?
- type: custom:stack-in-card
cards:
- type: horizontal-stack
cards: !include lovelace/views/home_menu.yaml
card_mod:
style: |
:host {
position: fixed;
z-index: 2;
bottom: 0px;
}
Hi all,
I am having trouble showing the switch symbol all times and if on, make the icon color red.
This is the code:
- type: conditional
conditions:
- entity: switch.abr_steckdose_switch
state: 'on'
chip:
type: template
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''grey'' }}'
icon: mdi:power-plug
tap_action:
action: more-info
entity: switch.abr_steckdose_switch
Thanks a lot for the right hint 