Thank you for your improvment 
.
I will add it also into my cards.
Unfortunatelly I can not see the attribute premises, maybe because I am using an iPhone?
But for me the attributes Name, Postal Code and Sub Locality worked quit well.
Hello again , how can I change color text or opacity?
on computer is text barely visible.
I think its the 0.5 in line 8.
background-color: rgba(var(--rgb-card-background-color), 0.5);
that’s for background color and opacity.
Oh so I misunderstood your question.
In my opinion it makes more sense to change the opacity of the background image than the text color opacity.
And also I don’t know how to change the text opacity, sorry.
But you can maybe change the the map style.
Please see the Geoapify Docs for more infos.
Currently I use osm-bright.
Simply change this to a darker style e.g. dark-matter-yellow-roads if you are using a bright text color.
One more improvment from my side:
It is also possible to change the color or icon of the map marker depending on your location.
Simply change the background url for this:
background: url('https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=600&height=230¢er=lonlat:{{ state_attr('device_tracker.MY_IPHONE', 'longitude') }},{{ state_attr('device_tracker.MY_IPHONE', 'latitude') }}&zoom=14.0&marker=lonlat:{{ state_attr('device_tracker.MY_IPHONE', 'longitude') }},{{ state_attr('device_tracker.MY_IPHONE', 'latitude') }};type:material;{{ iif(is_state('person.MY_PERSON', 'home'), 'color:green;icon:home;', iif(is_state('person.MY_PERSON', 'MY_WORK'), 'color:blue;icon:building;', 'color:red;')) }}icontype:awesome&scaleFactor=2&apiKey=YOUR_API_KEY');
it wont work for me…whats my fault?
type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: url('https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=600&height=230¢er=lonlat:{{ state_attr('device_tracker.s24_ultra_marko', 'longitude') }},{{ state_attr('device_tracker.s24_ultra_marko', 'latitude') }}&zoom=14.0&marker=lonlat:{{ state_attr('device_tracker.s24_ultra_marko', 'longitude') }},{{ state_attr('device_tracker.s24_ultra_marko', 'latitude') }};type:material;color:%23ff3421;icontype:awesome&scaleFactor=2&apiKey=);
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.5);
}
cards:
- type: custom:mushroom-template-card
entity: person.marko
primary: MY_PERSON
secondary: >-
{{ iif(states(entity) == 'not_home', 'away', states(entity)) | title }} |
{{ states('sensor.MY_IPHONE_geocoded_location') }}
picture: '{{ state_attr(entity, ''entity_picture'') }}'
badge_icon: >-
{% set zone = iif(states(entity) == 'not_home', 'away', states(entity)) %}
{%- if 'home' in zone.lower() -%}
mdi:home
{%- elif zone == 'MY_WORK' -%}
mdi:office-building
{%- else -%}
mdi:home-export-outline
{%- endif -%}
badge_color: >-
{% set zone = iif(states(entity) == 'not_home', 'away', states(entity))
%} {%- if 'home' in zone.lower() -%}
green
{%- elif zone == 'MY_WORK' -%}
blue
{%- else -%}
red
{%- endif -%}
fill_container: true
multiline_secondary: false
layout: horizontal
tap_action:
action: more-info
card_mod:
style: |
:host {
height: 70px;
--mush-icon-size: 60px;
--secondary-text-color: var(--primary-text-color);
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.MY_IPHONE_steps
- type: entity
entity: sensor.MY_IPHONE_battery_state
card_mod:
style: |
ha-card {
--chip-box-shadow: 0px 0px 0px 0px;
--chip-background: none;
}
Thank you for this card. I modify mine a little bit using your suggestion about background
My code:
type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
# background: none !important;
--vertical-stack-card-gap: 10px;
background: url('https://maps.geoapify.com/v1/staticmap?style=dark-matter-yellow-roads&width=600&height=230¢er=lonlat:{{ state_attr('device_tracker.sm_s918u', 'longitude') }},{{ state_attr('device_tracker.sm_s918u', 'latitude') }}&zoom=14.0&marker=lonlat:{{ state_attr('device_tracker.sm_s918u', 'longitude') }},{{ state_attr('device_tracker.sm_s918u', 'latitude') }};type:material;color:%23ff3421;icontype:awesome&scaleFactor=2&apiKey=API KEY');
background-size: 135%;
}
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:mushroom-person-card
name: Yevgeniy
entity: person.yevgeniy
layout: vertical
icon_type: entity-picture
primary_info: state
secondary_info: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
border: none !important;
background: none !important;
margin-left: -50px !important;
}
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-left: -55px !important;
}
cards:
- type: custom:mushroom-template-card
primary: >-
{%- if is_state('sensor.sm_s918u_battery_state', 'charging') %}
Charging 🔌
{%- elif is_state('sensor.sm_s918u_battery_state', 'discharging')
%}
Discharging 🙃
{% else %}
Full 💯
{% endif %}
secondary: Battery {{ states('sensor.sm_s918u_battery_level') }}%
entity: sensor.sm_s918u_battery_state
icon: |2
{% set bl = states('sensor.sm_s918u_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_s918u_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
justify-content: center;
--chip-icon-size: 24px;
--chip-height: 54px;
--chip-with:
width: var(--chip-height) !important;
border-radius: 50% !important;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
font-size: 30px !important;
}
entity: sensor.sm_s918u_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-left: -23px !important;
}
alignment: center
1 Like
check this part of url line
Thank you for compliment 
Problem is that’s another map. I want the original but dark one as elVit and supperka shows in their posts. Not sure where i fail, i copied the same code as in the first post 
Try to change font color and opacity
1 Like
Nice! for the step info, does the iphone have to be on the same network as Home-assistant? or can it pull it from the cloud
Awesome looking card!
Unfortunately I don’t see the possibility to create an API on the website of Geoapify (via <Geoapify / My Projects> ).
Hopefully their support can help me out, so I can create this great Person Card!
Maybe this will help you:
text-shadow: 0px 0px 5px white;
Add this code simply in the ha-card context where the background image is set.
For alternative configurations of text-shadow see this link.
1 Like
Hello !
Thanks for sharing this amazing view 
Also I have 2 questions 
First : As I’m using a white dashboard, I can see line that separate first column of the second one
First is logo of the person with Zone | Geocoded location where the second one is custom:mushroom-chips-card
Could you tell me how to delete these line ?
Also, How can I get a higher view of the card ? I don’t really know how to expand high of it.
Thanks !
Hi,
I can also see some lines but only while the card is loading. Then they are gone. I think the card_mod part should remove these lines.
Maybe you have a custom theme which adds these lines back? Or your card_mod plugin is maybe not working?
And to make this card bigger I simply added an empty markdown card like so:
- type: custom:mushroom-template-card
…
- type: markdown
content: ' '
card_mod:
style: |
:host {
height: 40px;
}
- type: custom:mushroom-chips-card
…
This is really great, thank you.
One question: I copied your code & input my data, everything works except the badge doesn’t update depending on location. It only shows the mdi:home-export-outline and is red all the time. What might be causing this?
type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: url('https://maps.geoapify.com/v1/staticmap?style=dark-matter-purple-roads&width=600&height=240¢er=lonlat:{{ state_attr('device_tracker.pixel_8_pro_g', 'longitude') }},{{ state_attr('device_tracker.pixel_8_pro_g', 'latitude') }}&zoom=14.0&marker=lonlat:{{ state_attr('device_tracker.pixel_8_pro_g', 'longitude') }},{{ state_attr('device_tracker.pixel_8_pro_g', 'latitude') }};type:material;color:%23ff3421;icontype:awesome&scaleFactor=2&apiKey=################');
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.5);
}
cards:
- type: custom:mushroom-template-card
entity: person.giuseppebaldi
primary: Giuseppe
secondary: >-
{{ iif(states(entity) == 'not_home', 'away', states(entity)) | title }} |
{{ states('sensor.pixel_8_pro_g_geocoded_location') }}
picture: "{{ state_attr(entity, 'entity_picture') }}"
badge_icon: >-
{% set zone = iif(states(entity) == 'not_home', 'away', states(entity)) %}
{%- if 'home' in zone.lower() -%}
mdi:home
{%- elif zone == 'zone.work' -%}
mdi:office-building
{%- else -%}
mdi:home-export-outline
{%- endif -%}
badge_color: >-
{% set zone = iif(states(entity) == 'not_home', 'away', states(entity))
%} {%- if 'home' in zone.lower() -%}
green
{%- elif zone == 'zone.work' -%}
blue
{%- else -%}
red
{%- endif -%}
fill_container: true
multiline_secondary: false
layout: horizontal
tap_action:
action: more-info
card_mod:
style: |
:host {
height: 70px;
--mush-icon-size: 75px;
--primary-text-color: #e0e0e0;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.pixel_8_pro_g_battery_level
- type: entity
entity: sensor.pixel_8_pro_g_battery_state
card_mod:
style: |
ha-card {
--chip-box-shadow: 0px 0px 0px 0px;
--chip-background: none;
--color: #D3D3D3;
--primary-text-color: #e0e0e0;
}
Was at work while I was working on this or probably would’ve caught it sooner, but there appears to be an issue with the {%- elif zone == ‘zone.work’ -%} line, changing it to {%- if ‘work’ in zone.lower() -%} fixed the issue but I’m not knowledgeable enough to know why, what it means or if this will cause a problem later. But thought I’d share.
My take on this one… Thank you for the card… it’s awesome!!!
Normal:
Charging:
Still needs a few tweaks… like to make the avatar bigger… and not sure why I can’t get the background on the charging transparent but all-in-all pretty good tweaks to a really good card!!
Thank you!
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
# background: none !important;
--vertical-stack-card-gap: 10px;
background: url('https://maps.geoapify.com/v1/staticmap?style=dark-matter-yellow-roads&width=600&height=230¢er=lonlat:{{ state_attr('device_tracker.john_s_fold_6', 'longitude') }},{{ state_attr('device_tracker.john_s_fold_6', 'latitude') }}&zoom=14.0&marker=lonlat:{{ state_attr('device_tracker.john_s_fold_6', 'longitude') }},{{ state_attr('device_tracker.john_s_fold_6', 'latitude') }};type:material;color:%23ff3421;icontype:awesome&scaleFactor=2&apiKey=YOUR_API_KEY');
background-size: 105%;
}
cards:
- type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
}
cards:
- type: custom:mushroom-person-card
name: John
entity: person.john
layout: vertical
icon_type: entity-picture
hide_name: true
hide_state: true
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
height: 175px !important;
border: none !important;
background: none !important;
margin-left: -50px !important;
}
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
border: none !important;
background: none !important;
margin-left: -55px !important;
}
cards:
- type: conditional
card_mod:
style: |
ha-card {
border: 1 !important;
}
conditions:
- entity: sensor.sm_f956u1_battery_state
state: "charging"
card:
type: custom:mushroom-template-card
entity: sensor.sm_f956u1_battery_level
layout: vertical
icon_color: yellow
fill_container: true
name: Fold6
icon: mdi:battery-charging-medium
hide_name: true
primary: "Charging..."
secondary: "Battery Level: {{ states('sensor.sm_f956u1_battery_level') }}%"
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
border: 0 !important;
--card-primary-font-size: 20px !important;
--card-secondary-font-size: 18px;
--background: transparent !important;
}
tap_action:
action: more-info
- type: conditional
conditions:
- entity: sensor.sm_f956u1_battery_state
state: "full"
card:
type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0 !important;
--card-primary-font-size: 20px !important;
--card-secondary-font-size: 18px;
background: none !important;
}
entity: sensor.sm_f956u1_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.sm_f956u1_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_f956u1_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} #ffac1c
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: "Battery Level: {{ states('sensor.sm_f956u1_battery_level') }}%"
secondary: "Battery Temp: {{ states('sensor.sm_f956u1_battery_temperature') | round }}°"
tap_action:
action: more-info
fill_container: true
- type: conditional
card_mod:
style: |
ha-card {
border: 0 !important;
--card-primary-font-size: 20px !important;
--card-secondary-font-size: 18px;
background: none !important;
}
conditions:
- entity: sensor.sm_f956u1_battery_state
state: "discharging"
card:
type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
border: 0 !important;
--card-primary-font-size: 20px !important;
--card-secondary-font-size: 18px;
background: none !important;
}
entity: sensor.sm_f956u1_battery_level
layout: vertical
icon: |2
{% set bl = states('sensor.sm_f956u1_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_f956u1_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} #ffac1c
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: "Battery Level: {{ states('sensor.sm_f956u1_battery_level') }}%"
secondary: "Battery Temp: {{ states('sensor.sm_f956u1_battery_temperature') | round }}°"
tap_action:
action: more-info
fill_container: true
styles:
card:
height: 66px;
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
card_mod:
style: |
ha-card {
border: 0 !important;
background: none !important;
font-size: 0px !important;
--chip-height: 34px;
}
entity: sensor.sm_f956u1_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: 0 !important;
background: transparent !important;
margin-left: -53px !important;
}
alignment: center