Stack-In-Card: Drop-in replacement for vertical-stack-in-card

Hi, I already was able to add custom cards together in one stack, but for some reason it will not work with these two cards, can someone help me with this please?

Thanks!

image

cards:
  - cards:
      - content: >-
          <font size="4"><font color= {{'white' if
          is_state('sensor.time_of_day','goed') else 'white'}}> 
          {{states('sensor.time_of_day')}}: Danny</font> 

          <font size="2"> [Lampen aan](/lovelace-iphone/verlichting) {% set
          lights = [
            states.light.lamp_wasruimte, states.light.ledstrip_keuken, states.light.lage_lamp,
            states.light.hoge_lamp, states.light.ledstrip_zetel, states.light.lamp_1_douche,
            states.light.lamp_2_douche, states.light.lamp_1_dressing, states.light.lamp_2_dressing,
            states.light.lamp_3_dressing, states.light.lamp_venster_hal, states.light.lamp_toilet,
            states.light.lamp_1_nachthal, states.light.lamp_2_nachthal, states.light.lamp_3_nachthal,
            states.light.lamp_4_nachthal, states.light.lamp_badkamer, states.light.lamp_1_bureau,
            states.light.lamp_1_master_slaapkamer, states.light.lamp_2_master_slaapkamer, states.light.lamp_3_master_slaapkamer,
            states.light.lamp_4_master_slaapkamer, states.light.lamp_1_terras_beneden, states.light.lamp_2_terras_beneden,
            states.light.lamp_1_terras_boven, states.light.lamp_2_terras_boven, states.light.lamp_3_terras_boven,
            states.light.lamp_4_terras_boven, states.light.lamp_5_terras_boven, states.light.lamp_6_terras_boven,
            states.light.lamp_2_bureau, states.light.lamp_3_bureau, states.light.lamp_4_bureau,
            states.light.ledstrip_bureau, states.light.lamp_michael,
            ] %} {{ lights | selectattr('state','eq','on') | list | count }} | [Deuren open](/lovelace-iphone/beveiliging) {% set Doors = [
            states.binary_sensor.achterdeur_contact_alarm,
            states.binary_sensor.voordeur_contact_alarm,
            states.binary_sensor.schuifdeur_contact_alarm,
            ] %} {{ Doors | selectattr('state','eq','on') | list | count }} | [Ramen open](/lovelace-iphone/beveiliging) {% set Windows = [
            states.binary_sensor.keukenraam_contact_alarm,
            states.binary_sensor.dubbel_raam_contact_alarm,
            states.binary_sensor.dressing_raam_contact_alarm,
            states.binary_sensor.nachthal_raam_sensor,
            states.binary_sensor.window_door_sensor,
            states.binary_sensor.badkamer_raam_sensor,
            states.binary_sensor.master_raam_sensor,
            states.binary_sensor.michael_raam_sensor,
            ] %} {{ Windows | selectattr('state','eq','on') | list | count }} </font>
        type: markdown
    type: horizontal-stack
mode: vertical
title: ''
type: 'custom:stack-in-card'
dateColor: white
name: false
dateSize: 70
dayWrapperLineColor: white
descSize: 70
dimFinishedEvents: true
entities:
  - entity: calendar.martine
  - entity: calendar.michael
  - entity: calendar.danny
  - entity: calendar.mertens_geysen
eventBarColor: white
finishedEventFilter: grayscale(100%)
finishedEventOpacity: 0.6
fullDayEventText: Dag afspraak
hoursFormat: 24
language: nl
sortByStartTime: true
locationIconColor: 'rgb(230, 124, 115)'
locationLinkColor: white
locationTextSize: 80
maxDaysToShow: 0
maxEventCount: 0
noEventsForTodayText: Geen afspraken vandaag
progressBarColor: white
showColors: true
showCurrentEventLine: false
showDescription: true
showLoader: true
showLocation: true
showMonth: false
showNoEventsForToday: true
showProgressBar: true
timeColor: white
timeSize: 80
titleColor: white
titleSize: 90
type: 'custom:atomic-calendar-revive'
untilText: Tot
showDate: false
disableEventLink: true

Share the complete configuration please. The one youā€™ve shared in only partial.

I meant for the stack, not your whole LL config :sweat_smile:

Iā€™m trying to recreate my printer monitoring card after changes introduced to custom cards in 0.107.x and have some issues with stack-in cardā€¦ What I want to achieve for toner level section is (my past config result):


Toner bars are within stack-in-card. Whatever I do to keep object I canā€™r remove the border around these:


My code for this card is:

type: entities
title: HP Color LaserJet CP1515n
entities:
  - type: divider
  - entity: sensor.cp1515n_printer_status
    icon: 'mdi:information-variant'
    name: 'Printer status:'
  - entity: sensor.cp1515n_printer_error
    icon: 'mdi:alert-outline'
    name: 'Printer error:'
  - entity: sensor.cp1515n_printer_uptime
    icon: 'mdi:clock-check-outline'
    name: 'Printer uptime:'
  - type: divider
  - entity: sensor.cp1515n_total_pages_printed
    name: 'Total pages printed:'
    icon: 'mdi:counter'
  - entity: sensor.cp1515n_color_pages_printed
    name: 'Color pages printed:'
    icon: 'mdi:counter'
  - entity: sensor.cp1515n_bw_pages_printed
    name: 'B&W pages printed:'
    icon: 'mdi:counter'
  - type: divider
  - type: 'custom:stack-in-card'
    mode: horizontal
    title: 'Toner levels:'
    keep:
      box_shadow: false
      margin: false
      border_radius: false
      background: false
      outer_padding: false
    cards:
      - align: center
        animation: auto
        animiation: 'on'
        attribute: false
        background_style: false
        card_style: false
        charge_entity: false
        color: '#222222'
        decimal: false
        delay: 5000
        direction: up
        entities:
          - entity: sensor.cp1515n_black_level
        entity: sensor.cp1515n_black_level
        height: 150px
        icon: false
        icon_position: 'off'
        icon_style: false
        indicator: auto
        limit_value: false
        max: 100
        min: 0
        minmax_style: false
        padding: 4px
        rounding: 3px
        saturation: 100%
        severity: false
        show_minmax: false
        show_value: true
        speed: 1000
        tap_action: info
        target: 10
        title: Black
        title_position: bottom
        title_style: false
        type: 'custom:bar-card'
        unit_of_measurement: false
        value_style: false
        visibility: false
        width: 75%
      - align: center
        animation: auto
        animiation: 'on'
        attribute: false
        background_style: false
        card_style: false
        charge_entity: false
        color: '#00ffff'
        decimal: false
        delay: 5000
        direction: up
        entities:
          - entity: sensor.cp1515n_cyan_level
        entity: sensor.cp1515n_cyan_level
        height: 150px
        icon: false
        icon_position: 'off'
        icon_style: false
        indicator: auto
        limit_value: false
        max: 100
        min: 0
        minmax_style: false
        padding: 4px
        rounding: 3px
        saturation: 100%
        severity: false
        show_minmax: false
        show_value: true
        speed: 1000
        tap_action: info
        target: 10
        title: Cyan
        title_position: bottom
        title_style: false
        type: 'custom:bar-card'
        unit_of_measurement: false
        value_style: false
        visibility: false
        width: 75%
      - align: center
        animation: auto
        animiation: 'on'
        attribute: false
        background_style: false
        card_style: false
        charge_entity: false
        color: '#ff00ff'
        decimal: false
        delay: 5000
        direction: up
        entities:
          - entity: sensor.cp1515n_magenta_level
        entity: sensor.cp1515n_magenta_level
        height: 150px
        icon: false
        icon_position: 'off'
        icon_style: false
        indicator: auto
        limit_value: false
        max: 100
        min: 0
        minmax_style: false
        padding: 4px
        rounding: 3px
        saturation: 100%
        severity: false
        show_minmax: false
        show_value: true
        speed: 1000
        tap_action: info
        target: 10
        title: Magenta
        title_position: bottom
        title_style: false
        type: 'custom:bar-card'
        unit_of_measurement: false
        value_style: false
        visibility: false
        width: 75%
      - align: center
        animation: auto
        animiation: 'on'
        attribute: false
        background_style: false
        card_style: false
        charge_entity: false
        color: '#ffff00'
        decimal: false
        delay: 5000
        direction: up
        entities:
          - entity: sensor.cp1515n_yellow_level
        entity: sensor.cp1515n_yellow_level
        height: 150px
        icon: false
        icon_position: 'off'
        icon_style: false
        indicator: auto
        limit_value: false
        max: 100
        min: 0
        minmax_style: false
        padding: 4px
        rounding: 3px
        saturation: 100%
        severity: false
        show_minmax: false
        show_value: true
        speed: 1000
        tap_action: info
        target: 10
        title: Yellow
        title_position: bottom
        title_style: false
        type: 'custom:bar-card'
        unit_of_measurement: false
        value_style: false
        visibility: false
        width: 75%

Any suggestion how to get rid of this border?

Sorry :wink: Well its probably some issue with indentation, but Iā€™m not a developer and thats quite hard to understand to be honest :frowning:

type: 'custom:stack-in-card'
title: My Stack In Card
mode: horizontal
cards:
  - type: horizontal-stack
    cards:
        heading:
        - 'mdi:alarm-light'
        - Huis status
        style: |
        ha-card {
            background: {% if is_state('switch.alarm_aangezet', 'on') %} #E45F65 {% endif %};
            background: {% if is_state('switch.alarm_aangezet', 'off') %} #3AA8F3 {% endif %};


        }  
        type: 'custom:banner-card'
  - type: horizontal-stack
    cards:
      type: 'custom:state-switch'
      entity: user
      default: default
      states:
        Danny Mertens:
          type: markdown
          content: |
            <font size="4"> {{ states('sensor.time_of_day') }}: Danny</font>
            <font size="2"> [Lampen aan](/lovelace-iphone/verlichting) {% set
                lights = [
                  states.light.lamp_wasruimte, states.light.ledstrip_keuken, states.light.lage_lamp,
                  states.light.hoge_lamp, states.light.ledstrip_zetel, states.light.lamp_1_douche,
                  states.light.lamp_2_douche, states.light.lamp_1_dressing, states.light.lamp_2_dressing,
                  states.light.lamp_3_dressing, states.light.lamp_venster_hal, states.light.lamp_toilet,
                  states.light.lamp_1_nachthal, states.light.lamp_2_nachthal, states.light.lamp_3_nachthal,
                  states.light.lamp_4_nachthal, states.light.lamp_badkamer, states.light.lamp_1_bureau,
                  states.light.lamp_1_master_slaapkamer, states.light.lamp_2_master_slaapkamer, states.light.lamp_3_master_slaapkamer,
                  states.light.lamp_4_master_slaapkamer, states.light.lamp_1_terras_beneden, states.light.lamp_2_terras_beneden,
                  states.light.lamp_1_terras_boven, states.light.lamp_2_terras_boven, states.light.lamp_3_terras_boven,
                  states.light.lamp_4_terras_boven, states.light.lamp_5_terras_boven, states.light.lamp_6_terras_boven,
                  states.light.lamp_2_bureau, states.light.lamp_3_bureau, states.light.lamp_4_bureau,
                  states.light.ledstrip_bureau, states.light.lamp_michael,
                  ] %} {{ lights | selectattr('state','eq','on') | list | count }} | [Deuren open](/lovelace-iphone/beveiliging) {% set Doors = [
                  states.binary_sensor.achterdeur_contact_alarm,
                  states.binary_sensor.voordeur_contact_alarm,
                  states.binary_sensor.schuifdeur_contact_alarm,
                  ] %} {{ Doors | selectattr('state','eq','on') | list | count }} | [Ramen open](/lovelace-iphone/beveiliging) {% set Windows = [
                  states.binary_sensor.keukenraam_contact_alarm,
                  states.binary_sensor.dubbel_raam_contact_alarm,
                  states.binary_sensor.dressing_raam_contact_alarm,
                  states.binary_sensor.nachthal_raam_sensor,
                  states.binary_sensor.window_door_sensor,
                  states.binary_sensor.badkamer_raam_sensor,
                  states.binary_sensor.master_raam_sensor,
                  states.binary_sensor.michael_raam_sensor,
                  ] %} {{ Windows | selectattr('state','eq','on') | list | count }} </font>
        Martine Geysen:
          type: markdown
          content: |
            <font size="4">{{ states('sensor.time_of_day') }}: Martine</font>
            <font size="2"> [Lampen aan](/lovelace-iphone/verlichting) {% set
                lights = [
                  states.light.lamp_wasruimte, states.light.ledstrip_keuken, states.light.lage_lamp,
                  states.light.hoge_lamp, states.light.ledstrip_zetel, states.light.lamp_1_douche,
                  states.light.lamp_2_douche, states.light.lamp_1_dressing, states.light.lamp_2_dressing,
                  states.light.lamp_3_dressing, states.light.lamp_venster_hal, states.light.lamp_toilet,
                  states.light.lamp_1_nachthal, states.light.lamp_2_nachthal, states.light.lamp_3_nachthal,
                  states.light.lamp_4_nachthal, states.light.lamp_badkamer, states.light.lamp_1_bureau,
                  states.light.lamp_1_master_slaapkamer, states.light.lamp_2_master_slaapkamer, states.light.lamp_3_master_slaapkamer,
                  states.light.lamp_4_master_slaapkamer, states.light.lamp_1_terras_beneden, states.light.lamp_2_terras_beneden,
                  states.light.lamp_1_terras_boven, states.light.lamp_2_terras_boven, states.light.lamp_3_terras_boven,
                  states.light.lamp_4_terras_boven, states.light.lamp_5_terras_boven, states.light.lamp_6_terras_boven,
                  states.light.lamp_2_bureau, states.light.lamp_3_bureau, states.light.lamp_4_bureau,
                  states.light.ledstrip_bureau, states.light.lamp_michael,
                  ] %} {{ lights | selectattr('state','eq','on') | list | count }} | [Deuren open](/lovelace-iphone/beveiliging) {% set Doors = [
                  states.binary_sensor.achterdeur_contact_alarm,
                  states.binary_sensor.voordeur_contact_alarm,
                  states.binary_sensor.schuifdeur_contact_alarm,
                  ] %} {{ Doors | selectattr('state','eq','on') | list | count }} | [Ramen open](/lovelace-iphone/beveiliging) {% set Windows = [
                  states.binary_sensor.keukenraam_contact_alarm,
                  states.binary_sensor.dubbel_raam_contact_alarm,
                  states.binary_sensor.dressing_raam_contact_alarm,
                  states.binary_sensor.nachthal_raam_sensor,
                  states.binary_sensor.window_door_sensor,
                  states.binary_sensor.badkamer_raam_sensor,
                  states.binary_sensor.master_raam_sensor,
                  states.binary_sensor.michael_raam_sensor,
                  ] %} {{ Windows | selectattr('state','eq','on') | list | count }} </font>
        default:
          type: markdown
          content: |
            {{ states('sensor.time_of_day') }}: gast

  - type: horizontal-stack
    cards:
        dateColor: white
        name: false
        dateSize: 70
        dayWrapperLineColor: white
        descSize: 70
        dimFinishedEvents: true
        entities:
          - entity: calendar.martine
          - entity: calendar.michael
          - entity: calendar.danny
          - entity: calendar.mertens_geysen
        eventBarColor: white
        finishedEventFilter: grayscale(100%)
        finishedEventOpacity: 0.6
        fullDayEventText: Dag afspraak
        hoursFormat: 24
        language: nl
        sortByStartTime: true
        locationIconColor: 'rgb(230, 124, 115)'
        locationLinkColor: white
        locationTextSize: 80
        maxDaysToShow: 0
        maxEventCount: 0
        noEventsForTodayText: Geen afspraken vandaag
        progressBarColor: white
        showColors: true
        showCurrentEventLine: false
        showDescription: true
        showLoader: true
        showLocation: true
        showMonth: false
        showNoEventsForToday: true
        showProgressBar: true
        timeColor: white
        timeSize: 80
        titleColor: white
        titleSize: 90
        type: 'custom:atomic-calendar-revive'
        untilText: Tot
        showDate: false
        disableEventLink: true

Indentation has nothing to do with being a developper. Looking for some yaml tutorials online will help you (eg: https://learnxinyminutes.com/docs/yaml/)

Try this:

type: 'custom:stack-in-card'
title: My Stack In Card
mode: vertical
cards:
  - heading:
    - 'mdi:alarm-light'
    - Huis status
    style: |
      ha-card {
          background: {% if is_state('switch.alarm_aangezet', 'on') %} #E45F65 {% endif %};
          background: {% if is_state('switch.alarm_aangezet', 'off') %} #3AA8F3 {% endif %};


      }  
    type: 'custom:banner-card'
  - type: 'custom:state-switch'
    entity: user
    default: default
    states:
      Danny Mertens:
        type: markdown
        content: |
          <font size="4"> {{ states('sensor.time_of_day') }}: Danny</font>
          <font size="2"> [Lampen aan](/lovelace-iphone/verlichting) {% set
              lights = [
                states.light.lamp_wasruimte, states.light.ledstrip_keuken, states.light.lage_lamp,
                states.light.hoge_lamp, states.light.ledstrip_zetel, states.light.lamp_1_douche,
                states.light.lamp_2_douche, states.light.lamp_1_dressing, states.light.lamp_2_dressing,
                states.light.lamp_3_dressing, states.light.lamp_venster_hal, states.light.lamp_toilet,
                states.light.lamp_1_nachthal, states.light.lamp_2_nachthal, states.light.lamp_3_nachthal,
                states.light.lamp_4_nachthal, states.light.lamp_badkamer, states.light.lamp_1_bureau,
                states.light.lamp_1_master_slaapkamer, states.light.lamp_2_master_slaapkamer, states.light.lamp_3_master_slaapkamer,
                states.light.lamp_4_master_slaapkamer, states.light.lamp_1_terras_beneden, states.light.lamp_2_terras_beneden,
                states.light.lamp_1_terras_boven, states.light.lamp_2_terras_boven, states.light.lamp_3_terras_boven,
                states.light.lamp_4_terras_boven, states.light.lamp_5_terras_boven, states.light.lamp_6_terras_boven,
                states.light.lamp_2_bureau, states.light.lamp_3_bureau, states.light.lamp_4_bureau,
                states.light.ledstrip_bureau, states.light.lamp_michael,
                ] %} {{ lights | selectattr('state','eq','on') | list | count }} | [Deuren open](/lovelace-iphone/beveiliging) {% set Doors = [
                states.binary_sensor.achterdeur_contact_alarm,
                states.binary_sensor.voordeur_contact_alarm,
                states.binary_sensor.schuifdeur_contact_alarm,
                ] %} {{ Doors | selectattr('state','eq','on') | list | count }} | [Ramen open](/lovelace-iphone/beveiliging) {% set Windows = [
                states.binary_sensor.keukenraam_contact_alarm,
                states.binary_sensor.dubbel_raam_contact_alarm,
                states.binary_sensor.dressing_raam_contact_alarm,
                states.binary_sensor.nachthal_raam_sensor,
                states.binary_sensor.window_door_sensor,
                states.binary_sensor.badkamer_raam_sensor,
                states.binary_sensor.master_raam_sensor,
                states.binary_sensor.michael_raam_sensor,
                ] %} {{ Windows | selectattr('state','eq','on') | list | count }} </font>
      Martine Geysen:
        type: markdown
        content: |
          <font size="4">{{ states('sensor.time_of_day') }}: Martine</font>
          <font size="2"> [Lampen aan](/lovelace-iphone/verlichting) {% set
              lights = [
                states.light.lamp_wasruimte, states.light.ledstrip_keuken, states.light.lage_lamp,
                states.light.hoge_lamp, states.light.ledstrip_zetel, states.light.lamp_1_douche,
                states.light.lamp_2_douche, states.light.lamp_1_dressing, states.light.lamp_2_dressing,
                states.light.lamp_3_dressing, states.light.lamp_venster_hal, states.light.lamp_toilet,
                states.light.lamp_1_nachthal, states.light.lamp_2_nachthal, states.light.lamp_3_nachthal,
                states.light.lamp_4_nachthal, states.light.lamp_badkamer, states.light.lamp_1_bureau,
                states.light.lamp_1_master_slaapkamer, states.light.lamp_2_master_slaapkamer, states.light.lamp_3_master_slaapkamer,
                states.light.lamp_4_master_slaapkamer, states.light.lamp_1_terras_beneden, states.light.lamp_2_terras_beneden,
                states.light.lamp_1_terras_boven, states.light.lamp_2_terras_boven, states.light.lamp_3_terras_boven,
                states.light.lamp_4_terras_boven, states.light.lamp_5_terras_boven, states.light.lamp_6_terras_boven,
                states.light.lamp_2_bureau, states.light.lamp_3_bureau, states.light.lamp_4_bureau,
                states.light.ledstrip_bureau, states.light.lamp_michael,
                ] %} {{ lights | selectattr('state','eq','on') | list | count }} | [Deuren open](/lovelace-iphone/beveiliging) {% set Doors = [
                states.binary_sensor.achterdeur_contact_alarm,
                states.binary_sensor.voordeur_contact_alarm,
                states.binary_sensor.schuifdeur_contact_alarm,
                ] %} {{ Doors | selectattr('state','eq','on') | list | count }} | [Ramen open](/lovelace-iphone/beveiliging) {% set Windows = [
                states.binary_sensor.keukenraam_contact_alarm,
                states.binary_sensor.dubbel_raam_contact_alarm,
                states.binary_sensor.dressing_raam_contact_alarm,
                states.binary_sensor.nachthal_raam_sensor,
                states.binary_sensor.window_door_sensor,
                states.binary_sensor.badkamer_raam_sensor,
                states.binary_sensor.master_raam_sensor,
                states.binary_sensor.michael_raam_sensor,
                ] %} {{ Windows | selectattr('state','eq','on') | list | count }} </font>
      default:
        type: markdown
        content: |
          {{ states('sensor.time_of_day') }}: gast

  - dateColor: white
    name: false
    dateSize: 70
    dayWrapperLineColor: white
    descSize: 70
    dimFinishedEvents: true
    entities:
      - entity: calendar.martine
      - entity: calendar.michael
      - entity: calendar.danny
      - entity: calendar.mertens_geysen
    eventBarColor: white
    finishedEventFilter: grayscale(100%)
    finishedEventOpacity: 0.6
    fullDayEventText: Dag afspraak
    hoursFormat: 24
    language: nl
    sortByStartTime: true
    locationIconColor: 'rgb(230, 124, 115)'
    locationLinkColor: white
    locationTextSize: 80
    maxDaysToShow: 0
    maxEventCount: 0
    noEventsForTodayText: Geen afspraken vandaag
    progressBarColor: white
    showColors: true
    showCurrentEventLine: false
    showDescription: true
    showLoader: true
    showLocation: true
    showMonth: false
    showNoEventsForToday: true
    showProgressBar: true
    timeColor: white
    timeSize: 80
    titleColor: white
    titleSize: 90
    type: 'custom:atomic-calendar-revive'
    untilText: Tot
    showDate: false
    disableEventLink: true

This is expected because stack-in-card is a card, so it has a box-shadow :slight_smile: wherever itā€™s positioned.
If you want to remove stack-in-cardā€™s box-shadow on itself, youā€™ll have to use card-mod

Hi,

Thanks! Iā€™m sure going to look at your link!!!
It works more or less now, everything is nicely in one card view but the style in the header does not work anymore, the idea is that this is blue when alarm is off, red when alarm is on.

image
image

Your template is wrong, thatā€™s why it doesnā€™t work (and stack-in-card removes the background by default)

    style: |
      ha-card {
          background:
          {% if is_state('switch.alarm_aangezet', 'on') %}
            #E45F65
          {% else %}
            #3AA8F3
          {% endif %}
          ;
          --keep-background: true;
      }  
1 Like

What did you use to get the info about the printer?
I saw the custom component to get the cartdriges status but what about the rest?

Thanks

Since HP Printer component does not work me (it requires some specific .xml file to be exposed by printer) I created set of SNMP sensor specific to my printer (well, perhaps to more than CP1515n, since these should be somehow standard across HP lineup). Whole setup is documented here:

Obviously, the cards itself changes since then :slight_smile:

Oh, got itā€¦ previously I was using one more level of nesting within vertical-stack-in-card and this was causing all borders, but stack to dissapearā€¦

Hmmmā€¦ does not workā€¦ I included everyting inside another stack-in-card and set parameters to remove borders, but it is still there:

type: 'custom:stack-in-card'
mode: vertical
keep:
  background: false
  border_radius: false
  box_shadow: false
  margin: false
  outer_padding: false
cards:
  - entities:
      - type: divider
      - entity: sensor.cp1515n_printer_status
        icon: 'mdi:information-variant'
        name: 'Printer status:'
      - entity: sensor.cp1515n_printer_error
        icon: 'mdi:alert-outline'
        name: 'Printer error:'
      - entity: sensor.cp1515n_printer_uptime
        icon: 'mdi:clock-check-outline'
        name: 'Printer uptime:'
      - type: divider
      - entity: sensor.cp1515n_total_pages_printed
        icon: 'mdi:counter'
        name: 'Total pages printed:'
      - entity: sensor.cp1515n_color_pages_printed
        icon: 'mdi:counter'
        name: 'Color pages printed:'
      - entity: sensor.cp1515n_bw_pages_printed
        icon: 'mdi:counter'
        name: 'B&W pages printed:'
      - type: divider
      - cards:
          - align: center
            animation: auto
            animiation: 'on'
            attribute: false
            background_style: false
            card_style: false
            charge_entity: false
            color: '#222222'
            decimal: false
            delay: 5000
            direction: up
            entities:
              - entity: sensor.cp1515n_black_level
            entity: sensor.cp1515n_black_level
            height: 150px
            icon: false
            icon_position: 'off'
            icon_style: false
            indicator: auto
            limit_value: false
            max: 100
            min: 0
            minmax_style: false
            padding: 4px
            rounding: 3px
            saturation: 100%
            severity: false
            show_minmax: false
            show_value: true
            speed: 1000
            tap_action: info
            target: 10
            title: Black
            title_position: bottom
            title_style: false
            type: 'custom:bar-card'
            unit_of_measurement: false
            value_style: false
            visibility: false
            width: 75%
          - align: center
            animation: auto
            animiation: 'on'
            attribute: false
            background_style: false
            card_style: false
            charge_entity: false
            color: '#00ffff'
            decimal: false
            delay: 5000
            direction: up
            entities:
              - entity: sensor.cp1515n_cyan_level
            entity: sensor.cp1515n_cyan_level
            height: 150px
            icon: false
            icon_position: 'off'
            icon_style: false
            indicator: auto
            limit_value: false
            max: 100
            min: 0
            minmax_style: false
            padding: 4px
            rounding: 3px
            saturation: 100%
            severity: false
            show_minmax: false
            show_value: true
            speed: 1000
            tap_action: info
            target: 10
            title: Cyan
            title_position: bottom
            title_style: false
            type: 'custom:bar-card'
            unit_of_measurement: false
            value_style: false
            visibility: false
            width: 75%
          - align: center
            animation: auto
            animiation: 'on'
            attribute: false
            background_style: false
            card_style: false
            charge_entity: false
            color: '#ff00ff'
            decimal: false
            delay: 5000
            direction: up
            entities:
              - entity: sensor.cp1515n_magenta_level
            entity: sensor.cp1515n_magenta_level
            height: 150px
            icon: false
            icon_position: 'off'
            icon_style: false
            indicator: auto
            limit_value: false
            max: 100
            min: 0
            minmax_style: false
            padding: 4px
            rounding: 3px
            saturation: 100%
            severity: false
            show_minmax: false
            show_value: true
            speed: 1000
            tap_action: info
            target: 10
            title: Magenta
            title_position: bottom
            title_style: false
            type: 'custom:bar-card'
            unit_of_measurement: false
            value_style: false
            visibility: false
            width: 75%
          - align: center
            animation: auto
            animiation: 'on'
            attribute: false
            background_style: false
            card_style: false
            charge_entity: false
            color: '#ffff00'
            decimal: false
            delay: 5000
            direction: up
            entities:
              - entity: sensor.cp1515n_yellow_level
            entity: sensor.cp1515n_yellow_level
            height: 150px
            icon: false
            icon_position: 'off'
            icon_style: false
            indicator: auto
            limit_value: false
            max: 100
            min: 0
            minmax_style: false
            padding: 4px
            rounding: 3px
            saturation: 100%
            severity: false
            show_minmax: false
            show_value: true
            speed: 1000
            tap_action: info
            target: 10
            title: Yellow
            title_position: bottom
            title_style: false
            type: 'custom:bar-card'
            unit_of_measurement: false
            value_style: false
            visibility: false
            width: 75%
        keep:
          background: false
          border_radius: false
          box_shadow: false
          margin: false
          outer_padding: false
        mode: horizontal
        title: 'Toner levels:'
        type: 'custom:stack-in-card'
    title: HP Color LaserJet CP1515n
    type: entities

So it works slightly different that vertical-stack-in-card, that was removing borders to all children, regardless level of nesting. Here it seems not be able to remove border its own instance nested withinā€¦ or again Iā€™m doing something wrong :slight_smile:

Iā€™m trying really do, but pff this is not so easy to understand as a novice and non developer, what Iā€™m doing wrong here?

image

type: 'custom:stack-in-card'
mode: vertical
cards:
  - type: markdown
    content: |
      <font size="2"> [Lampen aan](/lovelace-iphone/verlichting) {% set
          lights = [
            states.light.lamp_wasruimte, states.light.ledstrip_keuken, states.light.lage_lamp,
            states.light.hoge_lamp, states.light.ledstrip_zetel, states.light.lamp_1_douche,
            states.light.lamp_2_douche, states.light.lamp_1_dressing, states.light.lamp_2_dressing,
            states.light.lamp_3_dressing, states.light.lamp_venster_hal, states.light.lamp_toilet,
            states.light.lamp_1_nachthal, states.light.lamp_2_nachthal, states.light.lamp_3_nachthal,
            states.light.lamp_4_nachthal, states.light.lamp_badkamer, states.light.lamp_1_bureau,
            states.light.lamp_1_master_slaapkamer, states.light.lamp_2_master_slaapkamer, states.light.lamp_3_master_slaapkamer,
            states.light.lamp_4_master_slaapkamer, states.light.lamp_1_terras_beneden, states.light.lamp_2_terras_beneden,
            states.light.lamp_1_terras_boven, states.light.lamp_2_terras_boven, states.light.lamp_3_terras_boven,
            states.light.lamp_4_terras_boven, states.light.lamp_5_terras_boven, states.light.lamp_6_terras_boven,
            states.light.lamp_2_bureau, states.light.lamp_3_bureau, states.light.lamp_4_bureau,
            states.light.ledstrip_bureau, states.light.lamp_michael,
            ] %} {{ lights | selectattr('state','eq','on') | list | count }}
    card:
      content: |
        Deze lampen zijn aan:
        {% for l in config.entities %}
          - {{ l.entity }}
        {%- endfor %}
  - type: markdown
    entities:
      - entity: light.lamp_1_bureau
      - entity: light.lamp_2_bureau
      - entity: light.lamp_3_bureau
      - entity: light.lamp_wasruimte
      - entity: light.ledstrip_keuken
      - entity: light.lage_lamp
      - entity: light.hoge_lamp
      - entity: light.ledstrip_zetel
      - entity: light.lamp_1_douche
      - entity: light.lamp_2_douche
      - entity: light.lamp_1_dressing
      - entity: light.lamp_2_dressing
      - entity: light.lamp_3_dressing
      - entity: light.lamp_venster_hal
      - entity: light.lamp_toilet
      - entity: light.lamp_1_nachthal
      - entity: light.lamp_2_nachthal
      - entity: light.lamp_3_nachthal
      - entity: light.lamp_4_nachthal
      - entity: light.lamp_badkamer
      - entity: light.lamp_1_bureau
      - entity: light.lamp_1_master_slaapkamer
      - entity: light.lamp_2_master_slaapkamer
      - entity: light.lamp_3_master_slaapkamer
      - entity: light.lamp_4_master_slaapkamer
      - entity: light.lamp_1_terras_beneden
      - entity: light.lamp_2_terras_beneden
      - entity: light.lamp_1_terras_boven
      - entity: light.lamp_2_terras_boven
      - entity: light.lamp_3_terras_boven
      - entity: light.lamp_4_terras_boven
      - entity: light.lamp_5_terras_boven
      - entity: light.lamp_6_terras_boven
      - entity: light.lamp_2_bureau
      - entity: light.lamp_3_bureau
      - entity: light.lamp_4_bureau
      - entity: light.ledstrip_bureau
      - entity: light.lamp_michael
    state_filter:
      - 'on'

well, you need to learn something. it shows you the problem and some info about your card:

  • content required for a card with - entity: light.lamp_1_bureau etc.

look at it - itā€™s a markdown card, but you donā€™t use content, you use entities instead.
you need something like you do in your first card.
and what that state_filter: is doing at the end? it is not allowed in markdown cards.

Euh Ok, but it really works in a seperate card :anguished:

image

separate. well, 2 things: a) I can see a wrong config and LL says you what exactly is wrong (and it is wrong, itā€™s not markdown cardā€™s config) and b) I can see not config of your separate card so cannot comment, itā€™s irrelevant here.

Hi, I understand and thanks will have a look at it, new to all of this, so sometimes just happy if somethings work :wink: but I understand that itā€™s not right and will check it out, thanks!

this is the card that I use now

card:
  content: |
    Deze lampen zijn aan:
    {% for l in config.entities %}
      - {{ state_attr(l.entity, 'friendly_name') }}
    {%- endfor %}
  type: markdown
entities:
  - entity: light.lamp_1_bureau
  - entity: light.lamp_2_bureau
  - entity: light.lamp_3_bureau
  - entity: light.lamp_wasruimte
  - entity: light.ledstrip_keuken
  - entity: light.lage_lamp
  - entity: light.hoge_lamp
  - entity: light.ledstrip_zetel
  - entity: light.lamp_1_douche
  - entity: light.lamp_2_douche
  - entity: light.lamp_1_dressing
  - entity: light.lamp_2_dressing
  - entity: light.lamp_3_dressing
  - entity: light.lamp_venster_hal
  - entity: light.lamp_toilet
  - entity: light.lamp_1_nachthal
  - entity: light.lamp_2_nachthal
  - entity: light.lamp_3_nachthal
  - entity: light.lamp_4_nachthal
  - entity: light.lamp_badkamer
  - entity: light.lamp_1_bureau
  - entity: light.lamp_1_master_slaapkamer
  - entity: light.lamp_2_master_slaapkamer
  - entity: light.lamp_3_master_slaapkamer
  - entity: light.lamp_4_master_slaapkamer
  - entity: light.lamp_1_terras_beneden
  - entity: light.lamp_2_terras_beneden
  - entity: light.lamp_1_terras_boven
  - entity: light.lamp_2_terras_boven
  - entity: light.lamp_3_terras_boven
  - entity: light.lamp_4_terras_boven
  - entity: light.lamp_5_terras_boven
  - entity: light.lamp_6_terras_boven
  - entity: light.lamp_2_bureau
  - entity: light.lamp_3_bureau
  - entity: light.lamp_4_bureau
  - entity: light.ledstrip_bureau
  - entity: light.lamp_michael
state_filter:
  - 'on'
type: entity-filter

image

I understand.
itā€™s a conditional card that displays a markdown card, looks good.
coming back to your original issue - it would be great if you could describe your goal/problem clearly when asking because your code is messed up and I can only guessā€¦
Something like this?

type: 'custom:stack-in-card'
mode: vertical
cards:
  - type: markdown
    content: |
      <font size="2"> [Lampen aan](/lovelace-iphone/verlichting) {% set
          lights = [
            states.light.lamp_wasruimte, states.light.ledstrip_keuken, states.light.lage_lamp,
            states.light.hoge_lamp, states.light.ledstrip_zetel, states.light.lamp_1_douche,
            states.light.lamp_2_douche, states.light.lamp_1_dressing, states.light.lamp_2_dressing,
            states.light.lamp_3_dressing, states.light.lamp_venster_hal, states.light.lamp_toilet,
            states.light.lamp_1_nachthal, states.light.lamp_2_nachthal, states.light.lamp_3_nachthal,
            states.light.lamp_4_nachthal, states.light.lamp_badkamer, states.light.lamp_1_bureau,
            states.light.lamp_1_master_slaapkamer, states.light.lamp_2_master_slaapkamer, states.light.lamp_3_master_slaapkamer,
            states.light.lamp_4_master_slaapkamer, states.light.lamp_1_terras_beneden, states.light.lamp_2_terras_beneden,
            states.light.lamp_1_terras_boven, states.light.lamp_2_terras_boven, states.light.lamp_3_terras_boven,
            states.light.lamp_4_terras_boven, states.light.lamp_5_terras_boven, states.light.lamp_6_terras_boven,
            states.light.lamp_2_bureau, states.light.lamp_3_bureau, states.light.lamp_4_bureau,
            states.light.ledstrip_bureau, states.light.lamp_michael,
            ] %} {{ lights | selectattr('state','eq','on') | list | count }}
    card:
      content: |
        Deze lampen zijn aan:
        {% for l in config.entities %}
          - {{ l.entity }}
        {%- endfor %}
  - type: entity-filter
    card:
      content: |
        Deze lampen zijn aan:
        {% for l in config.entities %}
          - {{ state_attr(l.entity, 'friendly_name') }}
        {%- endfor %}
      type: markdown
    entities:
      - entity: light.lamp_1_bureau
      - entity: light.lamp_2_bureau
      - entity: light.lamp_3_bureau
      - entity: light.lamp_wasruimte
      - entity: light.ledstrip_keuken
      - entity: light.lage_lamp
      - entity: light.hoge_lamp
      - entity: light.ledstrip_zetel
      - entity: light.lamp_1_douche
      - entity: light.lamp_2_douche
      - entity: light.lamp_1_dressing
      - entity: light.lamp_2_dressing
      - entity: light.lamp_3_dressing
      - entity: light.lamp_venster_hal
      - entity: light.lamp_toilet
      - entity: light.lamp_1_nachthal
      - entity: light.lamp_2_nachthal
      - entity: light.lamp_3_nachthal
      - entity: light.lamp_4_nachthal
      - entity: light.lamp_badkamer
      - entity: light.lamp_1_bureau
      - entity: light.lamp_1_master_slaapkamer
      - entity: light.lamp_2_master_slaapkamer
      - entity: light.lamp_3_master_slaapkamer
      - entity: light.lamp_4_master_slaapkamer
      - entity: light.lamp_1_terras_beneden
      - entity: light.lamp_2_terras_beneden
      - entity: light.lamp_1_terras_boven
      - entity: light.lamp_2_terras_boven
      - entity: light.lamp_3_terras_boven
      - entity: light.lamp_4_terras_boven
      - entity: light.lamp_5_terras_boven
      - entity: light.lamp_6_terras_boven
      - entity: light.lamp_2_bureau
      - entity: light.lamp_3_bureau
      - entity: light.lamp_4_bureau
      - entity: light.ledstrip_bureau
      - entity: light.lamp_michael
    state_filter:
      - 'on'

Hi, wel to be honest you already fixed it, just tried your version and works fine, thanks!

1 Like