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_sensor
device_tracker
sensor
switch
![изображение](https://community-assets.home-assistant.io/original/3X/1/a/1a5939d0c92e56376684a9b580c45f8831714cbf.png)
- 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:
![изображение](https://community-assets.home-assistant.io/original/3X/4/4/44a9c81b45f0e7bb98b603ba7d124a01c699a110.png)
- 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.
![изображение](https://community-assets.home-assistant.io/original/3X/0/0/00e869c5ff2b2261d9a7ef1e841dd41faa3f3589.png)
- 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:
![изображение](https://community-assets.home-assistant.io/original/3X/8/3/83877d9b9046301ee163cfeee1aeea0482d69602.png)
- 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:
![изображение](https://community-assets.home-assistant.io/original/3X/f/3/f3e31437da422b226f0e3724817794036a8713d9.png)
- 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"
:
![изображение](https://community-assets.home-assistant.io/original/3X/5/6/56aa513bd384fff846e6627bc574a8c98f752db3.png)
- 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:
![изображение](https://community-assets.home-assistant.io/original/3X/2/0/2091fd0e83e2fc6f4d87fb0bcc8f53a72b1bb19e.png)
- 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:
![изображение](https://community-assets.home-assistant.io/original/3X/0/d/0d8d75ba453512c649760ddfdf0c159ec27d1e4a.png)
- 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:
![изображение](https://community-assets.home-assistant.io/original/3X/0/0/001e0b51179b2b35aeea997de8e45bf67098f047.png)
- 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:
![изображение](https://community-assets.home-assistant.io/original/3X/9/4/94016249dcd26d4fafb468a1b6537444c6bdc0de.png)
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:
![изображение](https://community-assets.home-assistant.io/original/3X/5/6/56f2317fe3a75ff96cf86724bd36d8da217957c0.png)
- 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:
![изображение](https://community-assets.home-assistant.io/original/3X/f/c/fc1611b737471debae2e8c28665f473548910deb.png)
- 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:
![изображение](https://community-assets.home-assistant.io/original/3X/8/2/82154590fb731d9f3d07dbf5bc9c9f3fbcba0305.png)
- 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:
![изображение](https://community-assets.home-assistant.io/original/3X/4/c/4c9ea834c2f5f2d4f287e97304723ae2473fc4bb.png)
- 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:
![изображение](https://community-assets.home-assistant.io/original/3X/b/a/bacf1274e458933642161d232f1a65777f21eb45.png)
- 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:
![image](https://community-assets.home-assistant.io/original/3X/e/c/ec0cbd6bff7608e32b08eec9d1b0aeed0c19fac4.png)
- 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.