Styling elements in Picture elements card: a small tutorial

Resizing icons:

Resizing may be done by using a "--mdc-icon-size" variable.
This method may be applied to:

  • state-icon;
  • icon.

image

type: picture-elements
title: ''
style: |
  ha-card { height: 200px !important; }
elements:
  - type: state-icon
    entity: sensor.cleargrass_1_co2
    style:
      top: 8%
      left: 10%
  - type: state-icon
    entity: sensor.cleargrass_1_co2
    style:
      top: 8%
      left: 45%
      '--mdc-icon-size': 10px
  - type: state-icon
    entity: sensor.cleargrass_1_co2
    style:
      top: 8%
      left: 80%
      '--mdc-icon-size': 40px
  - type: icon
    icon: mdi:car
    style:
      top: 21%
      left: 10%
  - type: icon
    icon: mdi:car
    style:
      top: 21%
      left: 45%
      '--mdc-icon-size': 10px
  - type: icon
    icon: mdi:car
    style:
      top: 21%
      left: 80%
      '--mdc-icon-size': 40px
image: /local/images/white.jpg

Resizing a badge:

Resizing may be done by using a "--ha-label-badge-size" variable.
Note that this does not affect font-size.
image

type: picture-elements
title: ''
style: |
  ha-card { height: 150px !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: 45%
      '--ha-label-badge-size': 35px
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 12%
      left: 80%
      '--ha-label-badge-size': 80px
image: /local/images/white.jpg

Other styles for “state-label”:

  • displaying prefix & suffix;
  • displaying entity’s attribute;
  • colored text.

image

type: picture-elements
style: |
  ha-card {
    height: 80px !important;
  }
elements:
  - type: state-label
    entity: sun.sun
    style:
      top: 8%
      left: 15%
  - type: state-label
    entity: sun.sun
    prefix: '{ '
    suffix: ' }'
    style:
      top: 18%
      left: 15%
  - type: state-label
    entity: sun.sun
    style:
      top: 8%
      left: 80%
      color: orange
  - type: state-label
    entity: sun.sun
    attribute: elevation
    style:
      top: 18%
      left: 80%
image: /local/images/blue.jpg

Other styles for “state-icon” & “icon”:

  • colored icon.

The “state-icon” element MUST be associated with some entity, the “icon” element - MAY be associated.

state-icon:
By default for entities like "sensor" (same for "device_tracker", "person", "zone", …) an icon’s color for the “state-icon” does not depend on the entity’s state.
The "--paper-item-icon-color" variable is used to change a color:
image

type: picture-elements
style: |
  ha-card {
    height: 70px !important;
  }
elements:
  - type: state-icon
    entity: sensor.cleargrass_1_co2
    style:
      top: 6%
      left: 10%
  - type: state-icon
    entity: sensor.cleargrass_1_co2
    style:
      top: 6%
      left: 40%
      '--paper-item-icon-color': red
image: /local/images/white.jpg

By default for entities like "binary_sensor", "sun.sun", "switch", "input_boolean" an icon’s color for the “state-icon” DOES depend on the entity’s state - if the property "state_color: true" is set for the element. If it is set to "false", then the color DOES NOT depend on the state.
The "--paper-item-icon-active-color" & "--paper-item-icon-color" variables are used to change a color.
The "--paper-item-icon-active-color" variable affects on color if the property "state_color: true" is set for the element.
The 1st row on the picture below is for "state_color: true", the 2nd row - for "state_color: false".
image

type: picture-elements
style: |
  ha-card {
    height: 170px !important;
  }
elements:
  - type: state-icon
    entity: binary_sensor.service_on_value
    state_color: true
    style:
      top: 6%
      left: 10%
  - type: state-icon
    entity: binary_sensor.service_on_value
    state_color: true
    style:
      top: 6%
      left: 35%
      '--paper-item-icon-active-color': red
      '--paper-item-icon-color': cyan
  - type: state-icon
    entity: binary_sensor.service_off_value
    state_color: true
    style:
      top: 6%
      left: 65%
  - type: state-icon
    entity: binary_sensor.service_off_value
    state_color: true
    style:
      top: 6%
      left: 90%
      '--paper-item-icon-active-color': red
      '--paper-item-icon-color': cyan
  - type: state-icon
    entity: binary_sensor.service_on_value
    state_color: false
    style:
      top: 20%
      left: 10%
  - type: state-icon
    entity: binary_sensor.service_on_value
    state_color: false
    style:
      top: 20%
      left: 35%
      '--paper-item-icon-active-color': red
      '--paper-item-icon-color': cyan
  - type: state-icon
    entity: binary_sensor.service_off_value
    state_color: false
    style:
      top: 20%
      left: 65%
  - type: state-icon
    entity: binary_sensor.service_off_value
    state_color: false
    style:
      top: 20%
      left: 90%
      '--paper-item-icon-active-color': red
      '--paper-item-icon-color': cyan
image: /local/images/white.jpg

icon:
The "color" CSS property is used to change an icon’s color:
image

type: picture-elements
style: |
  ha-card {
    height: 70px !important;
  }
elements:
  - type: icon
    icon: mdi:car
    style:
      top: 6%
      left: 10%
  - type: icon
    icon: mdi:car
    style:
      top: 6%
      left: 40%
      color: red
image: /local/images/white.jpg

Other styles for “service-button”:

Some styles may be changed:
image

type: picture-elements
style: |
  ha-card {
    height: 70px !important;
  }
elements:
  - type: service-button
    title: Command
    service: homeassistant.update_entity
    service_data:
      entity_id: sun.sun
    style:
      top: 6%
      left: 15%
  - type: service-button
    title: Command
    service: homeassistant.update_entity
    service_data:
      entity_id: sun.sun
    style:
      top: 6%
      left: 70%
      --mdc-theme-primary: red
      background: rgb(220,220,220)
      border: 1px solid black
      border-radius: 5px
image: /local/images/white.jpg

Other styles for “service-badge”:

Example 1 - different styles:
image

type: picture-elements
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
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
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

Other styles for “image”:

image

type: picture-elements
title: ''
style: |
  ha-card {
    height: 280px !important;
  }
elements:
  - type: image
    image: /local/images/small_pic.jpg
    style:
      top: 10%
      left: 20%
      transform: translate(-50%,-50%) scale(2,2)
  - type: image
    image: /local/images/small_pic.jpg
    style:
      top: 10%
      left: 70%
      filter: saturate(0.1)
      transform: translate(-50%,-50%) scale(2,2)
  - type: image
    image: /local/images/small_pic.jpg
    style:
      top: 30%
      left: 20%
      filter: invert(100%)
      transform: translate(-50%,-50%) scale(2,2)
  - type: image
    image: /local/images/small_pic.jpg
    style:
      top: 30%
      left: 70%
      border: 1px solid black
      transform: translate(-50%,-50%) scale(2,2)
image: /local/images/white.jpg

Conditional styles:

Styles can be set dynamically dependingly on some conditions (like some entity’s state) with the help of "card-mod":


type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_boolean.test_boolean
  - type: picture-elements
    style: |
      ha-card {
        {% if is_state('input_boolean.test_boolean','on') %}
        --my-state-color: magenta;
        --my-transform-style: translate(-50%,-50%) rotate(-0.25turn);
        {% else %}
        --my-state-color: cyan;
        --my-transform-style: translate(-50%,-50%)
        {% endif %}
      }
    elements:
      - type: state-badge
        entity: sensor.cleargrass_1_co2
        style:
          top: 8%
          left: 20%
          '--label-badge-background-color': var(--my-state-color)
          transform: var(--my-transform-style)
      - type: state-icon
        entity: sensor.cleargrass_1_co2
        style:
          top: 28%
          left: 20%
          '--paper-item-icon-color': var(--my-state-color)
          transform: var(--my-transform-style)
      - type: icon
        icon: mdi:car
        style:
          top: 38%
          left: 20%
          color: var(--my-state-color)
          transform: var(--my-transform-style)
      - type: state-label
        entity: sensor.cleargrass_1_co2
        style:
          top: 52%
          left: 20%
          color: var(--my-state-color)
          transform: var(--my-transform-style)
      - type: service-button
        title: Command
        service: homeassistant.update_entity
        service_data:
          entity_id: sun.sun
        style:
          top: 70%
          left: 20%
          '--mdc-theme-primary': var(--my-state-color)
          transform: var(--my-transform-style)
      - type: image
        image: /local/images/small_pic.jpg
        style:
          top: 90%
          left: 20%
          transform: var(--my-transform-style)
    image: /local/images/white.jpg

Changing Z-order for elements:

By default elements have a Z-index in accordance to the order they are defined in a card.
The example below has one “image” element, some “state-label” elements, some “icon” elements.
Some elements are overlapped by the “image” element by default.
The "z-index" property may be used to change a Z-index:
image

type: picture-elements
style: |
  ha-card {
    height: 150px !important;
  }
elements:
  - type: icon
    icon: mdi:car
    style:
      top: 10%
      left: 10%
  - type: icon
    icon: mdi:car
    style:
      top: 10%
      left: 40%
      z-index: 999
  - type: state-label
    entity: sun.sun
    style:
      top: 35%
      left: 20%
  - type: state-label
    entity: sun.sun
    style:
      top: 40%
      left: 20%
      z-index: 999
  - type: image
    image: /local/images/pink_mask.png
    style:
      top: 0%
      left: 0%
  - type: icon
    icon: mdi:car
    style:
      top: 10%
      left: 20%
  - type: state-label
    entity: sun.sun
    style:
      top: 30%
      left: 20%
image: /local/images/blue.jpg

Styling custom cards inside the Picture elements card:

Example 1 - toggle-entity row:
image

type: picture-elements
style: |
  ha-card {
    height: 250px !important;
  }
elements:
  - type: custom:hui-element
    row_type: toggle-entity
    entity: input_boolean.test_boolean
    name: Some toggle (default style)
    style:
      top: 0%
      left: 0%
      transform: translate(0,0)
  - type: custom:hui-element
    row_type: toggle-entity
    entity: input_boolean.test_boolean
    name: Some toggle
    style:
      top: 14%
      left: 0%
      transform: translate(0,0)
      width: 250px
      '--paper-item-icon-color': magenta
      color: cyan
  - type: custom:hui-element
    row_type: toggle-entity
    entity: input_boolean.test_boolean
    name: Some toggle
    style:
      top: 21%
      left: 0%
      transform: translate(0,0)
      width: 250px
      '--paper-item-icon-color': green
      color: orange
  - type: custom:hui-element
    row_type: toggle-entity
    entity: input_boolean.test_boolean
    name: Some toggle
    style:
      top: 28%
      left: 0%
      transform: translate(0,0)
      width: 250px
      '--paper-item-icon-color': red
      color: magenta
      '--switch-unchecked-track-color': lightgreen
      '--switch-checked-track-color': cyan
      '--switch-unchecked-button-color': red
      '--switch-checked-button-color': green
image: /local/images/white.jpg

Example 2 - Glance card:
image

type: picture-elements
style: |
  ha-card {
    height: 450px !important;
  }
elements:
  - type: custom:hui-element
    card_type: glance
    entities:
      - entity: sensor.cleargrass_1_co2
      - entity: sensor.cleargrass_1_co2
    name: Some toggle (default style)
    style:
      top: 10%
      left: 10%
      transform: translate(0,0)
      '--paper-item-icon-color': red
      '--ha-card-background': rgba(0,100,0,0.8)
      '--ha-card-border-radius': 14px
  - type: custom:hui-element
    card_type: glance
    entities:
      - entity: sensor.cleargrass_1_co2
      - entity: sensor.cleargrass_1_co2
    name: Some toggle (default style)
    style:
      top: 60%
      left: 10%
      transform: translate(0,0)
      '--paper-item-icon-color': red
      '--ha-card-background': rgba(0,0,0,0)
      background-image: url("/local/images/blue_low_2.jpg")
      background-size: 100% 100%
image: /local/images/pink.jpg

Example 3 - Entities card:

type: picture-elements
style: |
  ha-card {
    height: 250px !important;
  }
elements:
  - type: custom:hui-element
    card_type: entities
    entities:
      - entity: input_boolean.test_boolean
        name: Some toogle
      - entity: input_number.test_number
        name: Some silder
    style:
      top: 5%
      left: 5%
      transform: translate(0,0)
      '--paper-item-icon-color': red
      '--ha-card-background': rgba(0,0,255,0.1)
      '--ha-card-border-radius': 14px
      width: 400px
      --primary-text-color: orange
image: /local/images/white.jpg

reserved post 13

reserved post 14

reserved post 15

reserved post 16

reserved post 17

reserved post 18

reserved post 19

reserved post 20

Awesome, i really appretiate your work here!:):

Does anyonne know how to make the hitbox of the icons bigger and how to remove the shadow of the picturelement?
I want to get rid of the black line at the bottom.
image

type: picture-elements
elements:
  - type: icon
    icon: mdi:chevron-up
    tap_action:
      action: call-service
      service: script.fernseher_up
    style:
      top: 18%
      left: 50%
      transform: translate(-50%, -50%) scale(2, 2)