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? FANTASTIC POST BY ILDAR…

[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.

[magiva]

does anyone know how to do dynamic values to the state_filter ?

i can set the icon color etc with styles as mentioned above using style css
but i want to se the state_filter saturate and opacity based on computed values

[Ildar_Gabdullin]

@magiva

saturate and opacity

These are same CSS properties and may be changed dynamically by card-mod too.

[magiva]

i dont believe so as card-mod addreses a specific css reference which you cannot apply to state_filter.

[thedjelectron]

I need a little help with this. I am trying to dynamically change my background image based on the state of a boolean. Any advice? I am just getting a black background now.

theme: Backend-selected
title: Home
icon: mdi:flare
type: panel
background: |-
  {%if is_state('input_boolean.gui_msd','on') %}
    center / cover no-repeat url(/local/USS-Camden-MSD-Markers.png) fixed
  {%else %}
    center / cover no-repeat url(/local/USSCamdenNCC-99734-3070x1918.png) fixed
  {%endif%}
visible:
  - user: b1dc9ff152ba40f29bc03d6c23a29459
subview: false
badges: []

[Ildar_Gabdullin]

@thedjelectron

change my background image

This is about changing a background for a view. This thread is about customizing parts of picture-elements card. If you wanna change a view’s background dynamically - consider using a card-mod-theme solution (go to a corresponding thread for details).

[Ildar_Gabdullin]

@magiva

dont believe so as card-mod addreses a specific css reference which you cannot apply to state_filter.

I did not propose using card-mod FOR state_filter.
Define any appropriate styles for any card’s element manually using jinjia.

[Nimrod_Dolev (Nim)]

I know it’s 2 years later, but for anyone else with the same issue, I found a working solution:

I wrapped the picture-elements card inside a config-template-card card:

type: custom:config-template-card
variables:
  PERSON_STATE: state('person.my_person')
entities:
  - person.my_person
card:
  type: picture-elements
  elements:
    - type: state-label
      entity: person.my_person
      style:
        color: "${PERSON_STATE != 'home' ? 'red' : 'white'}"
...