Sorry, I am confused. I wanted the person card as in the following pictures:
Maybe you have imbedded in the input_boolean.notififiche.
Thank you again 
1 Like
The location sensor only refreshes at 4 AM, after that it should work. All three template sensors should be added to configuration.yaml.
Not sure what you mean
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.pupetti
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Rhys
content:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: person.pupetti
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.pupetti
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.fede_l_16_average_active_pace_3
state_not: '0'
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.fede_l_16_distance_3
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.fede_l_16_geocoded_location_3
state_not: '0'
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.fede_l_16_distance_3
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('sensor.fede_l_16_battery_state', '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.fede_l_16_battery_level_3
layout: vertical
badge_icon: >-
{% if is_state('sensor.fede_l_16_battery_state_3', '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.rhys_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.fede_l_16_connection_type_3
state_not: <not connected>
card:
type: custom:mushroom-template-card
primary: '{{ states(''sensor.fede_l_16_connection_type_3'') }}'
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.fede_l_16_connection_type
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_fede_l_16
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.pupetti
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 poup */
--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;
}
sorry i did not understand before, anyway remember to click on the card so you can see my modify…
1 Like
@hiddevanbrussel in the meantime, set the location sensor manually to state: city
then at 4 AM it will refresh again.
Okay, I tried numerous configs of code.
But I cant get this: 
To be transparent like this:
I used this code… It works for the weather, but not for the chips. What am I doing wrong?
- type: custom:weather-card
style: |
ha-card {background: transparent;
border-style: none;
border: 0px;
box-shadow: none;
background: rgba(50,50,50,0.3);}
entity: weather.forecast_home
- type: horizontal-stack
entity: person.amy
cards:
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.living_room_2
use_light_color: true
name: Living
content_info: name
style: |
ha-card {
background-color: transparent;
box-shadow: none;
}
Thank for the tip. It works.
have a look at the guide in my profile. but essentially you need to target each chip. each chip is basically its own card.
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.bedroom_temperature_humidity_temperature
icon_color: |-
{% if is_state('climate.master_bedroom', 'heat') %}
orange
{% else %}
blue
{% endif %}
card_mod:
style: |
ha-card {
background: none !important;
}
- type: template
icon: mdi:thermometer
card_mod:
style: |
ha-card {
background: none !important;
}
you can also do it globally for the chip card by changing the variable color instead:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.bedroom_temperature_humidity_temperature
icon_color: |-
{% if is_state('climate.master_bedroom', 'heat') %}
orange
{% else %}
blue
{% endif %}
- type: template
icon: mdi:thermometer
card_mod:
style: |
ha-card {
--chip-background: none !important;
}
Please do learn how to format your code. When you have blocks of code like i have above, put it on its own line and only then press the code block button. That is different from inline code which you have used. 
Difference between using:
code
And code
1 Like
maybe a better question for the main card mod topic as you arent modifying the mushroom card, but are trying to make the more info dialog look like mushroom using card mod.
but my 2 cents. i wouldnt bother trying to modify the more-info dialog unless you absolutely have no other option. i would just make a new card with mushroom elements and maybe a mini graph or apex graph and put them in a browser mod popup instead.
1 Like
could be that their z-index is not correct? so try and maybe set their z-index to 1 like this and maybe you can then press them?
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
z-index: 1;
}
1 Like
I know its been a while since you posted this but can you share the code for the sensors that you created:
'sensor.basement_air_filter_life_remaining'
'sensor.basement_ac_filter_install_date_color'
thanks
Thanks, it works now!
- type: custom:mushroom-template-card
primary: Koelkast
secondary: {{ iif(is_state('binary_sensor.deursensor_koelkast_contact', 'on'), 'Open', 'Gesloten') }}
icon: |-
{{ iif(is_state('binary_sensor.deursensor_koelkast_contact', 'on'), 'mdi:fridge-alert', 'mdi:fridge') }}
icon_color: |-
{{ iif(is_state('binary_sensor.deursensor_koelkast_contact', 'on'), 'yellow', '[86,86,86]') }}
layout: horizontal
tap_action:
action: none
entity: binary_sensor.deursensor_koelkast_contact
I have an error “missed comma between flow collection entries”. Where did I make a mistake ?
missing internal and external quotes if you are putting it on the same line as secondary:
type: custom:mushroom-template-card
primary: Koelkast
secondary: '{{ iif(is_state(''binary_sensor.deursensor_koelkast_contact'', ''on''), ''Open'', ''Gesloten'') }}'
icon: |-
{{ iif(is_state('binary_sensor.deursensor_koelkast_contact', 'on'), 'mdi:fridge-alert', 'mdi:fridge') }}
icon_color: |-
{{ iif(is_state('binary_sensor.deursensor_koelkast_contact', 'on'), 'yellow', '[86,86,86]') }}
layout: horizontal
tap_action:
action: none
entity: binary_sensor.deursensor_koelkast_contact
you could also do it like you did the rest with no extra quotes needed.
type: custom:mushroom-template-card
primary: Koelkast
secondary: |-
{{ iif(is_state('binary_sensor.deursensor_koelkast_contact', 'on'), 'Open', 'Gesloten') }}
icon: |-
{{ iif(is_state('binary_sensor.deursensor_koelkast_contact', 'on'), 'mdi:fridge-alert', 'mdi:fridge') }}
icon_color: |-
{{ iif(is_state('binary_sensor.deursensor_koelkast_contact', 'on'), 'yellow', '[86,86,86]') }}
layout: horizontal
tap_action:
action: none
entity: binary_sensor.deursensor_koelkast_contact
1 Like
oh, wow. Thanks. I do it like the second way. it looks cleaner. Thanks
Try padding-bottom: 1px rather than margin-bottom.
This looks really amazing, any idea how to remove the light grey square ?
// FOUND IT:
Adding this under line 393:
border: none !important;
box-shadow: none !important;
starting from line 371:
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-icon-border-radius: 50%;
--mush-icon-size: 72px;
border: none !important;
box-shadow: none !important;
--primary-text-color: {% set state=states('sensor.p1_net_electricity_point') %} {% if state | is_number
and state | float > 0 %}
#f77c7c
{% elif state | is_number and state | float < 0 %}
#32CD32
{% else %}
black
{% endif %};
}
ha-card {
background: transparent;
margin-top: -112px;
width: 120px;
margin-left: auto;
margin-right: auto;
border: none !important;
box-shadow: none !important;
}
regards
1 Like
this should also work.
type: custom:mushroom-template-card
primary: Koelkast
secondary: "{{ iif(is_state('binary_sensor.deursensor_koelkast_contact', 'on'), 'Open', 'Gesloten') }}"
icon: "{{ iif(is_state('binary_sensor.deursensor_koelkast_contact', 'on'), 'mdi:fridge-alert', 'mdi:fridge') }}"
icon_color: "{{ iif(is_state('binary_sensor.deursensor_koelkast_contact', 'on'), 'yellow', '[86,86,86]') }}"
layout: horizontal
tap_action:
action: none
entity: binary_sensor.deursensor_koelkast_contact
yes, that is also allowed. i just have a thing about mixing quotes. probably only an issue for me 
thanks guys