Other styles for “state-badge”:
Example 1 - different styles:
type: picture-elements
card_mod:
style: |
ha-card { height: 140px !important; }
elements:
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 10%
left: 10%
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
color: orange
'--label-badge-text-color': magenta
'--label-badge-red': green
'--label-badge-background-color': yellow
'--ha-label-badge-label-color': blue
'--ha-label-badge-size': 75px
'--ha-label-badge-title-width': 150px
'--ha-label-badge-title-font-size': 20px
top: 10%
left: 40%
- type: state-badge
entity: binary_sensor.updater
style:
top: 10%
left: 70%
- type: state-badge
entity: binary_sensor.updater
style:
top: 10%
left: 90%
color: orange
'--label-badge-text-color': magenta
'--label-badge-blue': green
'--label-badge-background-color': yellow
'--ha-label-badge-size': 35px
'--mdc-icon-size': 29px
'--ha-label-badge-title-font-size': 10px
image: /local/images/white.jpg
Example 2 - hidden label:
type: picture-elements
card_mod:
style: |
ha-card { height: 120px !important; }
elements:
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 10%
left: 10%
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
color: transparent
top: 10%
left: 40%
image: /local/images/white.jpg
Example 3 - playing with "background-color"
& "opacity"
:
type: picture-elements
card_mod:
style: |
ha-card { height: 120px !important; }
elements:
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 10%
left: 10%
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 10%
left: 30%
opacity: 0.3
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 10%
left: 50%
background-color: rgb(0, 128, 0)
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 10%
left: 70%
background-color: rgb(0, 128, 0)
opacity: 0.3
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 10%
left: 90%
background-color: rgba(0, 128, 0, 0.3)
image: /local/images/white.jpg