Would love to use this, thank you! Unfortunately, I can’t get the popup to work. It shows that there’s one device with low power but the popup won’t open. Which add-ons do I need for this to work? I’ve installed browser mod and layout cards, anything else I need?
Would love to see it, as well!
1 Like
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Household Appliances Status
subtitle: >-
This card shows the status of each appliance. Green icon means the
appliance has no issue. The text underneith shows the staus if its on
- square: false
columns: 3
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Garage Door
secondary: ''
icon: |-
{% set state=states('cover.smart_garage_door_opener_door') %}
{% if state=='closed' %}
mdi:garage-variant-lock
{% elif state=='open' %}
mdi:garage-open-variant
{% elif state=='unavailable' %}
mdi:garage-alert-variant
{% endif %}
entity: cover.smart_garage_door_opener_door
icon_color: |-
{% set state=states('cover.smart_garage_door_opener_door') %}
{% if state=='closed' %}
green
{% elif state=='open' %}
orange
{% elif state=='unavailable' %}
red
{% endif %}
layout: vertical
hold_action:
action: more-info
tap_action:
action: more-info
fill_container: false
badge_color: ''
double_tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: person.brad
icon: |-
{% set state=states('person.brad') %}
{% if state=='home' %}
mdi:face-man
{% elif state=='away' %}
mdi:face-man-outline
{% endif %}
icon_color: |-
{% set state=states('person.brad') %}
{% if state=='home' %}
green
{% elif state=='away' %}
orange
{% endif %}
tap_action:
action: more-info
double_tap_action:
action: more-info
hold_action:
action: more-info
- type: template
entity: person.lauren
icon: |-
{% set state=states('person.lauren') %}
{% if state=='home' %}
mdi:face-woman
{% elif state=='away' %}
mdi:face-woman-outline
{% endif %}
icon_color: |-
{% set state=states('person.lauren') %}
{% if state=='home' %}
green
{% elif state=='away' %}
orange
{% endif %}
tap_action:
action: more-info
double_tap_action:
action: more-info
hold_action:
action: more-info
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
3 Likes
type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- square: false
columns: 3
type: grid
cards:
- type: custom:mushroom-entity-card
entity: sensor.electrolux_fridge_top_area_temperature_rc1
primary_info: state
secondary_info: name
name: Top
icon_color: blue
tap_action:
action: call-service
service: browser_mod.popup
data:
content:
type: vertical-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.electrolux_fridge_top_area_temperature_rc1
color: '#4FC3F7'
name: 24hr
show:
graph: line
hours_to_show: 24
points_per_hour: 1
animate: true
- type: custom:mini-graph-card
entities:
- entity: sensor.electrolux_fridge_top_area_temperature_rc1
color: '#4FC3F7'
name: Daily Max/7 Days
show:
graph: bar
group_by: date
aggregate_func: max
hours_to_show: 168
animate: true
- type: custom:mini-graph-card
entities:
- entity: sensor.electrolux_fridge_top_area_temperature_rc1
color: '#4FC3F7'
name: Daily Max/30 Days
show:
graph: bar
group_by: date
aggregate_func: max
hours_to_show: 720
animate: true
title: Top Area Graphs
target: {}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
- type: custom:mushroom-entity-card
entity: sensor.electrolux_fridge_middle_draw_temperature_xc1
primary_info: state
secondary_info: name
name: Middle
icon_color: blue
tap_action:
action: call-service
service: browser_mod.popup
data:
content:
type: vertical-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.electrolux_fridge_middle_draw_temperature_xc1
color: '#4FC3F7'
name: 24hr
show:
graph: line
hours_to_show: 24
points_per_hour: 1
animate: true
- type: custom:mini-graph-card
entities:
- entity: sensor.electrolux_fridge_middle_draw_temperature_xc1
color: '#4FC3F7'
name: Daily Max/7 Days
show:
graph: bar
group_by: date
aggregate_func: max
hours_to_show: 168
animate: true
- type: custom:mini-graph-card
entities:
- entity: sensor.electrolux_fridge_middle_draw_temperature_xc1
color: '#4FC3F7'
name: Daily Max/30 Days
show:
graph: bar
group_by: date
aggregate_func: max
hours_to_show: 720
animate: true
title: Middle Area Temperature Graphs
target: {}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
- type: custom:mushroom-entity-card
entity: sensor.electrolux_fridge_freezer_draw_temperature_fc1
primary_info: state
secondary_info: name
name: Freezer
icon_color: blue
tap_action:
action: call-service
service: browser_mod.popup
data:
content:
type: vertical-stack
cards:
- type: custom:mini-graph-card
entities:
- entity: >-
sensor.electrolux_fridge_freezer_draw_temperature_fc1
color: '#4FC3F7'
name: 24hr
show:
graph: line
hours_to_show: 24
points_per_hour: 1
animate: true
- type: custom:mini-graph-card
entities:
- entity: >-
sensor.electrolux_fridge_freezer_draw_temperature_fc1
color: '#4FC3F7'
name: Daily Max/7 Days
show:
graph: bar
group_by: date
aggregate_func: max
hours_to_show: 168
animate: true
- type: custom:mini-graph-card
entities:
- entity: >-
sensor.electrolux_fridge_freezer_draw_temperature_fc1
color: '#4FC3F7'
name: Daily Max/30 Days
show:
graph: bar
group_by: date
aggregate_func: max
hours_to_show: 720
animate: true
title: Freezer Temperature Graphs
target: {}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.electrolux_fridge_top_area_temperature_rc1
name: Top
color: '#81D4FA'
- entity: sensor.electrolux_fridge_middle_draw_temperature_xc1
name: Middle
color: '#29B6F6'
y_axis: secondary
- entity: sensor.electrolux_fridge_freezer_draw_temperature_fc1
name: freezer
color: '#1976D2'
y_axis: secondary
hours_to_show: 24
points_per_hour: 1
line_width: 4
font_size: 50
animate: true
show:
name: true
icon: false
state: false
legend: false
fill: fade
name: Fridge Section Temperatures
- square: false
columns: 3
type: grid
cards:
- type: custom:mushroom-template-card
primary: Top Section
secondary: >-
{% set
state=states('binary_sensor.electrolux_top_area_door_state_rc1')
%}
{% if state=='off' %}
Closed
{% elif state=='on' %}
Open
{% elif state=='unavailable' %}
Unavailable
{% endif %}
icon: >-
{% set
state=states('binary_sensor.electrolux_top_area_door_state_rc1')
%}
{% if state=='off' %}
mdi:fridge-top
{% elif state=='on' %}
mdi:fridge-top
{% elif state=='unavailable' %}
mdi:fridge-top
{% endif %}
entity: binary_sensor.electrolux_top_area_door_state_rc1
icon_color: >-
{% set
state=states('binary_sensor.electrolux_top_area_door_state_rc1')
%}
{% if state=='off' %}
green
{% elif state=='on' %}
orange
{% elif state=='unavailable' %}
red
{% endif %}
layout: vertical
hold_action:
action: more-info
tap_action:
action: more-info
fill_container: false
badge_color: ''
double_tap_action:
action: more-info
badge_icon: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
- type: custom:mushroom-template-card
primary: Middle Draw
secondary: >-
{% set
state=states('binary_sensor.electrolux_fridge_middle_draw_door_state_xc1')
%}
{% if state=='off' %}
Closed
{% elif state=='on' %}
Open
{% elif state=='unavailable' %}
Unavailable
{% endif %}
icon: >-
{% set
state=states('binary_sensor.electrolux_fridge_middle_draw_door_state_xc1')
%}
{% if state=='off' %}
mdi:fridge-top
{% elif state=='on' %}
mdi:fridge-top
{% elif state=='unavailable' %}
mdi:fridge-top
{% endif %}
entity: binary_sensor.electrolux_fridge_middle_draw_door_state_xc1
icon_color: >-
{% set
state=states('binary_sensor.electrolux_fridge_middle_draw_door_state_xc1')
%}
{% if state=='off' %}
green
{% elif state=='on' %}
orange
{% elif state=='unavailable' %}
red
{% endif %}
layout: vertical
hold_action:
action: more-info
tap_action:
action: more-info
fill_container: false
badge_color: ''
double_tap_action:
action: more-info
badge_icon: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
- type: custom:mushroom-template-card
primary: Freezer Draw
secondary: >-
{% set
state=states('binary_sensor.electrolux_freezer_draw_door_state_fc1')
%}
{% if state=='off' %}
Closed
{% elif state=='on' %}
Open
{% elif state=='unavailable' %}
Unavailable
{% endif %}
icon: >-
{% set
state=states('binary_sensor.electrolux_freezer_draw_door_state_fc1')
%}
{% if state=='off' %}
mdi:fridge-top
{% elif state=='on' %}
mdi:fridge-top
{% elif state=='unavailable' %}
mdi:fridge-top
{% endif %}
entity: binary_sensor.electrolux_freezer_draw_door_state_fc1
icon_color: >-
{% set
state=states('binary_sensor.electrolux_freezer_draw_door_state_fc1')
%}
{% if state=='off' %}
green
{% elif state=='on' %}
orange
{% elif state=='unavailable' %}
red
{% endif %}
layout: vertical
hold_action:
action: more-info
tap_action:
action: more-info
fill_container: false
badge_color: ''
double_tap_action:
action: more-info
badge_icon: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
3 Likes
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('switch.nest', 'on')%}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
.:| mushroom-shape-icon {
display: flex;
{% if is_state('switch.nest', 'on')%}
animation: blink 4s ease infinite;
{% endif %}
}
@keyframes blink {
50% {opacity: 0;}
}
Please guide what is wrong with the code, only the first animation is happening not the second one.
thanks
Thanks for the reply. Can you, or someone else, point to the problem then.
I pretty much know nothing about yaml, so any help would be appreciated. I have been messing around with the code and the indentation and can’t find the problem. I tried you code, replacing the entity it looks at, the icon and the states os the entity, but it does’t work.
Try this:
card_mod:
style:
mushroom-shape-icon$: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-icon {
box-shadow: 0px 0px;
animation: rotation linear infinite !important;
{% if states('sensor.ventilacao_power') | float < 10 %}
animation-duration: 5s !important;
{% elif states('sensor.ventilacao_power') | float < 17 %}
animation-duration: 3s !important;
{% elif states('sensor.ventilacao_power') | float < 21 %}
animation-duration: 1s !important;
{%- else -%}
animation-duration: ;
{%- endif %}
}
1 Like
Thanks. That worked out great.
1 Like
I don’t know if you use an iphone?
When the last light has a dimmer slider, it has a visual imperfection on the side. It seems this is only happening on ios devices.
1 Like
Sharing the air purifier as requested , but I;m still not supper happy about that 
I’ve hidden the chips using fold-entity row
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: fan.mi_air_purifier_3h
primary: Oczyszczacz 3H
secondary: PM 2.5 - {{ states('sensor.mi_air_purifier_3h_pm2_5') }}
icon: |
{% if is_state('fan.mi_air_purifier_3h', 'on') %}
mdi:air-purifier
{% else %}
mdi:air-purifier-off
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
multiline_secondary: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('fan.mi_air_purifier_3h', 'on') %}
--shape-animation: ping 2s infinite
{% endif %}
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-orange), 0.7);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
- type: conditional
conditions:
- entity: fan.mi_air_purifier_3h
state: 'on'
card:
type: grid
columns: 4
square: false
cards:
- type: custom:mushroom-template-card
entity: binary_sensor.mi_air_purifier_3h_mode_auto
primary_info: none
secondary_info: none
layout: horizontal
tap_action:
action: call-service
service: fan.set_preset_mode
service_data:
entity_id: fan.mi_air_purifier_3h
preset_mode: Auto
icon: mdi:alpha-a-circle
icon_color: >
{% if is_state('binary_sensor.mi_air_purifier_3h_mode_auto',
'on') %}
orange
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
margin-top: -15px;
'--paper-item-icon-color': rgb(192, 192, 192)
'--paper-item-icon-active-color': rgb(255, 128, 0)
}
mushroom-shape-icon {
--shape-color: none !important;
}
:host {
--mush-icon-size: 60px;
}
- type: custom:mushroom-template-card
entity: binary_sensor.mi_air_purifier_3h_mode_silent
primary_info: none
secondary_info: none
layout: horizontal
tap_action:
action: call-service
service: fan.set_preset_mode
service_data:
entity_id: fan.mi_air_purifier_3h
preset_mode: Favorite
icon: mdi:heart
icon_color: >
{% if is_state('binary_sensor.mi_air_purifier_3h_mode_favorite',
'on') %}
orange
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
margin-top: -15px;
'--paper-item-icon-color': rgb(192, 192, 192)
'--paper-item-icon-active-color': rgb(255, 128, 0)
}
mushroom-shape-icon {
--shape-color: none !important;
}
:host {
--mush-icon-size: 60px;
}
- type: custom:mushroom-template-card
entity: binary_sensor.mi_air_purifier_3h_mode_fan
primary_info: none
secondary_info: none
layout: horizontal
tap_action:
action: call-service
service: fan.set_preset_mode
service_data:
entity_id: fan.mi_air_purifier_3h
preset_mode: Fan
icon: mdi:fan
icon_color: >
{% if is_state('binary_sensor.mi_air_purifier_3h_mode_fan',
'on') %}
orange
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
margin-top: -15px;
'--paper-item-icon-color': rgb(192, 192, 192)
'--paper-item-icon-active-color': rgb(255, 128, 0)
}
mushroom-shape-icon {
--shape-color: none !important;
}
:host {
--mush-icon-size: 60px;
}
- type: custom:mushroom-template-card
entity: binary_sensor.mi_air_purifier_3h_mode_silent
primary_info: none
secondary_info: none
layout: horizontal
tap_action:
action: call-service
service: fan.set_preset_mode
service_data:
entity_id: fan.mi_air_purifier_3h
preset_mode: Silent
icon: mdi:power-sleep
icon_color: >
{% if is_state('binary_sensor.mi_air_purifier_3h_mode_silent',
'on') %}
orange
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
margin-top: -15px;
'--paper-item-icon-color': rgb(192, 192, 192)
'--paper-item-icon-active-color': rgb(255, 128, 0)
}
mushroom-shape-icon {
--shape-color: none !important;
}
:host {
--mush-icon-size: 60px;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: binary_sensor.mi_air_purifier_3h_mode_fan
state: 'on'
card:
type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
margin-left: 200px;
margin-top: -30px;
}
cards:
- type: custom:mushroom-template-card
entity: binary_sensor.mi_air_purifier_3h_mode_fan_1
title: Fan level 1
icon: mdi:fan-speed-1
tap_action:
action: call-service
service: number.set_value
service_data:
entity_id: number.mi_air_purifier_3h_fan_level
value: 1
icon_color: >
{% if is_state('binary_sensor.mi_air_purifier_3h_mode_fan_1',
'on') %}
orange
{% else %}
grey
{% endif %}
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
:host {
--mush-icon-size: 50px;
}
- type: custom:mushroom-template-card
entity: binary_sensor.mi_air_purifier_3h_mode_fan_2
title: Fan level 2
icon: mdi:fan-speed-2
tap_action:
action: call-service
service: number.set_value
service_data:
entity_id: number.mi_air_purifier_3h_fan_level
value: 2
icon_color: >
{% if is_state('binary_sensor.mi_air_purifier_3h_mode_fan_2',
'on') %}
orange
{% else %}
grey
{% endif %}
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
:host {
--mush-icon-size: 50px;
}
- type: custom:mushroom-template-card
entity: binary_sensor.mi_air_purifier_3h_mode_fan_3
title: Fan level 3
icon: mdi:fan-speed-3
tap_action:
action: call-service
service: number.set_value
service_data:
entity_id: number.mi_air_purifier_3h_fan_level
value: 3
icon_color: >
{% if is_state('binary_sensor.mi_air_purifier_3h_mode_fan_3',
'on') %}
orange
{% else %}
grey
{% endif %}
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
:host {
--mush-icon-size: 50px;
}
- type: conditional
conditions:
- entity: binary_sensor.mi_air_purifier_3h_mode_favorite
state: 'on'
card:
type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 10% 80% 10%
grid-template-rows: auto
margin: 0px
padding: 0px
cards:
- type: custom:mushroom-template-card
icon: mdi:plus
icon_color: orange
tap_action:
action: call-service
service: script.favorite_up_3h
service_data:
entity_id: fan.mi_air_purifier_3h
step: 2
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
:host {
--mush-icon-size: 40px;
}
ha-card {
margin-left: 160px;
margin-top: -30px;
}
- type: custom:mushroom-template-card
tap_action:
action: none
primary: >-
{{ states('number.mi_air_purifier_3h_favorite_level') }} ( {{
states('input_select.mi_air_purifier_3h_coverage') }} )
card_mod:
style: |
ha-card {
margin-left: 170px;
margin-top: -20px;
}
- type: custom:mushroom-template-card
icon: mdi:minus
icon_color: orange
title: Favorite level -
tap_action:
action: call-service
service: script.favorite_down_3h
service_data:
entity_id: fan.mi_air_purifier_3h
step: 1
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
:host {
--mush-icon-size: 40px;
}
ha-card {
margin-left: -30px;
margin-top: -30px;
}
- type: custom:fold-entity-row
head:
type: custom:mushroom-template-card
label: padding
secondary: more
tap_action: null
multiline_secondary: true
card_mod:
style: |
ha-card {
margin-left: 240px;
}
padding: 0
entities:
- type: custom:mushroom-chips-card
alignment: left
chips:
- type: template
entity: select.mi_air_purifier_3h_led_brightness
icon: |
{% if is_state(entity, 'bright') %}
mdi:brightness-7
{% elif is_state(entity, 'dim') %}
mdi:brightness-6
{% else %}
mdi:brightness-5
{% endif %}
icon_color: |
{% if is_state(entity, 'off') %}
grey
{% else %}
orange
{% endif %}
tap_action:
action: call-service
service: script.led_brightness_3h
- type: template
entity: switch.mi_air_purifier_3h_buzzer
icon: |
{% if is_state(entity, 'off') %}
mdi:volume-off
{% else %}
mdi:volume-high
{% endif %}
icon_color: |
{% if is_state(entity, 'off') %}
grey
{% else %}
orange
{% endif %}
tap_action:
action: toggle
- type: template
entity: switch.mi_air_purifier_3h_child_lock
icon: |
{% if is_state(entity, 'off') %}
mdi:lock-open-outline
{% else %}
mdi:lock
{% endif %}
icon_color: |
{% if is_state(entity, 'off') %}
grey
{% else %}
orange
{% endif %}
tap_action:
action: toggle
- type: template
entity: sensor.mi_air_purifier_3h_filter_life_remaining
icon: mdi:air-filter
content: '{{ states(''sensor.mi_air_purifier_3h_filter_life_remaining'') }}'
tap_action:
action: toggle
card_mod:
style: |
ha-card {
margin-left: 20px;
--chip-spacing: -2px;
}
2 Likes
Can i ask where you put those yaml files? Trying to copy/paste your config.
Can someone help please. I want to move the chip icons up to reduce the space between them and the secondary text above. I dont understand CSS at the best of time tbh 
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Garage Door
secondary: |-
{% set state=states('cover.smart_garage_door_opener_door') %}
{% if state=='closed' %}
Closed
{% elif state=='open' %}
Open
{% elif state=='unavailable' %}
Unavailable
{% endif %}
icon: |-
{% set state=states('cover.smart_garage_door_opener_door') %}
{% if state=='closed' %}
mdi:garage-variant-lock
{% elif state=='open' %}
mdi:garage-open-variant
{% elif state=='unavailable' %}
mdi:garage-alert-variant
{% endif %}
entity: cover.smart_garage_door_opener_door
icon_color: |-
{% set state=states('cover.smart_garage_door_opener_door') %}
{% if state=='closed' %}
green
{% elif state=='open' %}
orange
{% elif state=='unavailable' %}
red
{% endif %}
layout: vertical
hold_action:
action: more-info
tap_action:
action: more-info
fill_container: false
badge_color: ''
double_tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: person.brad
icon: |-
{% set state=states('person.brad') %}
{% if state=='home' %}
mdi:face-man
{% elif state=='away' %}
mdi:face-man-outline
{% endif %}
icon_color: |-
{% set state=states('person.brad') %}
{% if state=='home' %}
green
{% elif state=='away' %}
orange
{% endif %}
tap_action:
action: more-info
double_tap_action:
action: more-info
hold_action:
action: more-info
- type: template
entity: person.lauren
icon: |-
{% set state=states('person.lauren') %}
{% if state=='home' %}
mdi:face-woman
{% elif state=='away' %}
mdi:face-woman-outline
{% endif %}
icon_color: |-
{% set state=states('person.lauren') %}
{% if state=='home' %}
green
{% elif state=='away' %}
orange
{% endif %}
tap_action:
action: more-info
double_tap_action:
action: more-info
hold_action:
action: more-info
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
4 Likes
hello is it possible for the mushroom light card to change the icon based on the status on/off how can this be done? thanks in advance!
nice man & can you share the code of the master tv ? thanks in advance!
Use the template mushroom card
icon: |-
{% set state=states('light.front_balcony_left_wall_light') %}
{% if state=='on' %}
hue:wall-lantern
{% elif state=='off' %}
hue:wall-lantern
{% elif state=='unavailable' %}
hue:wall-lantern
{% endif %}
icon_color: |-
{% set state=states('light.front_balcony_left_wall_light') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
here ya go mate
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Master TV
secondary: |-
{% set state=states('sensor.master_bedroom_tv_power_status') %}
{% if state=='On' %}
In Use
{% elif state=='Off' %}
Off
{% elif state=='unavailable' %}
Unavailable
{% endif %}
icon: |-
{% set state=states('sensor.master_bedroom_tv_voltage_status') %}
{% if state=='On' %}
mdi:television-play
{% elif state=='Off' %}
mdi:television-off
{% elif state=='unavailable' %}
mdi:television-stop
{% endif %}
entity: media_player.master_bedroom_tv
icon_color: |-
{% set state=states('sensor.master_bedroom_tv_voltage_status') %}
{% if state=='On' %}
green
{% elif state=='Off' %}
orange
{% elif state=='unavailable' %}
red
{% endif %}
layout: vertical
hold_action:
action: more-info
tap_action:
action: call-service
service: browser_mod.popup
data:
content:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.master_bedroom_tv_currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
{% set media_type = state_attr(config.entity, 'media_content_type') %}
--card-mod-icon:
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:play
{% endif %};
}
- type: conditional
conditions:
- entity: media_player.master_bedroom_tv_currently_playing
state_not: 'off'
card:
entity: media_player.master_bedroom_tv_currently_playing
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(63, 81, 181, 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 42px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(63, 81, 181);
--ha-card-border-radius: 12px;
}
card_mod:
style: |
ha-card {
{% if not is_state('media_player.master_bedroom_tv_currently_playing', 'off') and not is_state('media_player.master_bedroom_tv_currently_playing', 'idle') %}
background: url( '{{ state_attr("media_player.master_bedroom_tv_currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
{% if state_attr('media_player.master_bedroom_tv_currently_playing', 'media_content_type') == 'tvshow' %}
background-size: auto 100%, cover;
{% else %}
background-size: 50% auto, cover;
{% endif %}
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
}
ha-card {
border-radius: 20px;
}
title: Master Bedroom TV
target: {}
fill_container: false
double_tap_action:
action: more-info
badge_color: |-
{% set state=states('media_player.master_bedroom_chromecast') %}
{% if state=='off' %}
disabled
{% elif state=='playing' %}
green
{% elif state=='paused' %}
orange
{% elif state=='unavailable' %}
red
{% endif %}
badge_icon: |-
{% set state=states('media_player.master_bedroom_chromecast') %}
{% if state=='off' %}
mdi:cast-off
{% elif state=='playing' %}
mdi:cast-connected
{% elif state=='paused' %}
mdi:cast-connected
{% elif state=='unavailable' %}
mdi:cast-off
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: more-info
entity: sensor.master_bedroom_tv_voltage_status
tap_action:
action: more-info
hold_action:
action: more-info
icon: |-
{% set state=states('sensor.master_bedroom_tv_voltage_status') %}
{% if state=='On' %}
mdi:flash-triangle
{% elif state=='Off' %}
mdi:flash-triangle
{% endif %}
icon_color: |-
{% set state=states('sensor.master_bedroom_tv_voltage_status') %}
{% if state=='On' %}
green
{% elif state=='Off' %}
red
{% endif %}
- type: template
double_tap_action:
action: more-info
entity: sensor.master_bedroom_tv_power_status
tap_action:
action: more-info
hold_action:
action: more-info
icon: |-
{% set state=states('sensor.master_bedroom_tv_power_status') %}
{% if state=='On' %}
mdi:flash
{% elif state=='Off' %}
mdi:flash
{% endif %}
icon_color: |-
{% set state=states('sensor.master_bedroom_tv_power_status') %}
{% if state=='On' %}
green
{% elif state=='Off' %}
disabled
{% endif %}
- type: template
double_tap_action:
action: more-info
entity: sensor.master_bedroom_tv_plug_overall_electrical_consumption_kwh
tap_action:
action: more-info
hold_action:
action: more-info
icon: mdi:meter-electric-outline
icon_color: green
content: ''
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
1 Like
yes I knew that but I would like to keep the light card because I want you to be able to adjust the brightness and color directly there and in the template card isn’t that how it works does this also work what I’m asking?
Yes, this worked. Thank you
1 Like
You could add negative margin-top to your chips card:
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: -5%;
}
2 Likes