CSS styling with '|' in picture elements

Configuration Frontend
#1

Hey there, I’m in need of some help with CSS styling in the picture elements card. Here is a snippet of my card

type: picture-elements
elements:
  - type: state-badge
    title: null
    color: transparent
    entity: sensor.dining_room_motion_detector_temperature
    style: |
      .element {
        top: 40%
        left: 64%
        background-color: blue
      }
  - type: state-badge
    title: null
    color: transparent
    entity: sensor.dining_room_motion_detector_temperature
    style:
      top: 40%
      left: 64%
      background-color: blue

I can get the second half to work the way I want, but the first element doesn’t work. How does the bar (’|’) work in Home Assistant/CSS because I have no idea what to even look for.

#2

The | is part of yaml. Have a go at the demo here:

https://yaml-multiline.info/

#3

While it will be helpful for you to understand the basics of yaml formatting, the question you are also asking is why the style formatting doesn’t appear to be working in the first example. Sorry if this goes over stuff you already know.

The picture-elements card is one of the few core Lovelace cards that allows a certain amount of CSS styling to be applied to the elements on the card, set out the way you have done in the second example, presumably because you followed the guide.

The format you are using for the first example that isn’t working belongs to Thomas Loven’s custom card card-mod, which you will need to have installed.

You can still apply card-mod styling to the picture-elements card, but only for certain aspects of it. There’s an excellent guide from forum user Ildar_Gabdullin to mixing core CSS styling with card-mod CSS styling here.

I would highly recommend all his posts on using card-mod by the way.

1 Like
#4

There is one more good tutorial for Picture elements card - styling WITHOUT using card-mod.