I’d like to emphasise that @thomasloven did such an amazing work with all the custom cards he provided to our community.
I can’t count the number of time that I’m using one of his right now: card-mod, slider-entity-row, fold-entity-row, layout-card, badge-card
same. Every one of my ‘main’ views uses custom:lovelace-layout-card and many of the rest make use of lovelace-auto-entities.
I was trying with mushroom also, but didn’t succeed with satisfactory result.
Are you willing to post some yaml of these badges, so I can try to recreate and style them a bit further?
Great, but if i understand correctly (didn’t try it out yet), this is a custom card and therefore does not span over the whole width of the screen? Because what I want to achieve is, as it was with old badges - they are on the top of the screen on the whole width.
So my preferred solution would include something like
badges:
- type: custom:hui-state-badge-element
entity: sensor.temperature_bedroom
card_mod:
style: |
:host, .$, whatever....
.label-badge {
font;
}
--label-badge-red:
....
I’m still struggling to find the correct DOM properties for the style, but no success yet.
please keep this thread on the hui-state-badge-element so we can focus.
they are nice!. please post in Mushroom styling thread? (not here as it will only confuse users looking to style the now legacy State badge). Ofc the link would be nice, so we can all followup .
Ill add this for now, as Ive tested the available theme variables and have these working:
# Legacy Badges loaded as custom
# https://github.com/home-assistant/frontend/blob/20408392d2c26b7320cee2e1b4ca3c8bd880b84e/src/panels/lovelace/badges/hui-state-label-badge.ts
# https://github.com/home-assistant/frontend/blob/20408392d2c26b7320cee2e1b4ca3c8bd880b84e/src/components/entity/ha-state-label-badge.ts
label-badge-background-color: orange
label-badge-text-color: ivory
label-badge-red: var(--ha-color)
ha-label-badge-font-size: 15px
ha-label-badge-size: 30px
ha-label-badge-border-radius: 0
# X ha-label-badge-color: yellow
# X ha-label-badge-label-text-transform: lowercase #capitalize|none|uppercase|lowercase
ha-label-badge-label-color: white
# X ha-label-badge-label-background-color: ivory
ha-label-badge-title-font-size: 10px
ha-label-badge-title-font-weight: 400
ha-label-badge-title-width: 50px
# X ha-label-badge-title-color: white
# need .label-badge .label span for label background-color, color, border-radius
ofc those are generic, and not per badge.
the commented X dont work, even though they are used in the resource…
Yes, it is to replace the (not yet updated) badge-card.
So, no, unless you do a “one card widht” page, like panel or lateral bar, it will not span, sorry.
I tried with your syntax since 2024.8.0b0 but gave up as nothing seemed to work to customize the custom:hui-state-badge-element inside the badge element even if it is working in another card like the entities one that I used in my post.
But I think it is much easier than to use a picture-element card
I used the custom badge card with floorplan card in panel mode - this worked really well for letting me show badges while maximizing the size of the floorplan card.
There now seems to be no way to show badges in panel mode - has anyone found any workarounds for that? I tried layout card, and while it does allow me to maximize the floorplan card, the button to add badges disappears.
Thanks in advance!
Ok, I’m asking for help already …
The custom:hui-state-badge-element seems too big compared to what is in my memory and the gap between each card of the stack is also too big.
If someone know how to apply a 80% factor on the badge (probably at the entities card level) and reduce the gap between the entities cards (probably at stack-in-card level)?
Please 
see 2 posts above, use ha-label-badge-size: 30px in your theme and it sets that to all badges
type: custom:mod-card
card_mod:
style: |
:host {
--stack-card-gap: 0;
}
card:
type: horizontal-stack
(use grid-card-gap for a grid card)
type: custom:mod-card
card_mod:
style: |
:host {
--grid-card-gap: 2px;
}
card:
type: grid
or, are you asking between the cards in the view itself ? that would probably an override in card-mod theming
I’m looking for that gap, the green part, but as I’m using transparent background, I can change my stack-in-card to an horizontal-stack and try your code
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:
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
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?
Have you tried the “label” field in the template badge or in the code editor?
