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.
I try to change the actual label text (as provided by the entity, so not add a new but change the existing one).
Is that done in this section (not working)?
.badge-container .label-badge {
border-radius: 20% !important;
content: "My label"; <-- this line has no effect
}
I checked 🔹 Card-mod - Add css styles to any lovelace card - #1310 by Ildar_Gabdullin twice which is all about the look, but not the content.
I use core cards wherever possible. type: entities/grid/horizontal-stack/vertical-stack.
to embed any other card, I use the custom:hui-element as the custom card that makes all possible.
Ofc card_mod styling that allows me to do anything I need with those. Adjust card margins, delete grid gaps. Even the odd mod-card to get rid of the gaps in stack cards. Works perfectly.
If I cant make it with those, I rethink my wishes… There have been too many issues/incompatibility with the other cards.
#type: custom:state-switch
#entity: binary_sensor.meteoalarm_brabant
#states:
# 'on':
type: conditional
conditions:
- entity: binary_sensor.meteoalarm_brabant
state: 'on'
card:
type: entities #custom:stack-in-card
# keep:
# background: true
# cards:
entities:
- type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card {
margin: -16px;
box-shadow: none;
}
some indenting needs to be adjusted when uncommenting the other cards, but this is the idea. Use core when core is available and working correctly…
Not a single stack-in-card left.
type: custom:badge-card
badges:
- entity: sensor.memory_free
- entity: sensor.memory_free
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
.badge-container .label-badge .value::after {
content: "RAM: {{states(config.entity) | float(0) | round(0)}}";
font-size: 7px;
}
.badge-container .label-badge .value {
font-size: 0px;
}
1 Like
Thank you. Sorry, I was not precisely enough - I was looking for changing this text (the unit, here it is MB):
Then you didn’t get the problem. 
Anyhow, I’m happen now with my setup and I have optimized it, to not having any card-mod now needed for this case. Card mod has unfortunately the problem, that it is sometimes assigned too late and then I have the stuttering, etc. (In some browser, devices, situations) And in this special case it was not pretty, neither to remove gaps or to add them. As said, no improvements here needed.
Replacing this may cause glitches (may give different results on different devices).
Seriously - sometimes it is better to create a template sensor.
- entity: sensor.memory_free
name: replaced unit
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
.badge-container .label-badge .label span::after {
content: "xxx";
color: blue;
letter-spacing: normal;
}
.badge-container .label-badge .label span {
color: transparent;
letter-spacing: -8px;
}
maybe 
just to be clear what I meant there:
#type: custom:stack-in-card
#card_mod:
# style: |
# ha-card {
# margin: -16px;
# box-shadow: none;
# }
#keep:
# background: true
#cards:
type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -16px;
box-shadow: none:
}
:host {
--stack-card-margin: 0px;
}
card:
type: custom:hui-element
card_type: vertical-stack
cards:
and no further mods required. It tightly knits all enclosed cards together. No gaps. very clean.
if this be done cleaner, Id be interested for sure.
Ill have to lookup you card solution though, because its not easy to find the final card config you ended up with in all posts above…
note the margin and box-shadow here are only used because this card is included in an auto-entities card.
meaning, if you’d use this as a stand alone card, all modding of the core vertical-stack card would be the
:host {
--stack-card-margin: 0px;
}
This
was the problem. Everything else is clear. So from there I was going to have a someting which is looking as the standard vertical stack but with ha-card-element and without mod-card. And this was solved by the vertical-stack-in-card.
I only referenced you, because I didn’t have any problems with vertical-stack-in card but with stack-in-card I have. And somewhere you have written the opposite, that you are not using vertical-stack-in card because you had several problems with vertical-stack-in card, and you are only using only stack-in-card because of this. Curious to read, that this is not the case anymore, and you removed stack-in-card because of problems (I had always). 
BTW, not related to my topic, but only saw this in your example.
is redundant. You can card vertical-stack directly. This is the clue from mod-card. 
A yes, I see.
I don’t see the changed order in cards. So never bothered to look into that aspect.
Maybe because I have a layout set on the view.
As for the hui-element: I need that because the card is used inside another card, but will check once again. Thx.
update
can confirm that using:
type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -16px;
box-shadow: none:
}
:host {
--stack-card-margin: 0px;
}
card:
type: vertical-stack
cards:
works nicely too, thanks for the correction.
apparently we can list core vertical-stack in a core entities card. Never realized that. cool. will clean up possible other cards too
@arganto so you know I tested vertical-stack-in-card too: it still needs both the hue-element and the card_mod styling to embed it correctly in my auto-entities card:
type: custom:hui-element
card_type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
margin: -16px;
box-shadow: none:
}
cards:
or:
type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -16px;
box-shadow: none;
}
card:
type: custom:vertical-stack-in-card
cards:
which are essentially the same. Though the mod-card is officially wrong, since the vertical-stack-in-card has a ha-element ;-0
so, returning to the mod-card on vertical-stack has my preference, it will never be out of sync with the core Frontend.
fyi, the auto-entities does:
- type: custom:auto-entities
card:
type: entities
show_empty: false
filter:
include:
- entity_id: media_player.plex_*
state: /playing|paused|'on'/
options:
!include /config/dashboard/includes/include_plex_playing.yaml
I am having an issue after the most recent update where the text size isn’t being respected. When I open HA, the text increases on my one markdown but if I leave the tab and return, it goes back to normal. I have had this setup for a year or so and no issues until the most recent update. Here is my yaml
- cards:
- content: |
# Living Area
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
height: 20px !important;
margin-top: 15px;
color: {% if states('input_text.living_area_helper') | float > 0 %} gold {% endif %};
}
ha-markdown:
$: |
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
And then here is what it looks like vs normal.
Not related to your issue, anyway - do you understand what happens to the style when your condition is FALSE?
It’s just white, which is what I’m after. Or are you saying that the false is messing up the text size?
This is up to a browser to decide how to handle errors.
Check this.
As for your card - what do you expect to see here:
Thanks, I’ll add in that portion about the error.
As for your question, I am expecting to see the Living Area text, which shows up, just in variable sizes. Is that what you mean?
I just wanted to note that this set of “height” & “margin-top” causes the card to look strange.
Check a small example - your card is placed in a stack between two cards:
type: vertical-stack
cards:
- type: entity
entity: sun.sun
- type: markdown
content: Living Area
card_mod:
style:
ha-markdown $: |
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
height: 20px !important;
margin-top: 15px;
color: red;
}
- type: entity
entity: sun.sun
Without those 2 cards:
P.S. Do not bother that I removed “#” for a “content”, my post is about “height” & “margin-top” only.
Nothing is changed with “#” (except font etc for the content):
Like many of us, I’m using nested vertical/horizontal-stack cards, stack-in-cards, and mushroom cards (mostly chip and template) to assemble an overview, well…view.
Is there a way to make a CSS setting apply to all elements within a dashboard or does every card-mod block have to be inserted into each separate card? My understanding is that CSS is hierarchical, but not sure how to translate that for efficient use of card-mod (e.g. place a single card-mod block in a vertical-stack that increases the font size of all elements it containts).