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

[Mariusthvdb (Marius)]

building the above Buienradar stack, I am experimenting with a camera view at the bottom:

type: custom:stack-in-card
cards:
  - type: entities
    header:
    type: picture
    image: /local/images/buienradar_banner.png
    tap_action:
      action: url
      url_path: https://www.buienradar.nl
  - type: etc etc etc
  - type: entities
    title: Buienradar details
    show_header_toggle: false
    entities:
      - type: custom:fold-entity-row
        head:
          type: section
          label: Temp & condition
        entities:
          - sensor.br_temperature
          - sensor.br_etcetc

      - type: custom:fold-entity-row
        head:
          type: section
          label: Barometer
        entities:
          - sensor.br_precipitation
          - etcetc

      - type: custom:hui-picture-glance-card
        entities: []
        style: |
          ha-card {
            box-shadow: none;
            background-size: cover;
            border-radius: 0px 0px 0px 0px;
          }
        camera_image: camera.buienradar

Ive used all known to me styles to have the camera_image use the full width of the stack, but it remains like this:

while solo, it shows like a nice full size camera:

can I style it further to use the full size of the stack?
thanks for having a look!

update

apparently I had my nesting of the cards wrong. This seems to be working without any styling:

type: custom:stack-in-card
cards:
  - type: entities
    header:
    type: picture
    image: /local/images/buienradar_banner.png
    tap_action:
      action: url
      url_path: https://www.buienradar.nl
  - type: glance
    entities:
      - entity: sensor.br_feel_temperature
        name: Apparent
      - sensor.br_wind_force
      - sensor.br_condition

  - type: custom:fold-entity-row
    head:
      type: section
      label: Temp & condition
    entities:
      - sensor.br_temperature
      - sensor.br_ground_temperature
      - sensor.br_condition_code
      - sensor.br_detailed_condition
      - sensor.br_full_condition
      - sensor.br_symbol
      - sensor.br_wind_direction
      - sensor.br_wind_direction_azimuth
      - sensor.br_wind_force
      - sensor.br_wind_gust
      - sensor.br_wind_speed

  - type: custom:fold-entity-row
    head:
      type: section
      label: Barometer
    entities:
      - sensor.br_precipitation
      - sensor.br_precipitation_forecast_average
      - sensor.br_precipitation_forecast_total
      - sensor.br_humidity
      - sensor.br_pressure
      - sensor.br_barometer
      - sensor.br_barometer_value
      - sensor.br_stationname
      - sensor.br_visibility

  - type: custom:hui-picture-glance-card
    entities: []
    camera_image: camera.buienradar

nice!

though now the states in the fold-entity-rows are too close to the edge of the card… always something…

which is rather surprising because using the fold-entity-row in an entitities card shows correctly:

using keep_margin: true on the stack-card makes the fold-entity-rows appear better, but then the bottom camera again has all margins set like before.
And the keep_margin on the fold-entity-rows doesn’t work, because they are no ‘cards’ but 'row’s?
so what’s to do?

[klogg]

I am having trouble keeping the background of the child cards. Specifically the ‘title’ card does not stay transparent.

Any pointers gratefully received.

This is the include that creates the ‘title’:

# lovelace_gen

type: markdown
style: |
  ha-card {
    font-size: {{ font_size | default('20px') }};
    font-family: {{ font_family | default('var(--primary-font-family)') }};
    color: {{ color | default('auto') }};
    height: {{ height | default('3em') }};
    background-color: {{ background_color | default('transparent') }};
    margin-top: {{ margin_top | default('-0.5em') }};
    margin-left: {{ margin_left | default('-0.5em') }};
    margin-bottom: {{ margin_bottom | default('-0.5em') }};
    box-shadow: none;
  }
content: {{ title }}

