Styling elements in Picture elements card: a small tutorial

Share your Projects! Dashboards & Frontend
5

Changing font-size:

This operation may be applied to:

  • state-badge;
  • state-label;
  • service-button.

For “state-badge” & “state-label” the "font-size" style must be used.
For “service-button” - the "--mdc-typography-button-font-size" variable must be used.
Note that changing the font-size for a badge causes a scaling the badge too.
image

type: picture-elements
title: ''
card_mod:
  style: |
    ha-card { height: 320px !important; }
elements:
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 12%
      left: 10%
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 12%
      left: 40%
      font-size: 10px
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 12%
      left: 80%
      font-size: 20px
  - type: state-label
    entity: sensor.cleargrass_1_co2
    style:
      top: 30%
      left: 10%
  - type: state-label
    entity: sensor.cleargrass_1_co2
    style:
      top: 30%
      left: 40%
      font-size: 10px
  - type: state-label
    entity: sensor.cleargrass_1_co2
    style:
      top: 30%
      left: 80%
      font-size: 20px
  - type: service-button
    title: Command
    service: homeassistant.update_entity
    service_data:
      entity_id: sun.sun
    style:
      top: 40%
      left: 10%
  - type: service-button
    title: Command
    service: homeassistant.update_entity
    service_data:
      entity_id: sun.sun
    style:
      top: 40%
      left: 40%
      '--mdc-typography-button-font-size': 10px
  - type: service-button
    title: Command
    service: homeassistant.update_entity
    service_data:
      entity_id: sun.sun
    style:
      top: 40%
      left: 80%
      '--mdc-typography-button-font-size': 20px
image: /local/images/white.jpg
1 Like