yes, the stack-in-card is no longer required if you add a few systemic card-mods. 
let me know, because I believe you could otherwise also mod the gaps in stack-in-card itself
I can change in the DevTools by setting the padding to 0px (instead of 16px)
But I think I already tried every CSS selectors without any success
This new badge style is going to kill me
Iām just not going to update to 2024.08 at least until I can customize the badges exactly the way I want, and without wasting a lot of hours doing it.
My current badge layout:
2 Likes
did you try the custom:badge-card?
it was designed for showing badges anywhere in the view.
thereās also a separate card_mod topic š¹ Card-mod - Add css styles to any lovelace card - #2104 by Ildar_Gabdullin
we might be able to set spacing I side the badge-card for this purpose (didnt yet try, so give it your best shot )
butā¦ I believe the margin is already 0px, so changing that padding wont do anything.
I did test setting a negative margin on the badge individually and that actually move it sideways.
cant say this is the solution to your wish, but at least its some sort of progressā¦
otoh, the width is required for titles longer than the badge itself, so if we could change it, it would need to adapt dynamically.
Seems a lot of trouble for a deprecated badge, and its inherent design deficienciesā¦
custom:badge-card is what Iām trying to recreate as it is broken for now 
It is, waiting for the card-mod for the new badges obviously
what is broken?
this is horizontal-stack, didnt need to set the gap to 0, made no difference
(overflow right side,ā¦)
If youāre not using custom:hui-state-badge-element, it is like my screenshot.
If you do, then I canāt specify the name and the icon which for the same entity is different depending on where it is shown (in my config) and for what purpose
Like, on my sonās dashboard, the badge āOrdiā is for him to understand that it is about his computer and it is red when his screentime is over.
The same entity on my admin view is called HP Probook 650 G2 because there is more than one laptop and it is red when it is offline (green otherwise)
You understand my desperate try to redo the old style
1 Like
I am also struggling with this. I want to keep old badges, I havenāt even customised them, but on some elements I have changed the name so it does not match the entity name (with āname: ā) and this does not work with custom:hui-state-badge-elementā¦ Is there a way to change the name while keeping the old badges?
1 Like
Have you tried the ālabelā field in the template badge or in the code editor?
I have just did. It doesnāt seem to workā¦
Try with a simple one, like in this example New badges and card-mod customisation - #3 by RomMuc, it is really āout of the boxā and works or share the content of your code 
R.
But I want the old badges, I thought this only works with the new ones, or did I get it wrong?
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 