This is the stack-in-card (only the very top bit is probably relevant but I include it all here just in case):

      - type: custom:stack-in-card
        keep:
          background: 'true'
        cards:
          - !include
            - includes/titles.yaml
            - title: -- ENTITIES THAT MIGHT BE BROKEN ({{ states('sensor.unavailable_entities') }}) --
              font_family: Oswald

          - type: markdown
            content: >
              {% if states('sensor.unavailable_entities') == '0' %}
                All entities seem to be available!
              {% else %}
                {{ state_attr('sensor.unavailable_entities', 'entities') }}
              {% endif %}
            style: |
              ha-card {
                font-size: {{ font_size | default('12px') }};
              }

          - type: horizontal-stack
            cards:
              - type: custom:button-card
                name: (SHOW UNAVAILABLE AT STARTUP)
                tap_action:
                  action: call-service
                  service: browser_mod.popup
                  service_data:
                    title: Unavailable At Startup
                    card:
                      type: markdown
                      content: >
                        {{ state_attr('sensor.unavailable_entities_at_startup', 'entities') }}
                    deviceID:
                      - this
                    style:
                      font-size: 12px
                styles:
                  name:
                    - padding: 0em 0.75em
                    - color: 'var(--secondary-text-color)'
                    - justify-self: start
                    - font-family: Oswald 
                    - font-size: 14px

              - type: custom:button-card
                name: UPDATE LIST
                tap_action:
                  action: call-service
                  service: homeassistant.update_entity
                  service_data: 
                    entity_id: sensor.unavailable_entities
                styles:
                  name:
                    - padding: 0em 0.75em
                    - color: 'var(--secondary-text-color)'
                    - justify-self: end
                    - font-family: Oswald 
                    - font-size: 14px

[DerFinnn]

Hey @RomRider,
I have found a bug.
The keep argument doesn’t work, if you implement the stack-in-card into a conditional element of a picture-elements card and the condition is not true at the moment you refresh the lovelace page.

For example:
If I refresh lovelace while input_boolean.popup_c_diningroom_door == ‘on’, the button will have his margin and background color.
If I refresh lovelace while input_boolean.popup_c_diningroom_door == ‘off’, the button won’t have his margin and background color.

My code:

      - type: picture-elements
        image: /local/eg.png
        elements:   
          - type: conditional
            conditions:
              - entity: input_boolean.popup_c_diningroom_door
                state: 'on'
            elements:
              - type: custom:stack-in-card
                title: Esszimmer Tür
                keep:
                  margin: true
                  border_radius: true
                cards:
                          - type: custom:button-card
                            entity: cover.shelly_cover_diningroom_door
                            aspect_ratio: 2/1
                            name: "ZU"
                            style: |
                              ha-card {
                                --keep-background: true;
                                margin-right: 10px;
                                padding-right: 5px;
                                padding-left: 5px;
                                
                              }
                            styles:
                                card:
                                  - background-color: rgba(64, 64, 64,0.6)
                                  - color: white
                                  - font-weight: bold
                            state:
                            - value: 'closed'
                              styles:
                                card:
                                  - background-color: rgba(67, 117, 18,0.8)
            style:
                --paper-card-background-color: rgba(13, 55, 97,0.8)
                --primary-text-color: white
                text-align: center
                font-weight: bold
                top: 50%
                left: 50%
                position: absolute

[RomRider]

Don’t mix card mod and the styles in button card. Everything that you have in style should be moved into

styles:
  card:

[klogg]

Actually, I’m experiencing something similar I think.

Also I’m sorry but there is a lot of code here, I wouldn’t have asked except the same thing came up with @DerFinnn although I don’t think the answer will be the same.

So,
I have three buttons across the top,. whichever one is ‘on’ defines which card is shown.
Here the AFTERNOON CYCLE is selected and it appears correctly.

But if I choose MORNING CYCLE it doesn’t keep the margins unless I press F5.

The code with the conditional is as follows:

