I love the cards on the right top.
What integration/app is that?
just a card 
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: >-
{{ 'mdi:lightbulb' if is_state('light.all_lights', 'on') else
'mdi:lightbulb-off' }}
layout: vertical
icon_color: '{{ ''orange'' if is_state(''light.all_lights'', ''on'') else ''disabled'' }}'
badge_icon: transparent
badge_color: '{{ ''orange'' if is_state(''light.all_lights'', ''on'') else ''none'' }}'
secondary: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Verlichting
content:
type: vertical-stack
cards:
- type: custom:expander-card
gap: ''
padding: ''
clear: true
title: ''
overlay-margin: 2em
child-padding: ''
button-background: transparent
expanded: true
title-card:
type: custom:mushroom-title-card
title: ''
subtitle: Lampen ingeschakeld
cards:
- type: custom:auto-entities
filter:
include:
- domain: light
state: 'on'
group: light.all_lights
options:
type: custom:mushroom-light-card
icon_color: amber
use_light_color: true
collapsible_controls: true
exclude: []
card:
square: false
columns: 2
type: grid
show_empty: true
card_param: cards
sort:
method: friendly_name
- type: custom:expander-card
gap: ''
padding: ''
clear: true
title: ''
overlay-margin: 2em
child-padding: ''
button-background: transparent
expanded: false
title-card:
type: custom:mushroom-title-card
title: ''
subtitle: Lampen uitgeschakeld
cards:
- type: custom:auto-entities
filter:
include:
- domain: light
state: 'off'
group: light.all_lights
options:
type: custom:mushroom-light-card
icon_color: amber
use_light_color: true
collapsible_controls: true
exclude: []
card:
square: false
columns: 2
type: grid
show_empty: true
card_param: cards
sort:
method: friendly_name
card_mod:
style: |
{% if is_state('light.all_lights', 'on') %}
mushroom-badge-icon:after {
content: "{{ expand(states.light.all_lights) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
font-weight: bolder;
border-radius: 50%;
border: 0px !important;
box-shadow: none !important;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
{% endif %}
ha-card {
background: none !important;
border: 0px !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: >-
{{ 'mdi:motion-sensor' if is_state('binary_sensor.motion', 'on') else
'mdi:motion-sensor-off' }}
icon_color: >-
{{ 'green' if is_state('binary_sensor.motion', 'on') else 'disabled'
}}
layout: vertical
badge_color: '{{ ''green'' if is_state(''binary_sensor.motion'', ''on'') else ''none'' }}'
badge_icon: transparent
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Bewegingssensoren
content:
type: custom:auto-entities
filter:
include:
- group: binary_sensor.motion
options:
type: custom:mushroom-entity-card
layout: vertical
exclude: []
card_param: cards
sort:
method: state
reverse: true
show_empty: true
card:
square: false
columns: 2
type: grid
card_mod:
style: |
{% if is_state('binary_sensor.motion', 'on') %}
mushroom-badge-icon:after {
content: "{{ expand(binary_sensor.motion) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
{% endif %}
ha-card {
background: none !important;
border: 0px !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: >-
{{ 'mdi:door-open' if is_state('binary_sensor.deuren', 'on') else
'mdi:door-closed' }}
icon_color: >-
{{ 'white' if is_state('binary_sensor.deuren', 'on') else 'disabled'
}}
layout: vertical
badge_color: '{{ ''orange'' if is_state(''binary_sensor.deuren'', ''on'') else ''none'' }}'
badge_icon: transparent
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Buitendeuren
content:
square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
entity: binary_sensor.gang_deurcontact_voordeur_contact
icon: >-
{{ 'mdi:door-open' if is_state('entity', 'open') else
'mdi:door-closed' }}
icon_color: >-
{{ 'white' if is_state('entity', 'open') else 'disabled'
}}
primary: '{{ state_attr(entity, ''friendly_name'') }}'
secondary: >-
{{
relative_time(as_datetime(states('binary_sensor.gang_deurcontact_voordeur_contact_last_changed')))
}} ago
- type: custom:mushroom-template-card
entity: binary_sensor.kamer_deurcontact_balkon_contact
icon: >-
{{ 'mdi:door-open' if is_state('entity', 'on') else
'mdi:door-closed' }}
icon_color: '{{ ''white'' if is_state(''entity'', ''on'') else ''disabled'' }}'
primary: '{{ state_attr(entity, ''friendly_name'') }}'
secondary: >-
{{
relative_time(as_datetime(states('binary_sensor.kamer_deurcontact_balkon_contact_last_changed')))
}} ago
card_mod:
style: |
{% if is_state('binary_sensor.deuren', 'on') %}
mushroom-badge-icon:after {
content: "{{ expand(states.binary_sensor.deuren) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
{% endif %}
ha-card {
background: none !important;
border: 0px !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: >-
{{ 'mdi:television' if is_state('media_player.mediaspelers', 'on')
else 'mdi:television-off' }}
icon_color: >-
{{ 'orange' if is_state('media_player.mediaspelers', 'on') else
'disabled' }}
layout: vertical
badge_color: >-
{{ 'orange' if is_state('media_player.mediaspelers', 'on') else 'none'
}}
badge_icon: transparent
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Media
content:
type: custom:auto-entities
filter:
include:
- group: media_player.mediaspelers
options:
type: custom:mushroom-media-player-card
icon: mdi:television
use_media_info: true
show_volume_level: true
volume_controls:
- volume_buttons
- volume_set
media_controls:
- on_off
- play_pause_stop
exclude: []
card_param: cards
sort:
method: friendly_name
show_empty: true
card:
square: false
columns: 2
type: grid
card_mod:
style: |
{% if is_state('media_player.mediaspelers', 'on') %}
mushroom-badge-icon:after {
content: "{{ expand(states.media_player.mediaspelers) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
{% endif %}
ha-card {
background: none !important;
border: 0px !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
icon: >-
{{ 'mdi:blinds-horizontal' if is_state('cover.all_blinds', 'open')
else 'mdi:blinds-horizontal-closed' }}
layout: vertical
icon_color: '{{ ''white'' if is_state(''cover.all_blinds'', ''open'') else ''disabled'' }}'
badge_icon: transparent
badge_color: '{{ ''orange'' if is_state(''cover.all_blinds'', ''open'') else ''none'' }}'
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Blinds
content:
type: custom:auto-entities
filter:
include:
- domain: cover
options:
type: custom:mushroom-cover-card
show_buttons_control: true
exclude:
- entity_id: cover.garage_door
- entity_id: cover.all_blinds
- entity_id: cover.bedroom_blinds
- entity_id: cover.kitchen_blinds
- entity_id: cover.living_room_blinds
card:
type: grid
square: false
columns: 2
card_param: cards
sort:
method: friendly_name
card_mod:
style: |
{% if is_state('cover.all_blinds', 'open') %}
mushroom-badge-icon:after {
content: "{{ expand(states.cover.all_blinds) | selectattr( 'state', 'eq', 'open') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
{% endif %}
ha-card {
background: none !important;
border: 0px !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: '{{ ''mdi:fan'' if is_state(''fan.fans'', ''on'') else ''mdi:fan-off'' }}'
icon_color: '{{ ''white'' if is_state(''fan.fans'', ''on'') else ''disabled'' }}'
layout: vertical
badge_icon: transparent
badge_color: '{{ ''orange'' if is_state(''fan.fans'', ''on'') else ''none'' }}'
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Fans
content:
type: custom:auto-entities
filter:
include:
- domain: fan
options:
type: custom:mushroom-fan-card
show_percentage_control: true
exclude:
- entity_id: fan.fans
card:
type: grid
square: false
columns: 2
card_param: cards
sort:
method: friendly_name
card_mod:
style: |
{% if is_state('fan.fans', 'on') %}
mushroom-badge-icon:after {
content: "{{ expand(states.fan.fans) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
{% endif %}
ha-card {
background: none !important;
border: 0px !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: >-
{{ 'mdi:window-open' if is_state('group.exterior_windows', 'on') else
'mdi:window-closed' }}
icon_color: >-
{{ 'white' if is_state('group.exterior_windows', 'on') else 'disabled'
}}
layout: vertical
badge_color: '{{ ''orange'' if is_state(''group.exterior_windows'', ''on'') else ''none'' }}'
badge_icon: transparent
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Exterior Windows
content:
type: custom:auto-entities
filter:
include:
- group: group.exterior_windows
options:
type: custom:mushroom-entity-card
secondary_info: last-changed
exclude: []
card_param: cards
sort:
method: friendly_name
show_empty: true
card:
square: false
columns: 2
type: grid
card_mod:
style: |
{% if is_state('group.exterior_windows', 'on') %}
mushroom-badge-icon:after {
content: "{{ expand(states.group.exterior_windows) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
{% endif %}
ha-card {
background: none !important;
border: 0px !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: >-
{{ 'mdi:water-alert' if is_state('binary_sensor.water_leak', 'on')
else 'mdi:water-off' }}
icon_color: >-
{{ 'white' if is_state('binary_sensor.water_leak', 'on') else
'disabled' }}
layout: vertical
badge_icon: transparent
badge_color: >-
{{ 'orange' if is_state('binary_sensor.water_leak', 'on') else 'none'
}}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Water Leak Sensors
content:
type: custom:auto-entities
filter:
include:
- group: binary_sensor.water_leak
options:
type: custom:mushroom-entity-card
secondary_info: last-changed
exclude: []
card_param: cards
sort:
method: friendly_name
show_empty: true
card:
square: false
columns: 2
type: grid
card_mod:
style: |
{% if is_state('binary_sensor.water_leak', 'on') %}
mushroom-badge-icon:after {
content: "{{ expand(states.binary_sensor.water_leak) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
{% endif %}
ha-card {
background: none !important;
border: 0px !important;
box-shadow: none !important;
}
view_layout:
grid-area: badges
card_mod:
style: |
ha-card {
--ha-card-border-radius: 0px;
height: 74px !important;
margin-right: -9px;
margin-left: -9px;
margin-top: -14px;
padding-left: 10px;
padding-right: 10px;
padding-top: 6px;
}
:host {
z-index: 998;
position: sticky;
position: -webkit-sticky;
top: 0;
--layout-margin: 0px 0px 0px 0px !important;
}
Very nice looking dashboard. Could you please share which card you are using for the electricity consumption on the right hand side? Thank you!
That works!!!
Thanks!!!
1 Like
Can you post some screenshots? 
Hi
Can you please show me you configuration for this sensor?
Thanks in advance
hmmm wonder how the notification badge (little red dot) works ā¦ I thought the badge would appear if a light is on or so but in my case it does not work 
It works here
Do you have the all lights group?
I had to create it manually with the lights i need to monitor
1 Like
I did, gonna double check if I messed up with something while I was adapting it to my needs
you were right, I did not update that value properly now it works thanks for the hint
I have also created an automation, the if the āinput_boolean.notificationsā, are on for more then 5 min, the set it to off (Auto close the bar) 
1 Like
show us the code 
alias: auto toogle input_boolean.notifications
description: ""
trigger:
- platform: state
entity_id:
- input_boolean.notifications
for:
hours: 0
minutes: 5
seconds: 0
to: "on"
condition: []
action:
- if:
- condition: state
entity_id: input_boolean.notifications
for:
hours: 0
minutes: 5
seconds: 0
state: "on"
then:
- service: input_boolean.turn_off
data: {}
target:
entity_id: input_boolean.notifications
mode: single
2 Likes
Hello guys!
Does anybody know how would be the yaml to change this --mdc-icon-size property in card-mod?
Changing on chrome does exactly what I need, but I canāt find out how Iām supposed to do in yaml.
Yes, I only want the Title text to be white. So Iāll have to stick with what I have. Appreciate the confirmation.
The animation problem is very puzzling. Even after an HA restart, itās not working. So with this in the theme:
steve_theme:
card-mod-theme: "steve_theme"
card-mod-card: |
.type-custom-mushroom-entity-card:active {
transform: scale(0.85);
transition: 0s;
}
card-mod-card-yaml: |
mushroom-title-card$: |
h1 {
--primary-text-color: white;
}
h2 {
--secondary-text-color: white;
}
and this (snippet) in my cards, the Eco+ button animates, but the Eco button doesnāt. Neither does any other standalone Mushroom Entity card. Can you spot anything?
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.myenergi_mode_eco_2
name: Eco+
secondary_info: none
layout: vertical
tap_action:
action: call-service
service: input_boolean.turn_on
data: {}
target:
entity_id: input_boolean.myenergi_mode_eco_2
hold_action:
action: more-info
icon_color: blue
card_mod:
style: |
ha-card:active {
transform: scale(0.85);
transition: 0s;
}
- type: custom:mushroom-entity-card
entity: input_boolean.myenergi_mode_eco
name: Eco
secondary_info: none
layout: vertical
tap_action:
action: call-service
service: input_boolean.turn_on
data: {}
target:
entity_id: input_boolean.myenergi_mode_eco
hold_action:
action: more-info
icon_color: blue
Is this exactly the right syntax (for instance, with all dashes in the class)?
.type-custom-mushroom-entity-card:active {
transform: scale(0.85);
transition: 0s;
}
You can control the Mushroom Badge & Icon sizes like this.
Mushroom Icon Size:
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
:host {
--mush-icon-size: 50px;
--mush-icon-symbol-size: 0.8em;
}
If you want to change it globally, then add this to your theme:
mush-icon-size: 50px;
mush-icon-symbol-size: 0.8em;
Mushroom Badge Size:
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
badge_icon: mdi:snail
badge_color: green
card_mod:
style: |
:host {
--mush-badge-size: 20px;
--mush-badge-icon-size: 0.6em;
}
If you want to change it globally, then add this to your theme:
mush-badge-size: 20px
mush-badge-icon-size: 0.6em
5 Likes
Yes, that looks correct.
Remove the mushroom-title-card card-mod and it should work fine.
Use just this:
steve_theme:
card-mod-theme: "steve_theme"
card-mod-card: |
.type-custom-mushroom-entity-card:active {
transform: scale(0.85);
transition: 0s;
}
Sure, have a look here:
1 Like
Great, that worked. I didnāt realise I couldnāt have the Title stuff in there at the same time. So now every Title card has to have:
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Car Charging
card_mod:
style:
mushroom-title-card$: |
h1 {
--primary-text-color: white;
}
h2 {
--secondary-text-color: white;
}
Is there any other way of avoiding coding this everywhere?
1 Like
Thanks!!
I was missing that.
1 Like