Yes I am. Does it make difference?
Can you post your config so I can copy+paste it into manual (de-indent it, remove layout-card)?
Hi guys,
Any idea why I can’t change the color of my mdi:washing-machine icon for my binary sensor? The color change of the label-badge-blue works fine…
style: |
:host {
--label-badge-blue:
{% if states('sensor.washing_machine_power')|float > 0 %}
green
{% else %}
#039be5
{% endif %}
;
}
ha-state-label-badge:
$:
ha-label-badge:
$:
.value: |
ha-icon {
color: {% if states('sensor.washing_machine_power')|float > 0 %} red {% else %} green {% endif %} !important;
}
BR.,
Lars
this works here:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span{
{% if is_state(config.entity,'home') %} color: gold;
{% else %} color: black;
{% endif %}
}
so maybe add the ‘color:’ in the templates if/else ?
well, never mind, this works also:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span{
color:
{% if is_state(config.entity,'home') %} gold;
{% else %} black;
{% endif %}
}
No change 
sorry, crossposted in the edit of my post above. Seems this is flakey at least between browsers. Chrome and Safari don’t pickup the same stylings…
using:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span{
color:
{% if is_state(config.entity,'home') %} gold;
{% else %} black;
{% endif %}
}
.: |
:host {
--label-badge-red:
{% set zones = states.zone|map(attribute='name')|list %}
{% if is_state(config.entity,'home') %} green;
{% elif 'bij' in states(config.entity) %} gold;
{% elif states(config.entity) in ['moving','driving'] or
states(config.entity) in zones %} mediumslateblue
{% else %} dimgrey;
{% endif %}
}
myself, and Chrome wont set the .label color (the top template, which is for the label text), where Safari does that even quicker than setting the label badge.
The thing is that I try to change the color of the icon and not the text… I can change the ring around the badge but not the icon…
Styling badges: (summarized post)
Tried to summarize everything that was discussed by Mariusthvdb and me starting from this post and below.
Quick styling using “:host” for the following elements:
- name - displayed under the badge;
- state or icon - displayed inside the badge;
- label - displayed in the bottom part of the badge (used for displaying a unit for “sensor” , a state for “device_tracker”);
- background - color of the badge internal;
- circle - color of the border.
Examples below are for:
binary_sensordevice_trackersensorswitch
- entity: binary_sensor.updater
name: 'name, icon, circle & back (:host)'
style: |
:host {
color: orange;
--label-badge-text-color: red;
--label-badge-blue: cyan;
--label-badge-background-color: yellow;
}
- entity: device_tracker.iiyama_2_ping_device_tracker
name: 'name, icon, label, circle & back (:host)'
style: |
:host {
color: orange;
--label-badge-text-color: red;
--label-badge-red: cyan;
--label-badge-background-color: yellow;
--ha-label-badge-label-color: blue;
}
- entity: sensor.cleargrass_1_co2
name: 'name, state, label, circle & back (:host)'
style: |
:host {
color: orange;
--label-badge-text-color: red;
--label-badge-red: cyan;
--label-badge-background-color: yellow;
--ha-label-badge-label-color: blue;
}
- entity: switch.test_switch
name: 'name, state, circle & back (:host)'
style: |
:host {
color: orange;
--label-badge-text-color: red;
--label-badge-red: cyan;
--label-badge-background-color: yellow;
}
Note that there is a difference between "binary_sensor" & other sensors for styling the “circle”:
-
--label-badge-blue(for"binary_sensor") -
--label-badge-red(for others)
Now styling the same elements but using “long” navigation:
- entity: sensor.cleargrass_1_co2
name: name, state, label, circle & back (long)
style:
ha-state-label-badge:
$: |
ha-label-badge {
color: orange;
--label-badge-text-color: red;
--label-badge-red: cyan;
--label-badge-background-color: yellow;
--ha-label-badge-label-color: blue;
}
In the examples above the "--label-XXXXX" variables were used for styling.
But you can use CSS properties like "color", "background-color" etc for each element including all the elements mentioned above AND these new elements:
- label background;
- label border.
- entity: sensor.cleargrass_1_co2
name: name (long)
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .title {
color: orange;
}
- entity: sun.sun
name: icon (long)
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .value {
color: red;
}
- entity: sensor.cleargrass_1_co2
name: state (long)
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .value {
color: red;
}
- entity: sensor.cleargrass_1_co2
name: label (long)
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
color: blue;
}
- entity: sensor.cleargrass_1_co2
name: circle (long)
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border-color: cyan;
}
- entity: sensor.cleargrass_1_co2
name: background (long)
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
background-color: yellow;
}
- entity: sensor.cleargrass_1_co2
name: label background (long)
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
background-color: magenta;
}
- entity: sensor.cleargrass_1_co2
name: label border (long)
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
border-style: solid;
border-color: green;
}
Now everything combined:
- entity: sensor.cleargrass_1_co2
name: combined
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border-color: cyan;
background-color: yellow;
}
.badge-container .label-badge .value {
color: red;
}
.badge-container .label-badge .label span {
border-style: solid;
border-color: green;
color: blue;
background-color: magenta;
}
.badge-container .title {
color: orange;
}
Also border’s style can be changed:
- entity: sensor.cleargrass_1_co2
name: combined (dashed border)
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border-style: dashed;
border-color: cyan;
background-color: yellow;
}
.badge-container .label-badge .value {
color: red;
}
.badge-container .label-badge .label span {
border-style: dashed;
border-color: green;
color: blue;
background-color: magenta;
}
.badge-container .title {
color: orange;
}
It is possible to combine two methods - using together "--label-XXXXX" variables and CSS properties like "color", "background-color":
- entity: sensor.cleargrass_1_co2
name: two methods
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
border-style: solid;
border-color: green;
color: blue;
background-color: magenta;
}
.badge-container .title {
color: orange;
}
.: |
ha-label-badge {
--label-badge-background-color: yellow;
--label-badge-text-color: red;
--label-badge-red: cyan;
}
It is possible to combine ":host" & “long” navigation to get a short version:
- entity: sensor.cleargrass_1_co2
name: short
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
border-style: solid;
border-color: green;
color: blue;
background-color: magenta;
}
.: |
:host {
color: orange;
--label-badge-background-color: yellow;
--label-badge-text-color: red;
--label-badge-red: cyan;
}
Changing a badge size:
- entity: sensor.cleargrass_1_co2
name: huge badge
style: |
:host {
--ha-label-badge-size: 65px;
}
- entity: sensor.cleargrass_1_co2
name: normal badge
Changing a name’s width:
- entity: sensor.cleargrass_1_co2
name: normal badge
- entity: sensor.cleargrass_1_co2
name: name width for a very very long name
style: |
:host {
--ha-label-badge-title-width: 200px;
}
- entity: sensor.cleargrass_1_co2
name: normal badge
Changing a font size:
For the name:
Note: changing a name’s width and margin-top are also required.
- entity: sensor.cleargrass_1_co2
name: name font for a very long name
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .title {
margin-top: 11px !important;
}
.: |
:host {
--ha-label-badge-title-font-size: 7px;
--ha-label-badge-title-width: 48px;
}
For the state:
- entity: sensor.cleargrass_1_co2
name: state font
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .value {
color: red;
font-size: 8px;
}
For the label:
- entity: sensor.rpi_1_netdata_net_in
name: label font
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
color: blue;
font-size: 6px !important;
}
Changing an icon size:
- entity: device_tracker.iiyama_2_ping_device_tracker
name: resized icon
card_mod:
style:
ha-state-label-badge:
$: |
ha-label-badge ha-state-icon {
--mdc-icon-size: 15px;
color: red;
}
Scaling a badge:
May be done by changing a "--ha-label-badge-font-size" variable’s value:
- entity: sensor.cleargrass_1_co2
name: scaling 1
style: |
:host {
--ha-label-badge-font-size: 8px;
}
- entity: sensor.cleargrass_1_co2
name: scaling 2
style: |
:host {
--ha-label-badge-font-size: 28px;
}
Note that the scaling does not change a name’s width.
Changing a padding around a badge:
- entity: sensor.cleargrass_1_co2
name: normal padding
- entity: sensor.cleargrass_1_co2
name: changed padding
style: |
:host {
--ha-label-badge-padding: 20px;
}
- entity: sensor.cleargrass_1_co2
name: normal padding
Transparent badge:
Can be used to create a gap between other badges:
- entity: sun.sun
name: transparent
style: |
:host {
color: transparent;
--label-badge-text-color: transparent;
--label-badge-red: transparent;
--label-badge-background-color: transparent;
--ha-label-badge-label-color: transparent;
--ha-label-badge-font-size: 0px;
--ha-label-badge-title-width: 20px;
}
The last variable may be used to change the gap’s width.
More examples are described here.
13 Likes
Can the problem be the sensor?
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 %}
Does my badge both have an icon and a state hidden under the icon? I mean maybe I change the color of the state but don’t see that as the state value is under the icon?
2 Likes
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 }}
2 Likes
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
- the state, name and unit of a badge entity
- background, and combined circle-border and -label of the badge itself (though label and circle border were also independent before, might take some extra effort finding a way to do that)
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?
1 Like
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;
}