#==============
#=== SCHEDULES
#==============
type: vertical-stack
cards:

  #===========================
  #=== VIEW SELECTION BUTTONS
  #===========================
  - type: entities
    entities:
      - type: divider
    style: >
      ha-card {
        background: none;
        margin-top: -1em;
        margin-bottom: -2em;
      }

  - type: custom:stack-in-card
    mode: horizontal
    keep:
      margin: true
      border_radius: true
    cards:
      - !include
        - ../../includes/button_boolean_select.yaml
        - entity: input_boolean.irrigation_show_cycle1
          name: "[[[ var entity_id = 'input_text.irrigation_cycle1_name'; return states[entity_id].state.toUpperCase(); ]]]"
          card_font_size: 16px
          card_font_family: Oswald

      - !include
        - ../../includes/button_boolean_select.yaml
        - entity: input_boolean.irrigation_show_cycle2
          name: "[[[ var entity_id = 'input_text.irrigation_cycle2_name'; return states[entity_id].state.toUpperCase(); ]]]"
          card_font_size: 16px
          card_font_family: Oswald

      - !include
        - ../../includes/button_boolean_select.yaml
        - entity: input_boolean.irrigation_show_cycle3
          name: "[[[ var entity_id = 'input_text.irrigation_cycle3_name'; return states[entity_id].state.toUpperCase(); ]]]"
          card_font_size: 16px
          card_font_family: Oswald
    style: >
      ha-card {
        background: none;
      }

  - type: entities
    entities:
      - type: divider
    style: >
      ha-card {
        background: none;
        margin-top: -2em;
        margin-bottom: -1em;
      }

  - !include section_schedules_cycle1.yaml

  - !include section_schedules_cycle2.yaml

  - !include section_schedules_cycle3.yaml

The code for each cycle is as follows (they are functionally identical)

#============
#=== CYCLE 1
#============
type: conditional
conditions:
  - entity: input_boolean.irrigation_show_cycle1
    state: "on"
card:

  type: custom:stack-in-card
  keep:
    margin: true
  cards:

    #===================
    #=== CYCLE 1 HEADER
    #===================
    - !include
      - item_schedule_cycle_header.yaml
      - cycle: 1

    - type: entities
      entities:
        - type: divider
      style: >
        ha-card {
          margin-top: -1.5em;
          margin-bottom: -1em;
        }

    #==========================
    #=== CYCLE 1 SCHEDULE CARD
    #==========================
    - type: horizontal-stack
      cards:

        #=== Start Time
        - !include
          - item_schedule_cycle_start_time.yaml
          - entity: sensor.irrigation_cycle1_start_time_in_seconds
            cycle: 1

        - type: vertical-stack
          cards:

              #=== Temperature Adjustment Select Button
              - !include
                - ../../includes/button_boolean_check_box.yaml
                - entity: input_boolean.irrigation_cycle1_adjust_for_temperature
                  name: Adjust For Temperature
                  size: 60%
                  card_font_size: 12px
                  card_padding: 0em
                  card_height: 1.75em
                  card_margin_top: 0.2em

              #=== Rainfall Adjustment Select Button
              - !include
                - ../../includes/button_boolean_check_box.yaml
                - entity: input_boolean.irrigation_cycle1_adjust_for_rainfall
                  name: Adjust For Rainfall
                  size: 60%
                  card_font_size: 12px
                  card_padding: 0em
                  card_height: 1.75em
                  card_margin_top: 0.2em

    #========================
    #=== CYCLE 1 DAY BUTTONS
    #========================
    - type: custom:stack-in-card
      mode: horizontal
      keep:
        margin: true
        border_radius: true
      cards:
        - !include
          - ../../includes/button_boolean_select.yaml
          - entity: input_boolean.irrigation_cycle1_every_day
            name: ALL
            off_opacity: 100%
            on_background_color: auto
            on_border: none
            off_color: auto

        - !include
          - ../../includes/button_boolean_select.yaml
          - entity: input_boolean.irrigation_cycle1_mon
            name: Mon

        - !include
          - ../../includes/button_boolean_select.yaml
          - entity: input_boolean.irrigation_cycle1_tue
            name: Tue

        - !include
          - ../../includes/button_boolean_select.yaml
          - entity: input_boolean.irrigation_cycle1_wed
            name: Wed

        - !include
          - ../../includes/button_boolean_select.yaml
          - entity: input_boolean.irrigation_cycle1_thu
            name: Thu

        - !include
          - ../../includes/button_boolean_select.yaml
          - entity: input_boolean.irrigation_cycle1_fri
            name: Fri

        - !include
          - ../../includes/button_boolean_select.yaml
          - entity: input_boolean.irrigation_cycle1_sat
            name: Sat

        - !include
          - ../../includes/button_boolean_select.yaml
          - entity: input_boolean.irrigation_cycle1_sun
            name: Sun
      style: >
        ha-card {
          margin-top: -1em;
          margin-bottom: -1em;
        }

    #===========================
    #=== CYCLE 1 ZONE DURATIONS
    #===========================
    - type: entities
      entities:
    
        #=== Zone 1
        - !include
          - item_schedule_zone_duration_line.yaml
          - cycle: 1
            zone: 1

        #=== Zone 2
        - !include
          - item_schedule_zone_duration_line.yaml
          - cycle: 1
            zone: 2

        #=== Zone 3
        - !include
          - item_schedule_zone_duration_line.yaml
          - cycle: 1
            zone: 3

        #=== Zone 4
        - !include
          - item_schedule_zone_duration_line.yaml
          - cycle: 1
            zone: 4

        #=== Zone 5
        - !include
          - item_schedule_zone_duration_line.yaml
          - cycle: 1
            zone: 5

        #=== Zone 6
        - !include
          - item_schedule_zone_duration_line.yaml
          - cycle: 1
            zone: 6

        #=== Zone 7
        - !include
          - item_schedule_zone_duration_line.yaml
          - cycle: 1
            zone: 7

        #=== Zone 8
        - !include
          - item_schedule_zone_duration_line.yaml
          - cycle: 1
            zone: 8

