You may not be happy with my solution, but I solved the same problem with mushroom using image instead icon and different images saved in HA’s “www” folder (each image has different border color) like so:
{% if states('person.myprecious')=='home' %}
/local/bgreen.png
{% elif states('person.myprecious')=='not_home' %}
/local/bred.png
{% else %}
/local/byellow.png
{% endif %}
Example of bred.png
Thank you, this is what i was thinking as well… Just wanted to see if anyone out there had any other suggestions. I will prob implement this though
Hi Romain,
can you give me the full syntax for a badge configuration in yaml-mode, please?
My old ones are of this syntax:
- entity: sensor.pool
name: Pool
display_type: complete
state_content: state
color: red
icon: mdi:thermometer
card_mod:
style: |
:host {
--label-badge-red: orange;
I don´t know how to start under badges…
I managed it myself… 
views:
- badges:
- type: custom:mushroom-template-badge
content: "{{ states('sensor.aussentemperatur_2') }} °C"
label: Aussen
color: |
{% if states('sensor.aussentemperatur_2') | float >= 35 and states('sensor.aussentemperatur_2') | float < 45 %} darkred
{% elif states('sensor.aussentemperatur_2') | float >= 30 and states('sensor.aussentemperatur_2') | float < 35 %} red
{% elif states('sensor.aussentemperatur_2') | float >= 25 and states('sensor.aussentemperatur_2') | float < 30 %} orange
{% elif states('sensor.aussentemperatur_2') | float >= 20 and states('sensor.aussentemperatur_2') | float < 25 %} yellow
{% elif states('sensor.aussentemperatur_2') | float >= 10 and states('sensor.aussentemperatur_2') | float < 20 %} green
{% elif states('sensor.aussentemperatur_2') | float >= 5 and states('sensor.aussentemperatur_2') | float < 10 %} grey
{% elif states('sensor.aussentemperatur_2') | float >= 0 and states('sensor.aussentemperatur_2') | float < 5 %} cyan
{% elif states('sensor.aussentemperatur_2') | float >= -5 and states('sensor.aussentemperatur_2') | float < 0 %} blue
{% else %} purple
{% endif %}
icon: mdi:thermometer
I’m using iOS Themes what I need to do to make badges transparent as card below? Is it theme problem?
Hi,
I struggled also and I set on using the mushroom template card with renders like this and can be used as badges
The code for one of them is as follows, it’s possible to change, with card_mod, background color, shape, lines palcement, etc…
type: custom:mushroom-template-card
primary: '{{states(entity)|round(1)}}°C'
secondary: Intérieur
icon: mdi:home
icon_color: cornflowerblue
fill_container: false
layout: vertical
multiline_secondary: false
entity: sensor.temperature_interieure
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--icon-size: 36px !important;
background:
{% if (states(config.entity) | int(-1000) == -1000 ) -%} var(--disabled-color)
{% elif (states(config.entity) | float <= 8 ) -%} royalblue
{%- elif (states(config.entity) | float <= 17 ) -%} lightskyblue
{%- elif (states(config.entity) | float <= 18.5 ) -%} lightcyan
{%- elif (states(config.entity) | float <= 26 ) -%} var(--success-color)
{%- elif (states(config.entity) | float <= 28 ) -%} coral
{% else %} red
{% endif %};
width: 5rem !important;
height: 3rem !important;
--title-padding: 0px !important;
--chip-avatar-padding: 0px;
--spacing: 0px;
--card-primary-font-weight: 800;
--card-primary-font-size: 1rem;
--card-secondary-font-size: 0.9rem;
--card-primary-line-height: 20px;
--card-secondary-line-height: 20px;
}
With my post just before and mushroom-template-card you can make it transparent by setting the background color to rgba format, like rgba(1,1,1,0.2).
Maybe not the simplest solution though.
Yes I am hoping for a theme variable as well, I am trying to get less rounded corners
Dont working for me ;-(
- type: custom:hui-state-badge-element
entity: alarm_control_panel.mieszkanie
name: Alarm
display_type: complete
card_mod:
style: |
:host {
{% if is_state('alarm_control_panel.mieszkanie', 'disarmed') %}
--label-badge-background-color: rgba(0,255,0,0.1);
--label-badge-red: green
{% else %}
--label-badge-background-color: rgba(255,0,0,0.1);
--label-badge-red: red
{% endif %}
}
It is only working in the full context. Is it in an entities card like mine?
Yes
views:
- theme: Backend-selected
title: Home
layout:
width: 540
max_cols: 2
min_hight: 1
badges:
- type: custom:hui-state-badge-element
entity: alarm_control_panel.mieszkanie
name: Alarm
display_type: complete
card_mod:
style: |
:host {
{% if is_state('alarm_control_panel.mieszkanie', 'disarmed') %}
--label-badge-background-color: rgba(0,255,0,0.1);
--label-badge-red: green
{% else %}
--label-badge-background-color: rgba(255,0,0,0.1);
--label-badge-red: red
{% endif %}
}
This is the badge section of a view. It is not working there, it is only working in a card, the badge section is not (yet) “card_modable”.
Hi folks. Any update on this? Has HA or card_mod changed in the last few months to allow some kind of dynamic customisation of badges? I’m keen for person badges with colours based on zone location, like a green border when the person is home.
Thanks.
It has been posted above too but check out
and this: 🔹 Card-mod - Add css styles to any lovelace card - #7475 by Mariusthvdb
Border color, icon color, icon size, all can be modded to your liking
Go to the main card-mod thread → 1st post → link at the bottom titled “fantastic” → badges:
2 methods are available:
(not to mention card-mod theme way)
This is what I came to that is pleasing me, feel free to inspire yourself:
type: custom:mod-card
card:
type: custom:hui-entity-badge
show_name: true
show_state: false
show_icon: true
entity: binary_sensor.zigbee_ping
name: Zigbee
icon: mdi:z-wave
card_mod:
style:
hui-entity-badge:
$:
ha-badge:
$: |
.badge {
border: 1px solid {{'green' if is_state('binary_sensor.zigbee_ping', 'on') else 'red'}} !important;
}
.: |
ha-state-icon {
color: {{'var(--primary-text-color)'}};
}
.: |
hui-entity-badge {
--ha-card-background: {{'rgba(0,255,0,0.1)' if is_state('binary_sensor.zigbee_ping', 'on') else 'rgba(255,0,0,0.1)'}};
}
Giving something like
or
Yes, yes, inspire yourself )))
type: entity
show_name: true
show_state: true
show_icon: true
entity: zone.home
name: some very long long long name
card_mod:
style:
ha-badge $: |
span.label {
color: magenta;
font-size: 14px;
transform: translateY(50px);
line-height: 14px;
}
.badge {
background-color: lightblue !important;
width: 100px !important;
height: 100px !important;
flex-direction: column !important;
border-radius: 50% !important;
border: 2px solid red !important;
}
.info {
align-items: center !important;
}
.content {
transform: translateY(-40px) !important;
}
.: |
:host {
--primary-color: green;
}
ha-state-icon {
--mdc-icon-size: 36px;
margin-top: 24px;
}
state-display {
color: blue;
font-size: 18px;
}
Hello Ildar,
is it that one that require to change the javascript file or not? I’ve to admit that after reading a lot of pages of the card_mod thread I was more confused than ever before, I worked throughout the day between all your, Marius and Arganto posts, reading a lot of code.
I was pretty happy with what I did for myself. Might be that it would not suit everyone’s need for sure.
Hi Olivier! There are 2 methods as I described in card-mod thread:
Both methods have pro & contra.
1 - no need to hack, just keep using an official plugin.
2 - you can use card-mod-badge-yaml in themes like before 2024.8, less migration steps from “old badges”.
Do not recommend any particular method. Not using badges myself))
just so you can improve on that, by using
config.card.entity
in stead of repeating the config entity in that template.