Card-mod usage in vertical-stack-in-card

I found a workaround. If you define it like this it works:

card_mod:
      style: |
        .card-content {
          margin-top: -24px;
        }

But you have to put this card_mod block one level before at „entities“.

Here‘s full yaml definition:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: sensor.temperatursensor_temperatur
        name: Temperatur Küche
      - entity: sensor.temperatursensor_luftfeuchtigkeit
        name: Luftfeuchtigkeit Küche
      - entity: sensor.temperatursensor_batteriestatus
        type: custom:template-entity-row
        name: Batterieladezustand
        state: |
          {% if is_state(config.entity, 'high') %}
            Voll
          {% elif is_state(config.entity, 'middle') %}
            Mittel
          {% elif is_state(config.entity, 'low') %}
            Niedrig      
          {% else %}
            Unbekannt
          {% endif %}
        icon: |
          {% if is_state(config.entity, 'high') %}
            mdi:battery
          {% elif is_state(config.entity, 'middle') %}
            mdi:battery-50
          {% elif is_state(config.entity, 'low') %}
            mdi:battery-10
          {% else %}
            mdi:battery-unknown
          {% endif %}    
        card_mod:
          style:
            div#wrapper: |
              .state {
                color: {{ 'red' if is_state(config.entity, 'low') }};
              }
  - type: entities
    entities:
      - entity: binary_sensor.contact_sensor_tur
        name: Küchenfenster
        type: custom:template-entity-row
        state: |
          {% if is_state(config.entity, 'on') %}
            Geöffnet
          {% else %}
            Geschlossen
          {% endif %}
        icon: |
          {% if is_state(config.entity, 'on') %}
            mdi:window-open-variant
          {% else %}
            mdi:window-closed-variant
          {% endif %}
        secondary: >
          {% set relativeTime = relative_time(
          states.binary_sensor.contact_sensor_tur.last_updated | as_datetime(0))
          %} {% if 'second' in relativeTime %}
            {% set relativeTime = 'einigen Sekunden' %}
          {% endif %} Vor {{ relativeTime | replace("years", "Jahre") |
          replace("months", "Monaten") | replace("days", "Tagen") |
          replace("hours", "Stunden") | replace("minutes", "Minuten") |
          replace("year", "Jahr") | replace("month", "Monat") | replace("day",
          "Tag") | replace("hour", "Stunde") | replace("minute", "Minute") }}
      - entity: sensor.contact_sensor_batterie
        name: Batterie
        card_mod:
          style:
            hui-generic-entity-row $: |
              .state {
                color: {{ 'red' if states(config.entity) | int(default=0) <= 10 }};
              }
  - type: custom:vertical-stack-in-card
    card_mod:
      style: |
        ha-card {
          height: 425px !important;
        }
    cards:
      - type: thermostat
        entity: climate.wifi_smart_trv_3
        name: Heizung Küche
      - type: entities
        entities:
          - entity: sensor.wifi_smart_trv_3_batterie
            name: Batterie
            type: custom:template-entity-row
            card_mod:
              style:
                div#wrapper: |
                  .state {
                    color: {{ 'red' if states(config.entity) | int(default=0) <= 10 }};
                  }
            state: "{{ states(config.entity) | int }} %"
            icon: >
              {% set val = states(config.entity) | int(default=-1) %} {{
              'mdi:battery-unknown' if val < 0 else 'mdi:battery-outline' if val
              < 5 else 'mdi:battery-10' if val < 15 else 'mdi:battery-20' if val
              < 25 else 'mdi:battery-30' if val < 35 else 'mdi:battery-40' if
              val < 45 else 'mdi:battery-50' if val < 55 else 'mdi:battery-60'
              if val < 65 else 'mdi:battery-70' if val < 75 else
              'mdi:battery-80' if val < 85 else 'mdi:battery-90' if val < 95
              else 'mdi:battery' }}
        card_mod:
          style: |
            .card-content {
              margin-top: -24px;
            }

Glad you got it working. The fact that there was a class ‘undefined’ was fixed in v4. The element will now have a correct card_mod class type.

1 Like