Picture-elements card and card_mod

Configuration Frontend
1

I’m not able to change the color of a label-element using card_mod when the element is defined inside a conditional element (see example below).

Can someone let me know if there is something wrong?

image
image710×626 22.3 KB

type: picture-elements
image: /local/plans/Blank.png
elements:
  - type: state-label
    entity: input_boolean.arm_alarm
    icon: mdi:alarm-light-outline
    style:
      top: 5%
      left: 15%
    card_mod:
      style: |
        :host {
          color:
              red
  - type: conditional
    conditions:
      - entity: input_boolean.view_alarm
        state: "off"
    elements:
      - type: state-label
        entity: input_boolean.arm_alarm
        style:
          top: 15%
          left: 15%
        card_mod:
          style: |
            :host {
              color:
                  red
# End of code
2

Described here: main card-mod thread - 1st post - fantastic link at the bottom - picture elements. In short - the style must be applied to a conditional element part, not to a “sub” element.

3

Thanks, I tried multiple solution but none is working well. It seems the same style is applied to all the conditional elements.

image
image191×140 2.92 KB

type: picture-elements
image: /local/plans/Blank.png
elements:
  - type: state-label
    entity: input_boolean.view_temperature
    icon: mdi:alarm-light-outline
    style:
      top: 5%
      left: 15%
    card_mod:
      style: |
        :host {
          color:
              red
  - type: state-label
    entity: input_boolean.view_temperature
    icon: mdi:alarm-light-outline
    style:
      top: 10%
      left: 15%
    card_mod:
      style: |
        :host {
          color:
              grey
  - type: conditional
    conditions:
      - entity: input_boolean.view_light
        state: "off"
    elements:
      - type: state-label
        entity: input_boolean.view_light
        style:
          top: 15%
          left: 15%
  - type: conditional
    conditions:
      - entity: input_boolean.view_temperature
        state: "off"
    card_mod:
      style: |
        ha-card {
          color: green;
        }
    elements:
      - type: state-label
        entity: input_boolean.view_temperature
        style:
          top: 20%
          left: 15%
  - type: conditional
    conditions:
      - entity: input_boolean.view_humidity
        state: "off"
    card_mod:
      style: |
        ha-card {
          color: blue;
        }
    elements:
      - type: state-label
        entity: input_boolean.view_humidity
        style:
          top: 25%
          left: 15%
4

The posted code is definitely not the same that was proposed in the mentioned tutorial.

5

Which tutorial are you refering to? I’m not a frontend/UI expert, additional tips could be useful either to identify errors or solve them.

6

A path to a post with working examples was posted above.

7

Sorry I didn’t understand main card-mod thread - 1st post - fantastic link at the bottom - picture elements was refering to

thanks for you awesome examples with a specific section for picture-element and many others, I should find my answer now :wink:

1 Like