I’m sure card-mod will be able to do what you’re looking to do.
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...
1 Like
@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?
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.
I was able to get this to work with a picture-elements card by removing the quotation marks from thomasloven’s example, as follows:
1 Like
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%}
}
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
Start with a correct syntax:
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
You are mixing 2 different styles:
Now your stock picture-elements styling stopped working since you moved it inside card_mod section.
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
These are same CSS properties and may be changed dynamically by card-mod too.
i dont believe so as card-mod addreses a specific css reference which you cannot apply to state_filter.
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: []
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).
1 Like
I did not propose using card-mod FOR state_filter.
Define any appropriate styles for any card’s element manually using jinjia.
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'}"
...
Never ever place whole picture elements card into config-template-card (CTC), place only an element into CTC.
Could you please elaborate as to why this should never be done?
1 Like
On every change of monitored entities the whole inserted card is redrawn.
If you have 10 elements and CTC is used just for one - all 10 elements will be redrawn.