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.