I tried to combine :host & “Hierarchy”, no success ((
Lack of knowledge & experience…
In short non-expert way, “:host” & “ha-label-badge” are same.
What was the code that didn’t work?
since almost all options are covered in this combined style:
- entity: sensor.calltheboss_battery_level
style:
ha-state-label-badge:
$:
ha-label-badge:
$:
.badge-container: |
.title {
color: orange;
}
.:
.badge-container .label-badge: |
.value {
color: red
}
.: |
.badge-container .label-badge .label span {
color: white;
}
.: |
ha-label-badge {
--label-badge-red: green;
--label-badge-background-color: yellow;
}
for me, the final question is how to style the circle (border) independently from the unit box
(now the --label-badge-red: green; for ha-label-badge)
also, given Ildars remark above, whether this is the optimal (read: shortest) yaml for the config or not 
this seems to be identical in result:
- entity: sensor.calltheboss_battery_level
style:
ha-state-label-badge:
$:
ha-label-badge:
$:
.badge-container: |
.title {color: orange;}
.value {color: red;}
.label-badge .label span {color: white;}
.: |
ha-label-badge {
--label-badge-red: green;
--label-badge-background-color: yellow;
}
This is really interesting.
I changed “white” to “blue” for the UNIT- and it does not work.
This works:
- entity: sensor.cleargrass_1_co2
name: combined short
style:
ha-state-label-badge:
$:
ha-label-badge:
$:
.badge-container: |
.title {color: orange;}
.value {color: red;}
.badge-container .label-badge .label span {color: blue;}
.: |
ha-label-badge {
--label-badge-red: green;
--label-badge-background-color: yellow;
}
or this:
$:
.badge-container: |
.title {color: orange;}
.badge-container .label-badge .label span {color: blue;}
.value {color: red;}
or this:
$:
.badge-container: |
.title {color: orange;}
.badge-container .label-badge .value {color: red;}
.badge-container .label-badge .label span {color: blue;}
1 Like
Here is a problem which I have not solved so far.
I can change a style for some cards.
But cannot do it for cards inside 'custom:config-template-card'.
Let’s make a simple Entities card with 2 rows:
- a row inside
'custom:config-template-card'; - a usual row.
type: entities
title: config-template problem
entities:
- type: 'custom:config-template-card'
entities:
- sun.sun
row:
entity: sun.sun
style:
hui-text-entity-row:
$:
hui-generic-entity-row: |
.text-content {
color: red;
}
- entity: sun.sun
style: |
:host .text-content {
color: red;
}
Note that for the 'custom:config-template-card' there are no variables & templates, it is just a simple example.
So, I cannot change a style for the 1st row.
Any help will be appreciated.
That’s because card-mod doesn’t work for custom cards. You could shadow-root into the row instead.
But I used card-mod for multiple-entity-card (which is mainly a row, not a card).
Could you guide me how to do it?
In my example above I did “shadow-root”, I think…
Shadow-root from the card instead of the row.
yes, I now do believe you are right, must have been a 1 time glitch…
where are the times we could simply set a theme to a badge:
green_badge:
label-badge-red: green
label-badge-background-color: white
label-badge-color: grey
label-badge-text-color: green
Lovelace makes all of this so much more difficult
I need to combine:
- entity: sensor.calltheboss_battery_level
style:
ha-state-label-badge:
$:
ha-label-badge:
$:
.badge-container: |
.title {color: orange;}
.value {color: grey;}
.badge-container .label-badge .label span {color: red;}
.: |
ha-label-badge {
--label-badge-red: green;
--label-badge-background-color: yellow;
}
with the coloring and dashing of the example in the docs:
$: |
.label-badge {
border-style: dashed;
border-color: red;
}
but cant find the correct order of things… please have another go at it?
thanks
update
this works, now maybe compress the .badge-containers?
- entity: sensor.calltheboss_battery_level
style:
ha-state-label-badge:
$:
ha-label-badge:
$:
.badge-container: |
.title {color: orange;}
.value {color: grey;}
.badge-container .label-badge .label span {color: red;}
.badge-container .label-badge {
border-style: dashed;
border-color: blue;
}
.badge-container .label-badge .label span {
border-style: dotted;
border-color: pink;
}
.: |
ha-label-badge {
--label-badge-red: green;
--label-badge-background-color: yellow;
}
bit further compressed:
style:
ha-state-label-badge:
$:
ha-label-badge:
$:
.badge-container: |
.title {color: orange;}
.value {color: grey;}
.badge-container .label-badge {
border-style: dashed;
border-color: blue;
}
.badge-container .label-badge .label span {
border-style: dotted;
border-color: pink;
color: red;
}
.: |
ha-label-badge {
--label-badge-red: green;
--label-badge-background-color: yellow;
}
Styling a card inside ‘custom:config-template-card’:
1.Styling a row - there are 2 options:
Option 1 - styling must be done from the "config-template-card":
Stopped working - see the issue; was fixed later.
code
type: entities
title: config-template (row)
entities:
- type: custom:config-template-card
entities:
- sun.sun
row:
entity: sun.sun
name: from CTC level
card_mod:
style: |
div#card {
color: orange;
}
- type: custom:config-template-card
entities:
- sun.sun
row:
entity: sun.sun
name: from CTC level (many shadowRoots)
card_mod:
style:
div#card :first-child $:
hui-generic-entity-row $: |
state-badge {
color: red;
}
- type: custom:config-template-card
entities:
- sun.sun
row:
entity: sun.sun
name: from CTC level (:host)
card_mod:
style: |
:host {
color: orange !important;
}
Option 2 - styling must be done from the "Entities card":
code
type: entities
title: config-template (row) (outside)
entities:
- type: custom:config-template-card
entities:
- sun.sun
row:
entity: sun.sun
name: config-template
- type: custom:config-template-card
entities:
- sun.sun
row:
entity: sun.sun
name: config-template
card_mod:
style:
config-template-card $:
div#card :first-child $ hui-generic-entity-row $: |
.text-content:not(.info) {
color: orange;
}
2.Styling a card - must be done from the card itself:
code
type: custom:config-template-card
entities:
- sun.sun
card:
type: entities
title: config-template (card inside)
card_mod:
style: |
.card-header {
color: green;
}
entities:
- entity: sun.sun
card_mod:
style: |
:host {
color: red;
}
One more example:
code
type: custom:config-template-card
entities:
- sun.sun
card:
type: entities
title: config-template (card inside)
card_mod:
style:
hui-sensor-entity-row:
$ hui-generic-entity-row $: |
state-badge {
color: cyan;
}
entities:
- entity: sensor.xiaomi_cg_1_pm25
- entity: sensor.xiaomi_cg_1_co2
More examples are described here.
Magical !!)))
Also there is one more way to shorten the style - we can use "--label-badge-text-color" for icon & state.
Something like this:
- entity: sensor.cleargrass_1_co2
name: combined short 4 (+ 2 colors)
style:
ha-state-label-badge:
$:
ha-label-badge:
$:
.badge-container: |
.title {color: orange;}
.badge-container .label-badge .label span {
color: blue;
border-style: dotted;
border-color: cyan;
}
.badge-container .label-badge {
border-style: dashed;
border-color: red;
}
.: |
ha-label-badge {
--label-badge-red: green;
--label-badge-background-color: yellow;
--label-badge-text-color: magenta;
}
1 Like
a yes, I had been trying that but couldnt find a valid spot for it… It’s a little less obvious, so we need to keep both these examples available somewhere.maybe set the color to grey, to have it stand out more from the border
You can put "--label-badge-text-color" inside “:host” if used alone without these “$:” and “.:” - at least I could not combine these two ways.
What were the two ways that worked on their own?
- Using “:host” - I can set these colors:
- entity: sun.sun
name: colored back
style: |
:host {
color: red;
--label-badge-background-color: yellow;
--label-badge-text-color: green;
--label-badge-red: magenta;
}
- But for other colors I need to use the hierarchy described above. And I cannot combine these two ways.
Put the :host stuff and whatever underneath the .: | part.
Any example?
Or is it same as described above like here: 🔹 Card-mod - Add css styles to any lovelace card
First original:
style:
xyz:
$: |
bla123
Second original:
style: |
foo456
Combined:
style:
xyz:
$: |
bla123
.: |
foo456
OK, thank you)))
Then a new short version for Badge:
- entity: sensor.cleargrass_1_co2
name: combined short 5 (+ 2 colors)
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
color: blue;
border-style: dotted;
border-color: cyan;
}
.badge-container .label-badge {
border-style: dashed;
border-color: red;
}
.: |
:host {
color: orange;
--label-badge-text-color: magenta;
--label-badge-red: green;
--label-badge-background-color: yellow;
}
Great 
Thx!!
/L