[RomRider]

I think in those complex cases, it is better to use card-mod (as it hacks into how the card is created, which is not the case with stack-in-card, I couldn’t do the same as it’s already overridden by card-mod )

I’m going to have a look, but I don’t feel super confident in the resolution of this issue (if we want to keep the performance…)

[klogg]

I only just refactored all this to stop using mod_card based on Thomas’ instance that it was almost never a good idea to use it but now I’ve gone back to using card-mod (and mod_card where appropriate) and it all works well, thanks for the nudge!

Following on though, I now have a slightly different issue. I have a similar set of ‘page selection’ buttons for some Settings but when I change page my Markdown ‘titles’ don’t refresh without F5.

I know this is a lot to look at for one person’s niche case so I understand if you can’t help but…

Starting at the TEMPERATURE settings page

Then changing to ‘RAINFALL’ no headings show correctly

And after pressing F5 the headings show

Main page config

#=============
#=== SETTINGS
#=============
type: vertical-stack
cards:

  #===============================
  #=== SETTINGS SELECTION BUTTONS
  #===============================
  - type: entities
    entities:
      - type: divider
    style: >
      ha-card {
        background: none;
        margin-top: -1em;
        margin-bottom: -2em;
      }

  - type: custom:stack-in-card
    mode: horizontal
    keep:
      margin: true
      border_radius: true
    cards:
        - type: custom:button-card
          name: -- SETTINGS --
          styles:
            card:
              - font-size: 16px
              - font-family: "[[[ return states['input_text.irrigation_ui_font_family'].state ]]]"
              - background: none
              - box-shadow: none
              - margin: 0.1em 0em 0em 0em

        - !include
          - ../../includes/button_boolean_select.yaml
          - entity: input_boolean.irrigation_show_general_settings
            name: GENERAL
            card_font_size: 16px
            card_font_family: Oswald

        - !include
          - ../../includes/button_boolean_select.yaml
          - entity: input_boolean.irrigation_show_rainfall_settings
            name: RAINFALL
            card_font_size: 16px
            card_font_family: Oswald

        - !include
          - ../../includes/button_boolean_select.yaml
          - entity: input_boolean.irrigation_show_temperature_settings
            name: TEMPERATURE
            card_font_size: 16px
            card_font_family: Oswald

