Css anchor in card picture-elements

Configuration Frontend
1

:slight_smile: n the code is repeating css parts…
i am trying with anchor but I could noct make it work

type: picture-elements
image: local/png/rollo_uebersicht_v7.png
dark_mode_filter: invert(100%)
elements:
  - type: state-icon
    entity: cover.strasse
    state_color: true
    style:
      top: 76%
      left: 84%
      '--mdc-icon-size': 40px
    card_mod:
      style: |
        state-badge::after {
          content: "{{ (states.cover.strasse.last_changed | as_local).strftime('%d.%m %H:%M') }}"
        }
        state-badge {

          white-space: nowrap;
          display: flex;
          flex-direction: column;
          row-gap: 0px;
          align-items: center;
          font-size: 12px;
          line-height: 0px
        }
  - type: state-icon
    entity: cover.rollo_ecke
    state_color: true
    style:
      top: 27%
      left: 8%
      '--mdc-icon-size': 40px
    card_mod:
      style: |
        state-badge::after {
          content: "{{ (states.cover.rollo_ecke.last_changed | as_local).strftime('%d.%m %H:%M') }}"
        }
        state-badge {

          white-space: nowrap;
          display: flex;
          flex-direction: column;
          row-gap: 0px;
          align-items: center;
          font-size: 12px;
          line-height: 0px
        }
  - type: state-icon
    entity: cover.rollo_mitte_links
    state_color: true
    style:
      top: 27%
      left: 25%
      '--mdc-icon-size': 40px
    card_mod:
      style: |
        state-badge::after {
          content: "{{ (states.cover.rollo_mitte_links.last_changed | as_local).strftime('%d.%m %H:%M') }}"
        }
        state-badge {

          white-space: nowrap;
          display: flex;
          flex-direction: column;
          row-gap: 0px;
          align-items: center;
          font-size: 12px;
          line-height: 0px
        }

I tried this:

type: picture-elements
image: local/png/rollo_uebersicht_v7.png
dark_mode_filter: invert(100%)
elements:
  - type: state-icon
    entity: cover.strasse
    state_color: true
    style:
      top: 76%
      left: 84%
      '--mdc-icon-size': 40px
    card_mod:
      style: &common_style |
        state-badge {
          white-space: nowrap;
          display: flex;
          flex-direction: column;
          row-gap: 0px;
          align-items: center;
          font-size: 12px;
          line-height: 0px;
        }
        state-badge::after {
          content: "{{ (states.cover.strasse.last_changed | as_local).strftime('%d.%m %H:%M') }}"
        }
  - type: state-icon
    entity: cover.rollo_ecke
    state_color: true
    style:
      top: 27%
      left: 8%
      '--mdc-icon-size': 40px
    card_mod:
      style: |
        *common_style
        state-badge::after {
          content: "{{ (states.cover.rollo_ecke.last_changed | as_local).strftime('%d.%m %H:%M') }}"
        }
  - type: state-icon
    entity: cover.rollo_mitte_links
    state_color: true
    style:
      top: 27%
      left: 25%
      '--mdc-icon-size': 40px
    card_mod:
      style: |
        *common_style
        state-badge::after {
          content: "{{ (states.cover.rollo_mitte_links.last_changed | as_local).strftime('%d.%m %H:%M') }}"
        }

Do you have a hint what way should I go to replace the repeated elements?

Chatgpt proposes a nice looking version (only one problem it does not work -:))

