Styling elements in Picture elements card: a small tutorial

Share your Projects! Dashboards & Frontend
11

Other styles for “state-badge”:

Example 1 - different styles:
image

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:
image

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":
image

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
2 Likes