Temperature settings config (top part, the Rainfall config is the same principle)

#=========================
#=== TEMPERATURE SETTINGS
#=========================
type: conditional
conditions:
  - entity: input_boolean.irrigation_show_temperature_settings
    state: "on"
card:
  type: custom:stack-in-card
  cards:

    - type: entities
      entities:
        - type: divider
      style: >
        ha-card {
          margin-top: -0.5em;
          margin-bottom: -1.5em;
        }

    #=== Temperature Settings
    - !include
        - ../../includes/titles.yaml
        - title: Temperature Settings
          font_size: 18px
          font_family: Oswald
          color: var(--secondary-text-color)
          margin_bottom: -1.5em
          margin_left: 0.5em

    - type: entities
      entities:
        #=== Number of days to use
        - !include
            - item_settings_line.yaml
            - entity: input_number.irrigation_days_of_temp_history_used
              name: Number of days data to use
              secondary_info: (0 to 4) If zero only the temperature today is used

        #=== Temperature Baseline
        - !include
            - item_settings_line.yaml
            - entity: input_number.irrigation_temperature_baseline
              name: Baseline temperature
              secondary_info: Exceeding this temperature increases the watering time

Titles config

# lovelace_gen

type: markdown
style: |
  ha-card {
    font-size: {{ font_size | default('20px') }};
    font-family: {{ font_family | default('var(--primary-font-family)') }};
    color: {{ color | default('auto') }};
    height: {{ height | default('3em') }};
    background-color: {{ background_color | default('transparent') }};
    margin-top: {{ margin_top | default('-0.5em') }};
    margin-left: {{ margin_left | default('-0.5em') }};
    margin-bottom: {{ margin_bottom | default('-0.5em') }};
    box-shadow: none;
  }
content: {{ title }}

[sbmlat (shreram)]

For some reason, I couldn’t get the curved borders shown for button cards. They show up only when I click on them. Is there any setting that I am missing? @RomRider

              - type: custom:stack-in-card
                keep: 
                  background: true
                  border_radius: true
                  # box_shadow: true
                mode: vertical
                cards:
                  - type: horizontal-stack
                    cards:

[mkanet]

Hi @RomRider

Incompatibility with Home Assistant version .110

After upgrading to Home Assistant .110 today, all my cards that use Stack-in-Card (that are part of a vertical-stack) aren’t displaying correctly anymore. This also happens with horizontal-stacks too. This issue is very easy to reproduce.

The weird thing is that this issue doesn’t happen with my Android app or Windows Edge web browser (legacy).

I just reported this issue on the the Stack-In-Card Github repository.

I would appreciate any suggestions/workarounds for this issue other than reverting to an older version of Home Assistant or switching to a different web browser.

Thank you for your time.

[RomRider]

It’s nice to say that it’s not working as expected anymore but you don’t explain what is not working for you I screenshot might help with some explanation of what you expect.

[Will711990]

Windows 10 and Firefox:
In my case every cards using custom:vertical-stack-in-card as type do not appear…
until I use F5 to refresh the internet page.

If I close the browser window, and open again, cards disappear. Until F5, etc…

On Mobile App:
iPhone and iPad, some custom:vertical-stack-in-card are displayed but not all… I can’t discriminate cases…

No error in the log…

[RomRider]

This is stack-in-card, not vertical-stack-in-card

[Will711990]

Oups sorry…

[RomRider]

Version 0.1.1

Bugfixes

