Is there any way to change font size or background color with the new badges or new mushroom-badges ? Cannot seem to get that to work.
1 Like
You can still apply the templates you had to provide icons, colours, texts, labels almost the same way you had them before. It is not going to be exactly the same, but after seeing the new badges for around 2 weeks, I’m quite happy (that’s a personal opinion, of course…)
As it seems, there will be no quick solution to style and customize legacy badges, I went for the RomMuc’s solution and recreated all 54 badges with Mushroom.
Basicly the main downside is, that the new badges take twice as much space as the old ones and also customizing is a bit harder or even impossible for certain cases, but as a general solution, it works. I had to add some code to theme also to achieve the “grid look” (defining width of badges etc), but at the end I guess I’ll get used to the new look.
Thx for the hint, RomMuc.
2 Likes
Hi brainstruct,
I am finding the launch of the new badges is not as eloquent as I would have liked (my opinion). Most likely I am missing something blatantly obvious.
As you can see by the image below, there are a number of different ways (by default) presence can be represented on a dashboard (minimal, standard, complete) with entity pictures. I would like to use minimal so that the dashboard can look good on a mobile device, but if i use this, I cannot make out the state of the person.
Is there a way I can show either:
- show different entity pictures depending on state = Home or state ≠ Home
- some home edit the badge like add a blue ring for state = Home or red ring for state ≠ Home.
I have tried using card-mod but it does not work (for me at least) on the new badges with entity pictures.
1 Like
for a second I thought I had a start to succesfully mod the new badges, trying to set a border radius.
it is silly complex though:
- type: custom:mod-card
card:
type: custom:hui-state-label-badge
entity: light.alarm
card_mod:
style: |
.badge {
border-radius: 0;
}
requiring card_mods built in mod-card for cards that don’t set the ha-card element. And the little trick to load any core card as custom, because otherwise it would not be recognized.
loading this very briefly shows the squared border, but immediately, rounds them again. !important doesnt fix it either.
Guess there really is nothing else we can do than wait for a theme variable to become available.
I Too hate the new badges due to the width of them. What would improve them is an option to disable the icon and then decrease the width.
these Add missing box shadow theme variable to entity badge by piitaya · Pull Request #21714 · home-assistant/frontend · GitHub and Option to change new badge size by dhoeben · Pull Request #21676 · home-assistant/frontend · GitHub
look promising 
It looks like this hasn’t been solved yet, but I’ll add my specific need here and see if there are any current workarounds or future updates that make this possible.
I want a person badge with a border colour that updates on presence.
With the old badge and card_mod, I had this working like:
badges:
- entity: person.lindsay
card_mod:
style: |
:host {
{% if is_state('person.lindsay','home') %} --label-badge-red: green;
{% elif is_state('person.lindsay','not_home') %} --label-badge-red: grey;
{% else %} --label-badge-red: purple;
{% endif %}
}
I have just tried the mushroom template badge as mentioned in post #3. I could set the colour of the icon using similar template code in the ‘color’ field…
color: |-
{% if is_state('person.lindsay','home') %} green
{% elif is_state('person.lindsay','not_home') %} grey
{% else %} purple
{% endif %}
But, this has no effect when I use an image, not an icon, and I want the image.
Is there a way to set a border with this and style it using a template?
Or, use the new badge like I used to 
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
1 Like
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…
1 Like
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
1 Like
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;
}
1 Like
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”.
1 Like