LOVE it!! This is exactly what I was looking for.
3 Likes
That would require more than just CSS styling I’m afraid.
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
secondary: >-
{{ states.sensor.garage_temperature.state }} °C / {{
states.sensor.garage_humidity.state }} %
icon: mdi:car-back
icon_color: blue
multiline_secondary: true
primary: Garage
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Garage
content:
type: custom:vertical-stack-in-card
horizontal: false
cards:
- type: custom:banner-card
heading: 🌡 Klimaat
- type: custom:config-template-card
entities:
- input_number.temperature_graph_hours
card:
type: horizontal-stack
cards:
- type: custom:config-template-card
entities:
- input_number.temperature_graph_hours
card:
type: custom:mini-graph-card
entities:
- sensor.garage_temperature
hours_to_show: >-
${states["input_number.temperature_graph_hours"].state}
points_per_hour: 1
line_width: 4
font_size: 70
line_color: lightblue
align_state: center
show:
name: false
average: true
extrema: true
labels_secondary: false
- type: custom:config-template-card
entities:
- input_number.temperature_graph_hours
card:
type: custom:mini-graph-card
entities:
- sensor.garage_humidity
hours_to_show: >-
${states["input_number.temperature_graph_hours"].state}
points_per_hour: 1
line_width: 4
font_size: 70
align_state: center
show:
name: false
average: true
extrema: true
- type: entities
show_header_toggle: false
entities:
- entity: input_number.temperature_graph_hours
type: custom:numberbox-card
icon: mdi:poll
unit: h
- type: custom:banner-card
heading: 💡 Verlichting
- type: custom:mushroom-light-card
entity: light.garage
fill_container: false
use_light_color: false
show_brightness_control: true
primary_info: none
show_color_temp_control: false
layout: horizontal
- type: custom:mushroom-light-card
entity: light.garage
primary_info: none
fill_container: true
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
layout: horizontal
3 Likes
ok… thank you for your help.
1 Like
Not per room, but whole house is done.
Mushroom low battery popup:
sensor:
- platform: template
sensors:
devices_with_low_battery:
friendly_name: 'Devices with Low Battery'
unit_of_measurement: devices
value_template: >-
{% set ignore_entities = [] %}
{{ states.sensor
| selectattr('attributes.device_class', 'eq', 'battery')
| rejectattr('entity_id', 'in', ignore_entities)
| map(attribute='state')
| reject('in', ['unknown', 'unavailable'])
| map('int', -1) | select('le', 30)
| select('ge', 0)
| list | count
}}
icon_template: >-
{% if is_state('sensor.devices_with_low_battery', '0') %}
mdi:battery-check
{% else %}
mdi:battery-alert
{% endif %}
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.devices_with_low_battery
state_not: '0'
chip:
type: template
entity: sensor.devices_with_low_battery
icon_color: red
icon: mdi:battery-alert
content: '{{ states(entity) }}'
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Low Batteries
content:
type: custom:auto-entities
filter:
include:
- attributes:
device_class: battery
state: < 30
options:
type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
icon: >
{% set battery_level = (states(entity) | int / 10) |
round(0) | int * 10 %} {% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-outline
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
layout: horizontal
tap_action:
action: none
badge_icon: |-
{% set battery_level = states(entity) | int %}
{% if battery_level < 10 %}
mdi:exclamation-thick
{% endif %}
badge_color: red
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude: null
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
37 Likes
Can i assume that you have the same kind for open window/doors and ligths on?
cool, is it ant other sources for working icons like that?
Hi,
first of all I am really impressed by this thread!
Until now I am only a “reader” of this channel and already found very helpful ideas for my HA dashboard.
Now I would like to modify the Mushroom Alarm Card with different icons and color code.
I already tried a lot with Card Mod but I don’t come to the preferred solution.
- The main icon (Mushroom State Icon?) shall be changed according to alarm status (with different icons)
- The icons for the 5 mushroom buttons (all alarm states are visible) shall be changed
- The color code shall be changed according to alarm status
- The size of each of the mushroom button icons shall be increased
The main question: How do I modify the Mushroom State Icon and the Mushroom Button Icons at the same time? I only managed to modify one of both.
Here is my current code that does not work properly:
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmsystem
states:
- armed_home
- armed_away
- armed_night
- armed_vacation
- armed_custom_bypass
layout: vertical
card_mod:
style:
mushroom-button:nth-child(5)$: |
ha-icon {
--card-mod-icon: mdi:shield-account-outline;
}
.: |
mushroom-shape-icon {
{% if states(config.entity) == "disarmed" %}
--card-mod-icon: mdi:shield-off;
{% elif states(config.entity) == "armed_away" %}
--card-mod-icon: mdi:shield-home;
{% elif states(config.entity) == "armed_home" %}
--card-mod-icon: mdi:shield-lock;
{% elif states(config.entity) == "armed_night" %}
--card-mod-icon: mdi:shield-moon;
{% elif states(config.entity) == "armed_vacation" %}
--card-mod-icon: mdi:shield-airplane;
{% elif states(config.entity) == "armed_custom_bypass" %}
--card-mod-icon: mdi:shield-account;
{% elif states(config.entity) == "triggered" %}
--card-mod-icon: mdi:shield-alert;
{% endif %}
}
Thank you very much in advance!
1 Like
That looks awesome. Do i add the sensor to my configuration.yaml or how does it exactly work? Thanks for all your help here 
1 Like
Is there a way to use mdi icons from this site? tried playing around with it but cant get it to work. That would be aweseome since u can configure the icons directly on the page.
Yes, add the sensor to your configuration.yaml.
did anybody create a Card for the Air Purifier using Mushroom Cards ?
I came up with such a card (when off nothing is visible) but I’m not 100% happy (trying to find a better place/better look for the chips)
any ideas, are much appreciated 
8 Likes
Emojipedia should have every Emoji for every OS listed.
If you want your Emoji to be consistent across platforms you could use the Google Noto Emoji font. Available in both color and monochrome.
Look at my previous post on using fonts in HA.
Yes, of course. Here are my Mushroom Popups for lights, windows and external doors.
Lights On Popup Yaml
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.all_lights
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') |
list | count }}
entity: group.all_lights
icon_color: grey
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lights On
content:
type: custom:auto-entities
filter:
include:
- group: group.all_lights
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
- entity_id: group.all_lights
state: 'on'
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-state-light), 0.1);
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
Windows Open Popup Yaml
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.all_windows
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:window-open
content: >-
{{ expand(states.group.all_windows) | selectattr( 'state', 'eq', 'on') |
list | count }}
entity: group.all_windows
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Windows Open
content:
type: custom:auto-entities
filter:
include:
- group: group.all_windows
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
External Doors Open Popup Yaml
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.external_doors
state: 'on'
chip:
type: template
entity: group.external_doors
icon_color: grey
icon: mdi:door-open
content: >-
{{ expand(states.group.external_doors) | selectattr( 'state', 'eq',
'on') | list | count }}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: External Doors Open
content:
type: custom:auto-entities
filter:
include:
- group: group.external_doors
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
I prefer to have my entities in groups. If you want to populate the popups purely dynamically, there are examples in this thread.
40 Likes
Browser-Mod 2 is still very new and works a bit differently to prior versions. The new behavior seems to remove any box-shadow by default. To add it back you can add the following CSS to the card:
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16);
}
type: custom:stack-in-card
mode: vertical
cards:
- square: false
columns: 1
type: grid
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: switch.nest
icon: mdi:speaker-wireless
icon_color: green
layout: vertical
primary: Ietm 1
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
}
:host {
--icon-size: 35px !important;
--card-primary-font-size: 9px !important;
--card-secondary-font-size: 9px!important;
}
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: switch.nest
icon: mdi:speaker-wireless
icon_color: green
layout: vertical
primary: Item 2
card_mod:
style: |
ha-card {
padding: 5px 0px 0px 0px !important;
}
:host {
--icon-size: 35px !important;
--card-primary-font-size: 9px !important;
--card-secondary-font-size: 9px!important;
}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background-color: rgba(var(--rgb-blue), 0.2);
width: px;
height: px;
}
Please guide how to change colour of the background for this card with opacity…
Thanks
Here is something fun. You can use an Emoji for the icon!
Mushroom Emoji Icon:
type: custom:mushroom-template-card
icon: none
icon_color: green
primary: Mushroom Emoji
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
font-size: 21px;
content: '🍄';
}
ha-icon {
width: 0px !important;
}
But can it be animated? Yes, yes it can.
Mushroom Animated Emoji Icon:
type: custom:mushroom-template-card
icon: none
icon_color: green
primary: Mushroom Emoji
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
font-size: 21px;
content: '🍄';
animation: boing 3s ease infinite;
transform-origin: 50% 90%;
}
ha-icon {
width: 0px !important;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
9 Likes
Change background-color: rgba(var(--rgb-blue), 0.2); to background-color: rgba(33, 150, 243, 0.2);. The --rgb-[color] variables can only be used within a Mushroom card, not a stack-in-card.
Unfortunately --card-mod-icon can be a bit fickle. I have found that it only really works reliably when used within the same selector. 