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?

[AdmiralStipe]

Hey, did you solve this one? I’m having the same trouble too, it doesn’t seem to work on picture-elements card. For me it doesnt even flash, it just remains default color.

[JGKarlin]

I was able to get this to work with a picture-elements card by removing the quotation marks from thomasloven’s example, as follows:

@thomasloven

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

[nasgul]

I am playing with a similar thing but the style preperty is not accepted on the card level:

      - type: picture-elements
        image: /local/img/salonmeubleonly.png?V1
        style: |            **Property style is not allowed**
          ha-card {
            --state-color: {%if is_state('person.my_person','home')%}white{%endif%}
          }

[pxuxmxa]

Can’t tweak the color change based on the value in picture-elements. In type: entities, everything works. help me please

elements:
  - entity: sensor.purifier_air_quality
    style:
      card_mod:
      color: >
            {% if states(config.entity) | int <= 2 %} 
              green
            {% elif states(config.entity) | int <= 4 %}
              greenyellow
            {% elif states(config.entity) | int <= 7 %}
              yellow
            {% elif states(config.entity) | int <= 9 %}
              orange
            {% elif states(config.entity) | int <= 12 %}
              red
            {% endif %}
      font-family: Trebuchet MS
      font-size: 500%
      font-weight: bold
      left: 45%
      opacity: 1
      pointer-events: none
      text-shadow: 1px 1px black
      top: 50%
      transform: translate(-20%,-50%)
    type: state-label
image: /local/ac3829_10.png
type: picture-elements

[Ildar_Gabdullin]

@pxuxmxa

    style:
      card_mod:

Start with a correct syntax:

card_mod:
  style:
    ...

[pxuxmxa]

@Ildar_Gabdullin

card_mod:
  style:

Thank you! Stupid error! But it didn’t help. Now the value is not displayed at all
I’m a beginner, apparently I’m doing something wrong

[Ildar_Gabdullin]

You are mixing 2 different styles:

• card-mod styling
• stock picture-elements styling

Now your stock picture-elements styling stopped working since you moved it inside card_mod section.