State based styling in picture-elements

[Devqon (Sander)]

Is it possible to do styling on the elements in the picture-elements lovelace card based on the state of an entity?

See below example, I want the state-label to be red when the state is not equal to ‘home’.
This question is also for the image, because it only supports ‘state_filter’, where I need a ‘state_not_filter’ or something like that:

        - type: picture-elements
          style:
            overflow: hidden
          image: /local/images/my_person.png
          elements:
            # Image
            - type: image
              entity: person.my_person
              image: /local/images/my_person.png
              tap_action:
                action: more-info
              state_filter:
                "not_home": blur(5px)
            # State Label
            - type: state-label
              entity: person.my_person
              style:
                left: 0
                bottom: 0
                pointer-events: none
                font-size: 16px
                line-height: 24px
                color: white
                background-color: rgba(0, 0, 0, 0.3)
                width: 100%
                transform: initial
                padding: 0 8px

[jparthum (Jason Parthum)]

I use a conditional-element for situations like this.

It’s a little more cumbersome but also very flexible.

[Devqon (Sander)]

Yeah I have thought of that option, but as you said it is pretty cumbersome with a lot of duplicate configuration which I would like to avoid where I can

[Jer78 (Jeremy Percival)]

I’m sure card-mod will be able to do what you’re looking to do.

Card-mod - Add css styles to any lovelace card

This is not a custom card. Instead it’s a plugin which changes the way all other cards work How about this? type: entities style: | ha-card { color: red; } entities: - light.bed_light - light.ceiling_lights - light.kitchen_lights [51] Not a custom: in sight. Or this? [mov] (Please click this gif to open it. It seems to be prone to artifacting when compressed) Or how about changing what happens when you click the name or icon in an entities-card?

[thomasloven (Thomas Lovén)]

It can, but it’s a bit tricky.

You can’t just apply styes to elements, because lovelace does that by itself, and I don’t want to mess anything up with card-mod.
However, you can define a css variable on the elements card, and use that in the element style definition.

type: picture-elements
style: |
  ha-card {
    --state-color: "{%if is_state('person.my_person','home')%}white{%endif%}"
  }
elements:
  - type: state-label
    style:
      color: var(--state-color, red)
      ...etc...

[Devqon (Sander)]

@thomasloven thank you your solution got me on the right track. There was only one weird thing that I don’t understand. This doesn’t work:

    - type: horizontal-stack
      cards:
        - type: picture-elements
          style: |
            ha-card {
              --state-color: "{%if is_state('person.my_person','home')%}white{%endif%}"
            }
        ...etc

But this does:

    - type: horizontal-stack
      style: |
        ha-card {
          --state-color: "{%if is_state('person.my_person','home')%}white{%endif%}"
        }
      cards:
        - type: picture-elements
        ...etc

Note te placement of the style element. It only seems to work on the horizontal-stack, but not on the picture-elements card. When it is on the picture-elements card however, I do see a quick red flash but then it becomes the default color.

Any idea why?