thanks!
in the old days before Lovelace we were able to also color the white background of the badge, would you know how to do that with card-mod style?
could you show us how to combine these into 1 badge style. I am a bit confused which hierarchy each has compared to the other. Say a Green unit, Yellow Text, Red icon and Blue circle 
Try this:
binary_sensor:
sensors:
washer:
friendly_name: "Washer"
delay_off:
minutes: 5
icon_template: "{% if states('sensor.washing_machine_power')|float > 0 -%}
{{mdi:washing-machine}}
{%- else -%}
{{mdi:washing-machine-off}}
{%- endif %}"
value_template: "{% if states('sensor.washing_machine_power')|float > 0 -%}
{{1}}
{%- else -%}
{{0}}
{%- endif %}"
I just tried to change a background with no success.
I am still learning too, will try to change it later…
As for combining - wait a little)))
why not have the binary behave as it is designed, be ‘on’ when above 0 else off:
value_template: >
{{ states('sensor.washing_machine_power')|float > 0 }}
Combining styles for badge:
(code updated 01/03/21 because of this post)
- entity: sensor.cleargrass_1_co2
name: combined
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: blue;
}
.: |
ha-label-badge {
--label-badge-red: cyan;
--label-badge-background-color: yellow;
}
Hierarchy is always enigmatic for me))
Icon:
(code updated 01/03/21 because of this post)
- entity: sun.sun
name: combined
style:
ha-state-label-badge:
$:
ha-label-badge:
$:
.badge-container: |
.title {
color: orange;
}
.badge-container .label-badge: |
.value {
color: red
}
.: |
ha-label-badge {
--label-badge-red: cyan;
--label-badge-background-color: yellow;
}
Background only:
- entity: sun.sun
name: colored back
style: |
:host {
--label-badge-background-color: yellow;
}
great!
so this shows how to style
seems to be rather complete —> into the style book
what I dont get just yet, is why the --label-badge-background-color should be under :host in the bottom style, and under
.: |
ha-label-badge
in the upper style?
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;}
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:
'custom:config-template-card';
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.
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":
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:
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:
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;
}
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.