Styling elements in Picture elements card: a small tutorial

Share your Projects! Dashboards & Frontend
145
  1. You are using card-mod for styling a conditional element in a wrong way. Check the link I gave earlier (card-mod thread → …).
  2. Strongly suggest you to not use card-mod to style an element if it may be done by a native “style” option.

The latter point:

  1. Assume you need to style some sub-element inside an element (for instance, a background of “span” UoM part of “state-badge”). It may be only done by card-mod.
  2. Assume you need to colorize a “state-label” dynamically. Set a “color” property inside a native “style” option to some CSS variable - which is set by card-mod (i.e. card-mod is only used to set a variable).
  3. Assume you need to define an animation for some element. It may be only done by card-mod.

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

1 Like
146

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.

147

Show your attempt.

148

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!

149

What option of Picture elements are you talking about?
Post a code of your attempt.

150

hi thanks btw!

here is an example of what I currently have, these are group lights (all on)
Overview-All-On

this is what they look like when they are all off:
Overview-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:
Overview-Partially-On
(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%
151

A usual way for tri-state condition: use a template sensor to keep this state.

152

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 :confused:

153

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:

1 Like
154

This no longer works. Something recently changed.

    style: |
      ha-card { height: 150px !important; }
155

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.

1 Like
156

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.

1 Like
157

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

158

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

159

You cannot use !include this way. May be used for a whole dictionary or a list.

160

Thanks for the reply.
but unfortunately it is not clear to me where I could use it and I try to do some research.
But is there a way to recall the same cards in different picture elements, or do I have to rewrite the code completely?

161

This is an off-topic here. Please create a separate thread.
In short:

some_list:
  - !include dict.yaml
  - !include dict.yaml
  - !include dict.yaml

some_list: !include list.yaml

some_dict: !include dict.yaml

where:
dict.yaml is

xxx: xxx
xxx: xxx
xxx: xxx

list.yaml is

- xxx: xxx
- xxx: xxx
  yyy: yyy
- xxx: xxx
162

Thanks, I didn’t mean to be off topic.
My problem is that I can’t style an “include”, which I thought could be done.
Thanks

163

It’s OK. If you need to continue discussing any “!include” issues in another thread, you are welcome to ping me there (by @).

2 Likes
164

Hi,

is it possible to truncate state-label (like long error messages or long status information) within picture elements card

thank you