I got you. But there are sensors which don’t have (and can’t have) one, e. g. “zone.home”.
So by simply using your styling I am able to write “persons” on the label badge. Perfect 
Compare my original code and yours - wrong indentation.
I fixed it. But now this…
- entity: sensor.problems_any
name: Probleme
icon: mdi:check-circle
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border-radius: 20% !important;
}
.badge-container .label-badge .value::after {
{% if is_state('sensor.problems_any','1') %}
content: "{{states(config.entity)}}";
{% endif %}
}
.: |
ha-label-badge ha-state-icon {
{% if is_state('sensor.problems_any','0') %}
display: none;
{% endif %}
}
:host {
{% if states(config.entity) | int(0) == 0 -%}
--label-badge-text-color: green;
--label-badge-red: green;
{% else %}
color: red;
--label-badge-text-color: red;
--label-badge-red: red;
--label-badge-background-color: yellow;
{% endif %}
}
…shows:
-
when value is 0 (error: icon missing) -
when value is 1 (error: icon shown)
So: it got even worse. 
No, wrong.
Copy/paste my code and then ADD yours.
I did! A second time. Step by step. Same result, believe me.
I would be thankful if you could take what I added to show me it works.
Last version (copy / pasted yours, added my stuff):
- entity: sensor.problems_any
name: Probleme
icon: mdi:check-circle
card_mod:
style:
ha-state-label-badge $:
ha-label-badge $: |
.badge-container .label-badge {
border-radius: 20% !important;
}
.badge-container .label-badge .value::after {
{% if is_state('sensor.problems_any','1') %}
content: "{{states(config.entity)}}";
{% endif %}
}
.: |
ha-label-badge ha-state-icon {
{% if is_state('sensor.problems_any','0') %}
display: none;
{% endif %}
}
:host {
{% if states(config.entity) | int(0) == 0 -%}
--label-badge-text-color: green;
--label-badge-red: green;
{% else %}
color: red;
--label-badge-text-color: red;
--label-badge-red: red;
--label-badge-background-color: yellow;
{% endif %}
}
Wrong indentation for the :host:
.: |
:host {
The “.:” must be with the same indent as your 1st selector
With the 3.1.5 update my card doesn’t work properly anymore. So when the light is on in a room it changes the icon color. I see that there is a fix for the icon colors, but it’s not really clear what or what I should change. Any help or tips?
type: custom:button-card
template: kamer_info
icon: mdi:baby-carriage-off
color: rgb(0, 51, 153)
name: Kinderkamer
variables:
climate_entity: climate.kinderkamer
tap_action:
action: navigate
navigation_path: /lovelace-mobile/kinderkamer-mob
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if is_state('light.kinderkamer1', 'on') %}
rgb(255,190,0)
{% elif is_state('light.kinderkamer2', 'on') %}
rgb(255,190,0)
{% elif is_state('light.nachtlicht_kinderkamer', 'on') %}
rgb(255,190,0)
{% else %}
rgb(0, 51, 153)
{% endif %}
}
Thanks for your effort. The problem with the margins were not the problem. I did it more ore less 1:1 before. The problem was “only” the sticking when using mod-card to get rid of the first margin. And as this is present here as well and I don’t want to switch to an custom-layout card (did it with horizontal (with assigned comlumn, etc.) already before, but I don’t like, that it is not loading in a streaming way card by card but load everything first and show clack/background until it then appears.
card-mod-view-yaml: |
hui-masonry-view $ div#columns div.column hui-vertical-stack-card $: |
#root hui-conditional-card:nth-child(2) {
{% if (states("binary_sensor.ui_alert") == "off") %}
margin-top: 0px;
{% endif %}
}
This one was the clue … if you only have one dashboard. Later I saw, that if you go to another dashboard and back, etc. this mod get’s lost and will not be re-apllied. For whatever reason. So, no real solution, but interesting to know.
And then I though. Why not having a vartical stack as the build in, but with an ha-card (really a pitty, that so many helper-cards in HA are build different than all other cards). Like vertical-stack-in-card or stack-in-card. But tweek it that way, that it looks like tthe build in card, that means re-assign the backgrounds, etc. 
This is possible with both cards, bat faster (and with less custom modding) with stack-in-card, because of the keep-objekt. Et voila:
type: custom:stack-in-card
card_mod:
style:
hui-vertical-stack-card$: |
div#root { background-color: red; }
keep:
background: true
margin: true
outer_padding: false
border_radius: true
box_shadow: true
cards:
No sticking. Behavior like in standard card. Order of cards same. Most probably only until I will see or find another problem with this approach, but it looks promising. And with that I can mod the margins as I want.
BTW Ma assumption, why they stick together is, that the mod-card is calculated by HA as 0px height and therefor more or less not existent for the masonry positioning of the cards. So calculation of the break to the next column will start with the next card. Something like that I think.
Fixed this. So I’m back from two bugs to one:
value = 0:
→ right 
value = 1:
→ WRONG! 
For the 3rd time: how to get rid of the icon when value = 1?
Maybe you want to just try it on your own? All the theoretical looking & directing “without touching” is not very effective
- entity: sensor.problems_any
name: Probleme
icon: mdi:check-circle
card_mod:
style:
ha-state-label-badge $:
ha-label-badge $: |
.badge-container .label-badge {
border-radius: 20% !important;
}
.badge-container .label-badge .value::after {
{% if is_state('sensor.problems_any','1') %}
content: "{{states(config.entity)}}";
{% endif %}
}
.: |
ha-label-badge ha-state-icon {
{% if is_state('sensor.problems_any','0') %}
display: none;
{% endif %}
}
:host {
{% if states(config.entity) | int(0) == 0 -%}
--label-badge-text-color: green;
--label-badge-red: green;
{% else %}
color: red;
--label-badge-text-color: red;
--label-badge-red: red;
--label-badge-background-color: yellow;
{% endif %}
}
1 Like
I have already tested it and pointed to the problem with indentation for :host.
You did not corrected it.
For the sake of completes: I switched to vertical-stack-in-card and removed stack-in-card as well completely, because this would be one of the few places for the stack-in-card and I prefer to have only one of these types.
type: custom:vertical-stack-in-card
card_mod:
style:
.: |
ha-card { background-color: red; }
div hui-entities-card:nth-child(2) $: |
ha-card {
margin-top: 4px;
}
styles:
border-radius: var(--ha-card-border-radius, 4px)
box-shadow: >-
var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px
0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) )
Reason: The vertical-stack-in-card has fewer problems with stacks inside stacks (a popup with this construction is not working), some button cards were not displayed, etc. etc.
Where EXACTLY is the issue? I spend 1 hour of trying for things you are able to SHOW in 10 seconds. Please, use my code and mark which part needs to be shifted where to the left or the right. That would be great.
Who told you I have not tried it by myself??? I tested - I pointed you to the error clearly - you have not corrected it.
I am not very good in English, my native language is Russian - cannot express myself now; in short, change your attitude, please. I tried to help you, honestly).
The code:
card_mod:
style:
ha-state-label-badge $:
ha-label-badge $: |
.badge-container .label-badge .value::after {
}
.: |
ha-label-badge ha-state-icon {
}
.: |
:host {
}
That was the error.
The “:host” part ONLY was misplaced. The “:host” is a root-level (do not know how to say it better) thing, so you need to put it on the 1st level.
1 Like
I will check your long post a bit later.
Meanwhile - regarding the vertical-stack-in-card.
I got some issues with stack-in-card. For me, it seems that the card is not maintained any more.
But first I used the vertical-stack-in-card and then switched to the stack-in-card - because some people on the forum complained like “the card is not maintained any more” )))).
If you really advise to use the vertical-stack-in-card instead - I will start testing it.
Both of them have more or less the same number of open issues. 
The vertical-stack-in-card has a slightly newer update.
If I switch 1:1 from vertical-stack-in-card to stack-in-card, 50% of my cards are not working anymore. And I didn’t do special stuff. Esp. that nested stack didn’t work (anymore) and some popups and some button cards either, let me go back to vertical-stack-in-card as the preferred solution.
AFAIR Marius has excatly to opposite problems of this and moved to stack-in-card.
So it depends most probably and as always on the needs. But at least I have not a singe problem (till now) with vertical-stack-in-card.
All my issues with the stack-in-card may be treated by “card-mod”:
one
two
three
four
I use the stack-in-card inside a decluttering template ONLY. On this level I may apply a required card-mod style to fix a bug in the whole HA setup.
Ok Ildar, here comes the funny thing. And that’s what’s so frustrating: it’s a constant try and error (for hours) without success, for one single change. Sorry if I bothered you - I only want to make this finally work after two days and learn something while doing so.
So: There is a second “.: |” in your full code snippet (which I didn’t know/see before). I entered it. Now I have exactly the same code (or: code structure) as you.
Here’s a text comparison, 1:1:
- left is your code from 🔹 Card-mod - Add css styles to any lovelace card - #3309 by Ildar_Gabdullin
- right is mine as actually used
- red sections are the differences (the actual content missing in your code structure of course)
- indention is e-x-a-c-t-l-y the same
And that code (mine) still gives:
- value = 0:
→ where’s the icon? that was a step backwards again *1 - value = 1:
→ still buggy. Please go away you bad icon, please 
So question #1: what does your badge look like with your code for states 0 and 1?
*1 So because of this, I change the code back to what I had before (more precisely: I remove the line “ .: |” before the “:host {” line), now we - again - have:
- entity: sensor.problems_any
name: Probleme
icon: mdi:check-circle
card_mod:
style:
ha-state-label-badge $:
ha-label-badge $: |
.badge-container .label-badge {
border-radius: 20% !important;
}
.badge-container .label-badge .value::after {
{% if is_state('sensor.problems_any','1') %}
content: "{{states(config.entity)}}";
{% endif %}
}
.: |
ha-label-badge ha-state-icon {
{% if is_state('sensor.problems_any','0') %}
display: none;
{% endif %}
}
:host {
{% if states(config.entity) | int(0) == 0 -%}
--label-badge-text-color: green;
--label-badge-red: green;
{% else %}
color: red;
--label-badge-text-color: red;
--label-badge-red: red;
--label-badge-background-color: yellow;
{% endif %}
}
…which gives:
- value = 0:
→ perfect!
- value = 1:
→ again: still buggy. Please go away you bad icon, please
So to sum up:
- I use exactly your code structure: 2 errors (styling is wrong for both states)
- I use the same code without the “
.: |” on top of the “:host” line/section: 1 error remaining
I can not tell you what is wrong here. You are the styling guru expert, tell me
I really can’t.
I don’t know what else I can do.
I closely follow your instructions, use the same code and repeatingly get the wrong result.
Can it be a browser issue maybe?
Or a HA version mismatch (I’m on 2022.4.7)?
Please contact me via PM, we’ll finalize this case
1 Like
To everyone potentially interested: together we sorted this out and finally fixed it, everyone spotted things and alltogether formed a working solution (only minor, but very important changes). To sum things up:
-
My mistake: the missing additional “.: |” line above the :host line -
All condition checks must be identical (check on the same value)
-
If it’s not a binary_sensor (or binary input_helper) but a sensor with various possible numbers, the if condition checks need to be adjusted.
This is working now:
- entity: sensor.problems_any
name: Probleme
icon: mdi:check-circle
card_mod:
style:
ha-state-label-badge $:
ha-label-badge $: |
.badge-container .label-badge {
border-radius: 20% !important;
}
.badge-container .label-badge .value::after {
{% if states(config.entity) | int(0) > 0 %}
content: "{{states(config.entity)}}";
{% endif %}
}
.: |
ha-label-badge ha-state-icon {
{% if states(config.entity) | int(0) > 0 %}
display: none;
{% endif %}
}
.: |
:host {
{% if states(config.entity) | int(0) == 0 -%}
--label-badge-text-color: green;
--label-badge-red: green;
{% else %}
color: red;
--label-badge-text-color: red;
--label-badge-red: red;
--label-badge-background-color: yellow;
{% endif %}
}
Gosh this was a tricky one!
I learned a lot👨🎓
Big props to Ildar 
the 
of styling
1 Like
Small note on this: there seems to be a browser issue. My Firefox on my (Windows) notebook randomly (okay, tbh most of the time, maybe 5 % of the time it is shown correctly) just shows the default icon (not the dynamic one), e. g.
…where at the same time all other devices (iOS, Android - always running the HA Companion app) show them correctly:
I have no idea if maybe some privacy addon of Firefox is blocking something or why it doesn’t work - but I’ll try to further investigate this so this will give a consistent user experience on all devices and browsers. Will report back if I tracked this down.