Try this:
style: |
ha-card {
border: 0px !important;
box-shadow: none !important;
padding-top: 8px;
--chip-height: 60px;
--chip-background: none;
}
That did the trick! Thank you!
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!!!
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
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) 
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
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.
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;
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
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: