What conditional element do you mean, show a code with a conditional element with a failed attempt to use card-mod.
Anyway, check possible solutions (and a related glitch as well) for styling a conditional element in picture-elements: go to huge card-mod thread → 1st post → link at the bottom → styles for picture-elements.
Do you have a “width” properly scaled on different viewports?
Yes since width is a % of the overall picture element it scales with the picture.
It works with card mod- it doesn’t work if I used the picure-element conditional (at least not consistently), but only for boolean helpers, using conditional for things like switches work fine.
I see no difference when using a conditional element with any entity domains.
Have already proposed you to post a faulty code, you ignored it.
This doesn’t work - it’s always positioned at bottom left.
- type: conditional
conditions:
- entity: input_boolean.show_people
state: 'on'
elements:
- type: image
image: /local/images/jpp-hat.jpeg
style:
width: 3%
min-width: 20px
transform: translate(-50%,-50%)
card_mod:
style: |
:host {
border-radius: 50%;
border: 2px solid red;
left: {{ state_attr('device_tracker.john_s_watch','x') | float * 2.377 + 8 }}%;
top: {{ 56 -(state_attr('device_tracker.john_s_watch','y') | float * 3.688) }}%
}
this works - the image moves with the device tracker position from ESPresence Helper.
- type: image
image: /local/images/jpp-hat.jpeg
style:
width: 3%
min-width: 20px
transform: translate(-50%,-50%)
card_mod:
style: |
:host {
{% if states('input_boolean.show_people') == 'off'
or
states('device_tracker.john_s_watch') == 'not_home'
%}
display: none;
{% endif %}
border-radius: 50%;
border: 2px solid red;
left: {{ state_attr('device_tracker.john_s_watch','x') | float * 2.377 + 8 }}%;
top: {{ 56 -(state_attr('device_tracker.john_s_watch','y') | float * 3.688) }}%
}
The latter point:
Also:
4. Assume you need to mass-style many elements: all “state-badge” elements must have a red background. Then use card-mod to define a corr. CSS variable on a card’s level - then elements will use this changed variable automatically.
5. If you need to style many elements similarly (if it cannot be achieved in pt. 4) - it may be done either on an element’s level by using yaml-anchors for repeating code (see pts. 1,3 above) or it may be done on a card’s level (need to define DOM paths to each element; a bit cumbersome; could be unstable).
Is there a way for the picture elements suffix to appear below the entity?
I have tried using a
with the suffix but this does not work.
Show your attempt.
Picture Elements, multiple state images, (on, off, “partial-on”)
I’ve been playing around with picture elements and I could get the ON and OFF states to load specific images, I’m curious to know if it’s possible to load a third state for a light group if: “not all of them are ON”
So if a light group has 3 lights:
State ON = all 3 lights ON
State OFF = all 3 lights OFF
State “partial-on” ( not sure what to call this yet) = 1 or 2 lights are ON
Thanks for your help!
What option of Picture elements are you talking about?
Post a code of your attempt.
hi thanks btw!
here is an example of what I currently have, these are group lights (all on)
this is what they look like when they are all off:
I’ve been toying with the idea of creating a third state when only some of the lights are ON/OFF in a group, then it would load another type of image, and that state would be like this:
(not sure when yet what I want to call this state yet, something more logical than “partially-on”)
here’s my current code for ON / OFF that’s working fine for me, example is the Upstairs light group.
type: picture-elements
elements:
- type: image
image: /local/images/badges/overview-up-active.svg?v=3
entity: light.all_upstairs_lights
tap_action:
action: toggle
state_image:
'off': /local/images/badges/overview-up-inactive.svg?v=3
style:
left: 18.86%
top: 27.86%
transform: translate(0%, 0%)
width: 21.13%
A usual way for tri-state condition: use a template sensor to keep this state.
is there an easy way to write a new undefined state for any light group that only some of the lights are on/off? this whole templating code in homeassistant is way over my head and can’t quite grasp how to create it 
So I was able to finally make this happen, but it required a whole bunch of modifications. I basically got a sensor template recommended by chatGPT and downloaded browsermod plugin to customize the hold action. Also added some animations.
Video demo:
This no longer works. Something recently changed.
style: |
ha-card { height: 150px !important; }
Starting from card-mod 3.4.0 it must be:
...other options...
card_mod:
style: |
ha-card { height: 150px !important; }
...other options...
i.e. the “card_mod” keyword introduced in ver. 3 became MANDATORY.
I should have done a little more research before I posted. I just found that out and was on my way back to edit my post but you had already commented. Thanks though.
For experienced users who deal with card-mod for some time, a necessity to add the “card_mod” keyword is obvious.
Earlier a card-mod code usually worked w/o that “card_mod” keyword (it was only crucial for styling elements inside picture-elements card). But adding the “card_mod” keyword was recommended as a “good practice” for future compatibility.
That is why in Community (like this dedicated card-mod thread) people may find plenty of card-mod examples w/o this “card_mod” keyword; many of these examples may still work with added “card_mod” keyword (with a proper indentation).
I would like to embed cards saved in yaml, but I don’t understand how to insert the style properties to position it, and maybe also some css via card_mod.
that’s what I thought but it doesn’t work.
- type: picture-elements
image: /local/floorplan/out giorno.png
elements:
- !include /config/tablet/pozzetto_cancello.yaml
the card accepts it and places it in the lower left corner.
the next step I would like to take would be the one written above.
- type: picture-elements
image: /local/floorplan/out giorno.png
elements:
- !include /config/tablet/pozzetto_cancello.yaml
# possible codes
style:
top: 50%
left: 50%
card_mod:
style: |
ha-card {
background: rgba(255, 0, 0, 0.01);
}
I wonder if there is a way?
thanks
You cannot use !include this way. May be used for a whole dictionary or a list.