Thanks, deprecated code has been removed.
My custom-ui is current: Custom-ui: 20210528 adapted for HA 2021.6 +
It’s installed via HACS where I keep everything current and up to date.
I have custom:badge-card but have never used it , yet…
Does anyone have issue like this?
Shoving an icon above picture. There was only picture and no way to set icon in People settings.
I appeared like this after latest update.
Change of the picture show same result, and it is like this on all devices, even on the ones newr used HA in the past.
2 Likes
The same here after the last update tp 2021.10.1.
Same here … any docs about this changes???
The same here after the last update tp 2021.10.1.
since last update
it seems they draw the default icon on top of the picture :
Same problem over here.
Waiting for a fix in 2021.10.3 
1 Like
Fixed in 2021.10.3 as expected ! 
I had this in another thread, but unanswered. How to delete a picture in UI? Even if I remove and save, it still remains. Replacing yes, deleting no.
Clear your cache after you delete
Sure? Here it doesn’t help. The deletion itself seems not to be stored in the config. It is still in the file. Delete-Update doesn’t make anything. Because of this my question, if I’m doing something wrong.
I have 2 HA which are a bit similar.
On the first one I have no problem with the badges size, colors and zone displayed.
When I’m in the home zone, the badge is green, purple when I’m away and orange when I’m in another zone.
But on my second HA, the badges stay all the time orange and I cannot resize them. If I’m in the home zone, it stays orange, if I’m away, still orange. The zone names are displayed but badges are quite small and they don’t resize.
Both HA are using the same codes:
views:
- title: Maison
path: maison
icon: mdi:home
badges:
- entity: person.david
name: David
style: |
:host {
{% if is_state('person.david','not_home') %}
--label-badge-red: purple;
--ha-label-badge-size: 100px;
{% endif%}
{% if is_state('person.david','home') %}
--label-badge-red: green;
--ha-label-badge-size: 100px;
{% endif%}
}
- entity: person.sebastien
name: Sébastien
style: |
:host {
{% if is_state('person.sebastien','not_home') %}
--label-badge-red: purple;
--ha-label-badge-size: 100px;
{% endif%}
{% if is_state('person.sebastien','home') %}
--label-badge-red: green;
--ha-label-badge-size: 100px;
{% endif%}
}
I can’t find what is wrong.
1 Like
Hello Forum!
I want to ask you, how can I change, based on the battery status of my mobile phone or tablet the color of my badge?
I tried several things but always without any success.
One try from a post from this forum:
- entity: sensor.andys_iphone_battery_level
icon: null
name: null
style: |
:host {
--label-badge-red:
{% if states(config.entity)|int < 30 %}
#e45649
{% elif states(config.entity)|int < 70 %}
#ffc640
{% elif states(config.entity)|int <= 100 %}
#50A14F
{% endif %}
;
type or paste code here
Thank you!
Br
The only way to adjust colors is through a theme or the custom card called “card mod”. The code you have there would only work in card mod.
Card mod is already installed.
I used it with some other badges where i was able to change the color.
But i’m not able to change the colors based on battery status of my mobile phone.
Any futher hints?
THX.
Any hints for me? 
Sorry, I don’t use badges. You’ll have to use chrome developer tools and figure out the selector and properties yourself.
EDIT: You can also cruise the card-mod thread and see if someone else has done this before.
here you go:
# https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/1941?u=mariusthvdb
- entity: sensor.state_badge
card_mod:
style:
<<: &exist
.: |
:host {
{% if states(config.entity) == 'unknown' %} display: none {% endif %}
}
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container
/* Top circle of the Badge (State) */
.label-badge {
border-style: dashed;
border-color: blue;
color: grey;
background-color: yellow;
}
/* Label of the Badge (Unit) */
.label-badge .label span {
border-style: dotted;
border-color: pink;
color: red;
background-color: green;
}
/* Below the Badge (Name) */
.title {
color: orange;
}
or, a bit more compressed, what I use for my person badges:
type: custom:auto-entities
card:
type: custom:badge-card
filter:
include:
- domain: person
options:
card_mod:
style: |
:host {
--ha-label-badge-label-color: black;
{% set zones = states.zone|map(attribute='name')|list %}
{% set id = config.entity.split('.')[1] %}
{% set activity = states('sensor.' ~ id ~ '_app_activity') %}
{% set cc = state_attr('sensor.' ~ id ~ '_app_geocoded_location','ISO Country Code')|lower %}
{% if cc and cc != 'nl' %}
--label-badge-red: white;
{% elif is_state(config.entity,'home') %}
--label-badge-red: green;
--ha-label-badge-label-color: gold;
{% elif 'bij' in states(config.entity) %}
--label-badge-red: gold;
{% elif activity in ['Automotive','Cycling','Walking'] or
states(config.entity) in zones %}
--label-badge-red: mediumslateblue
{% else %}
--label-badge-red: #636B75;
{% endif %}
}
1 Like