• Support for > 0.110 (Fix #8)

[davefi (Dave)]

Not sure if this is a bug in stack-in-card or button-card or if I am missing something - I tried searching both threads but was hard to find anything specific, so thought I would ask here first.

If I use button-card with color_type: label-card within a stack-in-card, the label background is rendered in the chosen colour, and then fades out to the standard card colour (just once, it does NOT loop like the gif shows below!). If I remove the stack-in-card, it works as expected.

OK:

      - type: custom:button-card
        color_type: label-card
        color: rgb(129, 0, 0)
        name: Uptime & Updates

Not OK:

      - type: custom:stack-in-card
        mode: vertical
        cards:
          - type: custom:button-card
            color_type: label-card
            color: rgb(129, 0, 0)
            name: Uptime & Updates

I’ve confirmed it does it with default theme as well.

EDIT: scrap that, I completely overlooked the keep option - all fixed now!

[nasgul]

Very nice card. Thank you.
I am having some trouble with the border setting
using this code:

          - type: custom:stack-in-card  ## SECOND VERTICAL STACK ----- TEMPERATURE : MEDIA PLAYER
            mode: vertical
            cards:                    
              - type: weather-forecast
                entity: xxxxxxxxx            ##### WEATHER FORECAST CARDS
                name: xxxxxxx
                style: |
                  ha-card {
                    color: white;
                    font-variant: small-caps;
                    border-top: 3px double grey;
                    border-bottom: 3px double grey;
                    height: 185px;
                  }
                  .card-header {
                    font-size: 23px;
                    color: white;
                    text-align: center;
                    }

the bottom border does not extend to the edge of the card

Any idea what I am doing wrong?

[Mariusthvdb (Marius)]

this is coming and going, but now on 0.111 the issue is fixed: somehow there are borders around my buttons in a stack-in-card using a horizontal stack,

and I cant get rid of them, please have a look what I could change in the code:

the card:

type: custom:stack-in-card
keep:
  background: true
cards:

  - type: custom:button-card
    name: Set Hue Outdoors sensitivity
    template: button_default_title_fixed

  - !include /config/lovelace/buttons/buttons_set_hue_outdoors_sensitivity.yaml

  - type: entities
    show_header_toggle: false
    entities:
      - input_select.select_hue_outdoors_motion_sensor
      - entity: script.set_hue_outdoors_sensitivity
        action_name: Set

the include:

type: horizontal-stack
cards:

  - type: custom:decluttering-card
    template: set_hue_outdoors_sensitivity
    variables:
      - option: 'Very low'
      - icon: mdi:numeric-0-box-multiple-outline
      - label: Very low

  - type: custom:decluttering-card
    template: set_hue_outdoors_sensitivity
    variables:
      - option: 'Low'
      - icon: mdi:numeric-1-box-multiple-outline
      - label: Low

  - type: custom:decluttering-card
    template: set_hue_outdoors_sensitivity
    variables:
      - option: 'Medium'
      - icon: mdi:numeric-2-box-multiple-outline
      - label: Medium

  - type: custom:decluttering-card
    template: set_hue_outdoors_sensitivity
    variables:
      - option: 'High'
      - icon: mdi:numeric-3-box-multiple-outline
      - label: High

  - type: custom:decluttering-card
    template: set_hue_outdoors_sensitivity
    variables:
      - option: 'Very high'
      - icon: mdi:numeric-4-box-multiple-outline
      - label: Very high

the decluttering template:

card:
  type: custom:button-card
  template: button_picture_script_small
  show_label: true
  size: 50%
  icon: '[[icon]]'
  label: '[[label]]'
  tap_action:
    action: call-service
    service: script.buttons_set_hue_outdoors_sensitivity
    service_data:
      option: '[[option]]'
  state:
    - operator: template
      value: >
        [[[
        return states['input_select.select_hue_outdoors_sensitivity'].state == '[[option]]'
        ]]]
      color: 'silver'
    - operator: default
      styles:
        background:
          - color: '#595959'
        name:
          - color: 'white'

and the button template finally:

button_picture_script_small:
  size: 70%
  show_state: false
  show_label: false
  show_name: true
  show_entity_picture: true
  color_type: card
  aspect_ratio: 1/1
  tap_action:
    action: none
    haptic: light
  hold_action:
    action: more-info
    haptic: success
  color: '#555B65'
  styles:
    name:
      - padding-left: 3px
      - font-weight: bold
      - font-family: Helvetica
      - font-size: 13px
      - color: 'lightgrey'

have the exact same issue on another stack-in-card with a horizontal-stack:

  - type: custom:hui-element
    card_type: horizontal-stack
    cards:
      - type: picture-entity
        style: |
          ha-card {
            animation: {% if is_state('persistent_notification.trash_notification', 'notifying') and
                               states('sensor.saver_trash_today') != 'Geen' %} blink 2s linear infinite;
                       {% else %} none
                       {% endif %}
            }
          @keyframes blink {
            100% {opacity: 0;}
            }

        entity: sensor.saver_trash_today
        name: Vandaag
        show_state: false
        state_image:
          'gft': /local/mijnafvalwijzer/gft.png
          'papier': /local/mijnafvalwijzer/papier.png
          'restafval': /local/mijnafvalwijzer/restafval.png
          'pbd': /local/mijnafvalwijzer/pbd.png
          'Geen': /local/mijnafvalwijzer/kliko_geen.png
      - type: picture-entity
        style: |
          ha-card {
            animation: {% if is_state('persistent_notification.trash_notification', 'notifying') and
                               states('sensor.saver_trash_tomorrow') != 'Geen' %} blink 2s linear infinite;
                       {% else %} none
                       {% endif %}
            }
          @keyframes blink {
            100% {opacity: 0;}
            }
        entity: sensor.saver_trash_tomorrow
        name: Morgen
        show_state: false
        state_image:
          'gft': /local/mijnafvalwijzer/gft.png
          'papier': /local/mijnafvalwijzer/papier.png
          'restafval': /local/mijnafvalwijzer/restafval.png
          'pbd': /local/mijnafvalwijzer/pbd.png
          'Geen': /local/mijnafvalwijzer/kliko_geen.png
      - type: picture-entity
        entity: sensor.saver_trash_day_after_tomorrow
        name: Overmorgen
        show_state: false
        state_image:
          'gft': /local/mijnafvalwijzer/gft.png
          'papier': /local/mijnafvalwijzer/papier.png
          'restafval': /local/mijnafvalwijzer/restafval.png
          'pbd': /local/mijnafvalwijzer/pbd.png
          'Geen': /local/mijnafvalwijzer/kliko_geen.png

showing like:

where before, these were flat and attached, no little corners, no shadow, nothing.

please have a look? thanks!

[sparkydave (🇦🇺 Dave)]

I just started using this to try and make an existing vertical stack look neater. Unfortunately it seems to be combining the background transparencies and ending up making things darker.

Original vertical stack (using GUI editor):

Code for stack-in-card:

cards:
  - card:
      entity: media_player.lounge_tv
      group: false
      hide:
        icon_state: false
        power_state: false
      icon: 'mdi:television'
      type: 'custom:mini-media-player'
    conditions:
      - entity: media_player.lounge_tv
        state_not: 'off'
    type: conditional
  - card:
      entity: media_player.onkyo_amp
      group: false
      hide:
        controls: true
        icon_state: false
        power_state: false
        progress: true
      icon: 'mdi:amplifier'
      type: 'custom:mini-media-player'
      volume_stateless: true
    conditions:
      - entity: media_player.onkyo_amp
        state_not: 'off'
    type: conditional
  - card:
      entity: media_player.everywhere
      group: false
      hide:
        icon_state: false
        power_state: false
      icon: 'mdi:speaker-wireless'
      type: 'custom:mini-media-player'
    conditions:
      - entity: media_player.everywhere
        state_not: 'off'
    type: conditional
  - card:
      entity: media_player.all_except_office
      group: false
      hide:
        icon_state: false
        power_state: false
      icon: 'mdi:speaker-wireless'
      type: 'custom:mini-media-player'
    conditions:
      - entity: media_player.all_except_office
        state_not: 'off'
    type: conditional
  - card:
      entity: media_player.house
      group: false
      hide:
        icon_state: false
        power_state: false
      icon: 'mdi:speaker-wireless'
      type: 'custom:mini-media-player'
    conditions:
      - entity: media_player.house
        state_not: 'off'
    type: conditional
  - card:
      entity: media_player.house_except_office
      group: false
      hide:
        icon_state: false
        power_state: false
      icon: 'mdi:speaker-wireless'
      type: 'custom:mini-media-player'
    conditions:
      - entity: media_player.house_except_office
        state_not: 'off'
    type: conditional
  - card:
      entity: media_player.lounge_and_office
      group: false
      hide:
        controls: true
        icon_state: false
        power_state: false
      icon: 'mdi:speaker-wireless'
      type: 'custom:mini-media-player'
    conditions:
      - entity: media_player.lounge_and_office
        state_not: 'off'
    type: conditional
  - card:
      entity: media_player.googlehome3019
      group: false
      hide:
        controls: true
        icon_state: false
        power_state: false
        progress: true
      icon: 'mdi:speaker-wireless'
      type: 'custom:mini-media-player'
    conditions:
      - entity: media_player.googlehome3019
        state_not: 'off'
    type: conditional
  - card:
      entity: media_player.lounge_speakers
      group: false
      hide:
        controls: true
        icon_state: false
        power_state: false
        progress: true
      icon: 'mdi:speaker-wireless'
      type: 'custom:mini-media-player'
    conditions:
      - entity: media_player.lounge_speakers
        state_not: 'off'
    type: conditional
  - card:
      entity: media_player.bedroom
      group: false
      hide:
        controls: true
        icon_state: false
        power_state: false
        progress: true
      icon: 'mdi:speaker-wireless'
      type: 'custom:mini-media-player'
    conditions:
      - entity: media_player.bedroom
        state_not: 'off'
    type: conditional
  - card:
      entity: media_player.googlehome0147
      group: false
      hide:
        controls: true
        icon_state: false
        power_state: false
        progress: true
      icon: 'mdi:speaker-wireless'
      type: 'custom:mini-media-player'
    conditions:
      - entity: media_player.googlehome0147
        state_not: 'off'
    type: conditional
  - card:
      entity: media_player.googlehome2136
      group: false
      hide:
        controls: true
        icon_state: false
        power_state: false
        progress: true
      icon: 'mdi:speaker-wireless'
      type: 'custom:mini-media-player'
    conditions:
      - entity: media_player.googlehome2136
        state_not: 'off'
    type: conditional
  - card:
      entity: media_player.chromecastaudio8002
      group: false
      hide:
        controls: true
        icon_state: false
        power_state: false
        progress: true
      icon: 'mdi:speaker-wireless'
      type: 'custom:mini-media-player'
    conditions:
      - entity: media_player.chromecastaudio8002
        state_not: 'off'
    type: conditional
  - card:
      entity: media_player.alfresco_sony
      group: false
      hide:
        icon_state: false
        power_state: false
      icon: 'mdi:speaker-wireless'
      type: 'custom:mini-media-player'
      volume_stateless: true
    conditions:
      - entity: media_player.alfresco_sony
        state_not: 'off'
    type: conditional
mode: vertical
type: 'custom:stack-in-card'

Stack-in-card result:

Is there something I can do to prevent the card transparencies combining and going dark?

[Denman2103 (Dennis)]

Hello,

i’m trying to make a card with a label and 2 buttons cards in one card. So i use stack-in-card but the color of the label don’t work.

When i set the color in de config editor i see the color for 1 second and then it is white again. Also when i save the card the label is still white.
This is what i want and what i see only for 1 second while configurating the card.

After 1 second it became like this:

What i’m doing wrong?

This is the code:

type: 'custom:stack-in-card'
cards:
  - type: vertical-stack
    cards:
      - type: 'custom:button-card'
        name: Music
        color: var(--disabled-text-color)
        color_type: card

[RomRider]

Check the doc on github, but this should be the solution:

keep:
  background: true