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.
How are folks getting the custom hamburger/menu icon button to work in the header? I can use it to open/close the menu, but when I turn on kiosk mode it stops working.
How do i manage to not put itin a conditional card so the cip is always displayed?
ive currently got something similar to your lights on yaml but without the nice layout which i would prefer.
type: custom:mushroom-chips-card
chips:
- type: template
icon: |
{% if is_state('light.alle_lichter', 'off') %}
mdi:lightbulb-multiple-off
{% else %}
mdi:lightbulb-multiple
{% endif %}
icon_color: |
{% if is_state('light.alle_lichter', 'off') %}
grey
{% else %}
yellow
{% endif %}
entity: light.alle_lichter
content: >-
{{ expand(states.light.alle_lichter) | selectattr( 'state', 'eq','on') |
list | count }}
card_mod: null
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lichter
content:
type: custom:auto-entities
filter:
include:
- group: light.alle_lichter
state: 'on'
exclude:
- domain: light
attributes:
types: browser_mod
- entity_id: light.this_screen
- entity_id: light.app_kevin_screen
- entity_id: light.ipad_air_3_screen
card:
type: entities
show_header_toggle: false
target: {}
1 Like
hello I have a question how did you get the 3 chip cards together I can’t get it together thanks in advance for the explanation