So, so cool!!! Thank you very much Dimitri. Worked right “out of the Box”. 
Ups, works with clicking on the icon, but on my ANDROID mobile, nothing happens… 
Not quite correct: If running HA from a browser it works, does not from the app. Ok, so this is a cool solution, but just not for the app!
Is there a way to add like a close button? Because this “just” pops up the map, without a “close” option.
Thanks again for your help!
Should work just fine on the Android or IOS apps. check the installation and setup instructions for Browser Mod just to make sure it is set up correctly.
When it comes closing the popup with browser mod not really a good way to do that. clicking outside of the popup or on android clicking the back button built into android itself closes the popup. but especially for IOS right now it is annoying as there is a bug where all popups come up in full screen so you cant even tap outside of it…
You are again correct. I closed the app and deleted the cache. Working on my mobile devices!!! 
Something like this:
you will likely need to play with the left: 44.5px value depending on your screen size. it is hard to make things universal when you are overlaying multiple cards (or in this case chips).
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:washing-machine
icon_color: orange
- type: template
icon: mdi:washing-machine
icon_color: orange
card_mod:
style: |
ha-card {
left: -44.5px;
top: 0px;
background: none !important;
border: none !important;
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
filter: drop-shadow(2px 2px 3px rgba(var(--rgb-black), 0.4));
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
mushroom-template-chip:nth-child(2)$: |
ha-state-icon {
animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
You have gotten rid of your stack in card before every one of your grid cards 
square: true
type: grid
cards:
- type: custom:stack-in-card
mode: vertical
square: false
cards:
- square: false
type: grid
columns: 2
cards:
So the above should be the start to every one of your individual cards. currently you only start with the grid. not the stack in card
What yours looks like:
square: true
type: grid
cards:
- square: false
type: grid
columns: 2
cards:
to sping only chip icon you may use mushroom-template-chip:nth-child(#)$
example:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:cookie
icon_color: brown
content: 1 Cookie
- type: template
icon: mdi:cookie
icon_color: brown
content: 2 Cookies
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
ha-state-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
Works like a charm.
Thank you so much.
Tnx, it works great!
How do I make all my cards to do a “push in” animation without editing the code manually for each card?
Hi,
I’m using a mushroom template card and instead of an mdi:icon I’m using a custom .PNG image.
How can I animate the image without animating the entire card when the Fan is on?
Off
On
This is the code of the card at the moment:
type: custom:mushroom-template-card
primary: Fan
secondary: |-
{% if states(config.entity)=='on' %}
On
{% else %}
Off
{% endif %}
icon: ''
icon_color: ''
entity: switch.fan
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
badge_color: ''
badge_icon: ''
picture: |-
{% if states(config.entity)=='on' %}
/local/Custom_Icons/TEST/v3/FAN_ON.png
{% else %}
/local/Custom_Icons/TEST/v3/FAN_OFF.png
{% endif %}
Thank you
Check out this post towards the bottom. and then look at the example on how to edit it in the theme instead 
This should do it if you have card-mod installed
type: custom:mushroom-template-card
primary: Fan
secondary: |-
{% if states(config.entity)=='on' %}
On
{% else %}
Off
{% endif %}
icon: ''
icon_color: ''
entity: switch.fan
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
badge_color: ''
badge_icon: ''
picture: |-
{% if states(config.entity)=='on' %}
/local/Custom_Icons/TEST/v3/FAN_ON.png
{% else %}
/local/Custom_Icons/TEST/v3/FAN_OFF.png
{% endif %}
card_mod:
style:
mushroom-shape-avatar$: |
img {
{% if states(config.entity)=='on' %}
animation: spin 2s linear infinite;
{% else %}
{% endif %}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Thank you for both the links to the animations and for providing the example code!
Hi,
Using the Climate mushroom card, I’d like to control my Daikin AC. It’s connected through KNX (with a Zennio Klic-DD interface) and it’s working mostly fine.
Only annoying thing is when I press the AC button (marked yellow), the AC always starts in HEATING mode. When I check ETS (config tool KNX), I see that HA sends an ON to the ON/OFF group address AND an ON to the MODE address. My interface interprets the ON (or 1) as HEATING, but I cannot change this.
As my AC is 95% in Cooling mode, I’d prefer to have this start up in cooling mode directly.
When I go in mode control in this card and I press the blue button, the AC starts up directly in cooling mode. The power button next to it only stops the AC. It doesn’t toggle ON/OFF.
Set up a script that does what you want it to do when you press the card. Then change the tap action to run your script instead.
Something like this:
type: custom:mushroom-climate-card
entity: climate.bedroom_heating
collapsible_controls: true
show_temperature_control: true
hvac_modes:
- heat
- cool
- 'off'
- auto
tap_action:
action: call-service
service: script.your_script_id_here
target: {}
The other buttons in mode control will work as they do now. But the “ac” button will now run your script instead of the default which is just to toggle the entity specified.
This is amazing work.
I’ve tried to implement it today and got pretty far, but unfortunately the popup just seems to be slightly too small resulting in both horizontal and vertical scroll bars. It also looks like the avatar icon is a lot bigger than in your screenshot.
Any ideas?
post your yaml!
Oops… 
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.robert
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Robert
content:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: person.robert
layout: horizontal
icon_type: entity-picture
primary_info: state
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
/* Style shadow ring around person avatar */
box-shadow: 0px 0px 4px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 12px);
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
/* Increase icon size */
--icon-size: 72px;
/* Center card */
margin: auto;
width: fit-content;
/* Add padding to bottom of card */
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
transition: all 0s;
}
:host {
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
/* Set Person State color */
--state-person:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
/* Match styling to Mushroom Title */
--mush-card-primary-font-size: var(--mush-title-font-size, 24px);
--mush-card-primary-font-weight: var(--mush-title-font-weight, normal);
--mush-card-primary-line-height: var(--ush-title-line-height, 1.2);
--mush-card-secondary-font-size: var(--mush-title-font-size, 16px);
--mush-card-secondary-font-weight: var(--mush-title-font-weight, normal);
--mush-card-secondary-line-height: var(--ush-title-line-height, 1.2);
}
- type: history-graph
entities:
- entity: person.robert
name: ' '
hours_to_show: 24
title: Timeline
card_mod:
style:
$: |
.card-header {
/* Style timeline title */
padding: 0px 24px !important;
font-size: var(--mush-card-primary-font-size, 14px) !important;
font-weight: var(--mush-card-primary-font-weight, bold) !important;
line-height: var(--mush-card-primary-line-height, 1.5) !important;
color: var(--primary-text-color) !important;
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-box-shadow: none;
--ha-card-background: none;
--ha-card-border-width: 0;
user-select: none;
}
.content {
/* Add padding on right */
padding: 0px 24px !important;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: sensor.robert_travel_time_to_home
state_not: unknown
card:
type: custom:mushroom-template-card
primary: >-
{{ states(entity) }} {{ state_attr(entity,
'unit_of_measurement') }}
secondary: '{{ state_attr(entity, ''distance'') | round(1) }} km'
icon: mdi:map-marker-path
entity: sensor.robert_travel_time_to_home
layout: vertical
icon_color: purple
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.primary:after {
/* Add destination details */
content: "\Ato Home";
white-space: pre;
text-overflow: ellipsis;
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Center card on row */
width: fit-content;
margin: auto;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: sensor.robert_travel_time_to_work
state_not: unknown
card:
type: custom:mushroom-template-card
primary: >-
{{ states(entity) }} {{ state_attr(entity,
'unit_of_measurement') }}
secondary: '{{ state_attr(entity, ''distance'') | round(1) }} km'
icon: mdi:map-marker-path
entity: sensor.robert_travel_time_to_work
layout: vertical
icon_color: purple
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.primary:after {
/* Add destination details */
content: "\Ato Work";
white-space: pre;
text-overflow: ellipsis;
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Center card on row */
width: fit-content;
margin: auto;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: >
{{ 'charging' if
is_state('binary_sensor.robert_phone_is_charging', 'on' )
else 'discharging' }}
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-alert-variant-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 %}
entity: sensor.robert_phone_battery_level
layout: vertical
badge_icon: >-
{% if is_state('binary_sensor.robert_phone_is_charging',
'on') %}
mdi:lightning-bolt
{% elif states(entity) | int < 10 %}
mdi:exclamation-thick
{% endif %}
badge_color: '{{ ''red'' if states(entity) | int < 10 else ''light-blue'' }}'
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
/* Radial progress bar */
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%,
var(--card-background-color) 0% 100%);
}
.shape:after {
/* Add back icon shape */
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: var(--shape-color);
}
ha-icon {
/* Icon charging animation */
{{ '--icon-animation: charge 3s linear infinite;' if is_state('binary_sensor.robert_phone_is_charging', 'on') }}
}
@keyframes charge {
0%, 80% { clip-path: inset(0 0 0 0); }
10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Center card on row */
width: fit-content;
margin: auto;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
- type: conditional
conditions:
- entity: sensor.robert_phone_wifi_connection
state_not: <not connected>
card:
type: custom:mushroom-template-card
primary: '{{ states(''sensor.robert_phone_wifi_connection'') }}'
secondary: >-
{% set signal_level = states(entity) | int %} {% if
signal_level != -1 %}
{{ signal_level }} dBm
{% endif %}
icon: >-
{% set signal_level = states(entity) | int | abs %} {%
if signal_level > 90 %}
mdi:wifi-strength-outline
{% elif signal_level > 80 %}
mdi:wifi-strength-1
{% elif signal_level > 70 %}
mdi:wifi-strength-2
{% elif signal_level > 60 %}
mdi:wifi-strength-3
{% elif signal_level > 1 %}
mdi:wifi-strength-4
{% else %}
mdi:wifi-strength-off
{% endif %}
entity: sensor.robert_phone_wifi_signal_strength
layout: vertical
fill_container: false
icon_color: cyan
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Center card on row */
width: fit-content;
margin: auto;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: none;
hold_action:
action: call-service
service: notify.mobile_app_sm_s916b_robert
data:
message: Ringing phone...
title: Find Phone
data:
ttl: 0
importance: high
priority: high
tag: Find
channel: alarm_stream
icon: mdi:target
icon_color: red
content: Find Phone
alignment: center
card_mod:
style: |
ha-card {
/* Style Chip like Mushroom button */
--chip-background: rgba(var(--rgb-red), 0.2);
--chip-border-radius: var(--mush-control-border-radius, 12px);
--chip-height: var(--mush-control-height, 42px);
--chip-box-shadow: none;
user-select: none;
}
ha-card:active {
/* Add effect to give feedback on button press */
--chip-background: rgba(var(--rgb-red), 0.4);
}
- type: map
entities:
- entity: person.robert
dark_mode: false
hours_to_show: 24
aspect_ratio: '4:3'
card_mod:
style:
ha-map $ ha-entity-marker $: |
.marker {
/* Style person marker & adjust position to avoid blocking waypoints */
border: 3px solid var(--state-person) !important;
border-radius: 50% 50% 50% 0px !important;
transform: rotate(-45deg) translate(50%, -50%);
overflow: visible !important;
background: var(--state-person) !important;
}
.entity-picture {
/* Correct orientation of person avatar */
transform: rotate(45deg);
border-radius: 50%;
}
ha-map $: |
path:first-child {
/* Style accuracy radius */
stroke: var(--state-person);
fill: color-mix(in srgb, var(--state-person) 50%, transparent);
stroke-width: 0px;
}
path:nth-child(even) {
/* Styling for waypoints */
stroke: var(--purple-color);
stroke-width: 4px;
}
path:nth-child(odd):not(:first-child) {
/* Styling for lines */
stroke: var(--purple-color);
stroke-width: 4px;
}
.leaflet-control-attribution {
/* Style attribution text */
background: rgba(var(--rgb-card-background-color), 0.4) !important;
font-size: 10px;
}
.leaflet-container a {
/* Set color of zoom icons & attribution text */
color: var(--secondary-text-color);
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
/* Style zoom buttons like Chips */
border-radius: var(--mush-chip-border-radius, 19px) !important;
padding: 3px;
background: rgb(var(--rgb-secondary-text-color), 0.2) !important;
margin: 8px 12px 0px;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
.leaflet-top {
/* Move zoom buttons to bottom of map */
bottom: 0px !important;
}
.leaflet-control-zoom {
/* Allow buttons to be moved */
position: absolute !important;
/* Adjust spacing for border */
bottom: calc(2 * var(--ha-card-border-width, 1px) + 56px);
/* Remove extra margin */
margin: 0px !important;
/* Remove zoom control border */
border: none !important;
}
.leaflet-container:after {
/* Fade out map at top */
content: "";
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to top, transparent 65%, var(--card-background-color));
}
ha-icon-button $ mwc-icon-button $: |
button {
/* Size center button to match Chip */
height: var(--mush-chip-height, 36px) !important;
width: var(--mush-chip-height, 36px) !important;
--mdc-icon-size: 22px;
}
.: |
ha-card {
/* Remove default card styling without affecting child elements */
box-shadow: none;
border-width: 0;
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
transition: all 0s;
}
:host {
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
/* Set person state color */
--state-person:
{% if is_state(config.entities[0].entity, ['home', 'not_home', 'unknown']) %}
var(--state-person-{{ states(config.entities[0].entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
ha-icon-button {
/* Position center button */
bottom: 12px;
left: 12px !important;
top: auto !important;
/* Style center button to match Chip */
color: var(--deep-orange-color) !important;
background: color-mix(in srgb, var(--deep-orange-color) 20%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
card_mod:
style: |
:host {
/* Remove border from popup */
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--popup-min-width: 450px;
}
.content {
/* Remove extra bottom border */
margin: -18px -24px -24px !important;
}
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
Ill take a look when i get home from work later today. But my first thought is that it is likely caused by the fact that popups are a bit bugged in browser mod at the moment.
Thank you!
I didn’t make much changes to the original code so that would certainly make sense.
But I do not think that would explain the larger size of the avatar in the top.