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. 
Thank you very much… 
1 Like
The mdi: icons on Iconify are the same set (Material Design Icons) that we currently use in HA. For instance, here is the one you linked to Material Design Icons.
There may be other sets that are available through HACS integrations, such as the Fontawsome ones.
This might sound stupid…
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: yellow
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
- type: custom:mushroom-template-card
entity: switch.nest
icon: mdi:speaker-wireless
icon_color: cyan
layout: vertical
primary: Item 3
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(33, 150, 109, 0.05);
width: px;
height: px;
}
planning to use change icon colors for ITEM-1, ITEM-2 and ITEM-3 on some specific conditions
card_mod:
style: |
ha-card {
background-color: rgba({{r}}, {{g}}, {{b}}, 0.05);
width: px;
height: px;
}
is there a possibility to take r,g,b values from item-1, item-2, item-3 icon colour respectively and then apply r value from item-1, g from item-2, b from item3 and use these in background-color: rgba({{r}}, {{g}}, {{b}}, 0.05);
I don’t know if I am making any sense.
Should be able to set the background colour using different items like this
background: rgba({{ state_attr('light.item_1','rgb_color') [0] }},
{{ state_attr('light.item_2','rgb_color') [1] }},
{{ state_attr('light.item_3','rgb_color') [2] }},0.1);
thank you for the code, it worked… but what if I want the R G B values from the icon color of item-1, item-2 and item-3 ?
Thank you for this info!
Is there any other option to modify the icons of the Mushroom Alarm Card?
I’m wondering if it’s possible to remove the border arround a template card, I just want to have it flush with my background color.
This is the code for the first 2 rooms, I’m not sure if it’s even an options or if I need to adapt the css.
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:countertop
tap_action:
action: navigate
navigation_path: keuken
layout: vertical
secondary: Keuken
icon_color: red
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.1);
width: 65px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- type: custom:mushroom-template-card
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: woonkamer
layout: vertical
secondary: Woonkamer
icon_color: blue
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.1);
width: 65px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
Can someone point me in the right direction regarding the more_info popups?
I have installed browser_mod 2 and followed the instruction on github.
But i do not understand where to change the look on the popup windows?
Yeah, for the dashboard, but the sensor templates are in the config, which I am curious about.