type: picture-elements
image: local/png/rollo_uebersicht_v7.png
dark_mode_filter: invert(100%)
elements:
  {% set common_style = {
    'color': 'grey',
    'white-space': 'nowrap',
    'display': 'flex',
    'flex-direction': 'column',
    'row-gap': '0px',
    'align-items': 'center',
    'font-size': '12px',
    'line-height': '0px'
  } %}
  {% set common_card_mod_style = common_style | map('join', ': ') | join('; ') %}
  {% set icon_style = {
    'top': '%%%',
    'left': '%%%',
    '--mdc-icon-size': '40px'
  } %}
  
  {% set entities = [
    {'entity': 'cover.strasse', 'top': '76%', 'left': '84%'},
    {'entity': 'cover.rollo_ecke', 'top': '27%', 'left': '8%'},
    {'entity': 'cover.rollo_mitte_links', 'top': '27%', 'left': '25%'}
  ] %}
  
  {% for item in entities %}
  - type: state-icon
    entity: {{ item.entity }}
    state_color: true
    style:
      top: {{ item.top }}
      left: {{ item.left }}
      '--mdc-icon-size': 40px
    card_mod:
      style: |
        state-badge::after {
          content: "{{ (states['{{ item.entity }}'].last_changed | as_local).strftime('%d.%m %H:%M') }}"
        }
        state-badge {
          {{ common_card_mod_style }}
        }
  {% endfor %}
2

Because this SEEMS like a lovelace_gen code (& not sure that it is a correct code) - and this need a lovelace_gen plugin being installed & properly used.

Am I the only person who is irritated by “Chatgpt proposes” words?..

3

Wrong use of anchor.
You cannot a substitute a PART of a string (which here a card-mod code is).

Correct use:

card_mod:
  style: &ref_anchor |
    xxx {....}
    yyy {....}
...
card_mod:
  style: *ref_anchor

card_mod:
  style:
    xxx $: &ref_anchor_1 |
      xxx {....}
    .: &ref_anchor_2 |
      yyy {....}
...
card_mod:
  style:
    xxx $: *ref_anchor_1
    .: *ref_anchor_2
4

Sorry have not understood the anchor system , although reading thru many hints…
where do I define the anchor?
what do you mean with xxx und yyyy?
Should it be something like that?

  - type: state-icon
    entity: cover.strasse
    state_color: true
    style:
      top: 76%
      left: 84%
      '--mdc-icon-size': 40px
    card_mod:
      style: &ref_anchor |
      xxx {....}
      yyy {....}
5
  1. Check this.
  2. xxx, yyy - could be anything.
1 Like
6

Thanks for the hint. one step forward!
But still I cannot solve it:

  - type: state-icon
    entity: cover.strasse
    state_color: true
    style:
      top: 76%
      left: 84%
      '--mdc-icon-size': 40px
    card_mod:
      style: &anchor |
        state-badge::after {
          content: "{{ (states.cover.strasse.last_changed 
          | as_local).strftime('%d.%m %H:%M') }}"
        }
        state-badge {
          white-space: nowrap;
          display: flex;
        }
  - type: state-icon
    entity: cover.rollo_ecke
    state_color: true
    style:
      top: 27%
      left: 8%
      '--mdc-icon-size': 40px
    card_mod:
      style: *anchor

the definition for state-badge::after ist different for each entity

        state-badge::after {
          content: "{{ (states.cover.strasse.last_changed 
          | as_local).strftime('%d.%m %H:%M') }}"
        }

how can I separate the after section from state-badge?
what is my mistake?

      style: |
        state-badge::after {
          content: "{{ (states.cover.strasse.last_changed 
          | as_local).strftime('%d.%m %H:%M') }}"
        } 
        &anchor |
        state-badge {
          white-space: nowrap;

" Merging while defining." sounds good to have only one anchor for all and pass states.cover.strasse.last_changed as variable … but I do not understand where do I define the variables?

7

Works in SOME cards like Entities, Glance, Picture elements:

type: entities
entities:
  - entity: sensor.abc
    card_mod:
      style: |
        xxx {
          {% if states(config.entity) == ... -%}
            ...
          {%- endif %}
        }
  - entity: sensor.def
    card_mod:
      style: |
        xxx {
          {% if states(config.entity) == ... -%}
            ...
          {%- endif %}
        }

where “config.entity” - entity_id of THIS element.
Means: if styles are same - you can use a yaml-anchor.

See more here: huge-card-mod thread → 1st post → link at the bottom
Besides, suggest to ask any card-mod-related questions in THAT thread instead of creating your own.

8

sorry - you are right I will switch to card-mod threat…