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

[jukkevp (Jurgen)]

Hi,

Maybe somebody can help with my next question, because I’m lost in space! -)
I am trying to build a lovelace card with buttons who are able to show different other cards below with entities.

My goal is this screenshot example here:

But i’m not able to get this done!
This is my result at the moment:

Everything on my card is horizontal!
And I want the cards with my entities results lower, like in the example.

And I’m also not able to find a option to customize my font size in my buttons!
Also it would be nice to have my selected button in a kind of highlighted state!

type: 'custom:stack-in-card'
mode: horizontal
cards:
  - type: 'custom:button-card'
    name: Woonkamer
    icon: 'hass:sofa'
    tap_action:
      action: navigate
      navigation_path: '#p1'
  - type: 'custom:button-card'
    name: Slaapkamer Ouders
    icon: 'hass:bed'
    tap_action:
      action: navigate
      navigation_path: '#p2'
  - type: 'custom:button-card'
    name: Slaapkamer Lukas
    icon: 'hass:bed'
    tap_action:
      action: navigate
      navigation_path: '#p3'
  - type: 'custom:button-card'
    name: Slaapkamer Jasper
    icon: 'hass:bed'
    tap_action:
      action: navigate
      navigation_path: '#p4'
  - type: 'custom:state-switch'
    entity: hash
    default: p1
    states:
      p1:
        type: horizontal-stack
        cards:
          - type: sensor
            entity: sensor.netatmo_kerkstraat_10_woonkamer_temperature
            graph: line
            name: Temperatuur
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_humidity
            name: Luchtvochtigheid
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_co2
            name: Co2
      p2:
        type: horizontal-stack
        cards:
          - type: sensor
            entity: sensor.slaapkamer_ouders
            naam: Temperatuur
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_ouders_humidity
            name: Luchtvochtigheid
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_ouders_co2
            name: Co2
      p3:
        type: horizontal-stack
        cards:
          - type: sensor
            entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_temperature
            naam: Temperatuur
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_humidity
            name: Luchtvochtigheid
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_co2
            name: Co2
      p4:
        type: horizontal-stack
        cards:
          - type: sensor
            entity: sensor.slaapkamer_jasper
            name: Temperatuur

Thx,

Jurgen

[ASNNetworks]

What do you expect if you use mode: horizontal?

You have the stack-in-card as the main card and you use mode:horizontal. That means that ALL cards inside that stack will be displayed horizontal. You have to put the main card as vertical an inside that card, all horizontal-stacks. So you get:

STACK-IN-CARD VERTICAL
  - HORIZONTAL-STACK
  - HORIZONTAL-STACK
  - HORIZONTAL-STACK
  - HORIZONTAL-STACK

This translates in multiple horizontal stacks in a vertical stack. So exactly like the first picture. Also, you don’t really need stack-in-card for this, unless you need the extra options or you’re trying to place it inside a different card, like picture-elements. You can just use vertical-stack card (like you use horizontal-stack).

[jukkevp (Jurgen)]

Ok, but after adapting my config I get this:

My sensors are almost correct, but now my buttons are vertical!
I guess I don’t understand the whole stuff correctly.

type: 'custom:stack-in-card'
mode: vertical
cards:
  - type: 'custom:button-card'
    name: Woonkamer
    icon: 'hass:sofa'
    size: 30px
    tap_action:
      action: navigate
      navigation_path: '#p1'
  - type: 'custom:button-card'
    name: Slaapkamer Ouders
    icon: 'hass:bed'
    size: 30px
    tap_action:
      action: navigate
      navigation_path: '#p2'
  - type: 'custom:button-card'
    name: Slaapkamer Lukas
    icon: 'hass:bed'
    size: 30px
    tap_action:
      action: navigate
      navigation_path: '#p3'
  - type: 'custom:button-card'
    name: Slaapkamer Jasper
    icon: 'hass:bed'
    size: 30px
    tap_action:
      action: navigate
      navigation_path: '#p4'
  - type: 'custom:state-switch'
    entity: hash
    default: p1
    states:
      p1:
        type: horizontal-stack
        cards:
          - type: sensor
            entity: sensor.netatmo_kerkstraat_10_woonkamer_temperature
            graph: line
            name: Temperatuur
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_humidity
            name: Luchtvochtigheid
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_co2
            name: Co2
      p2:
        type: horizontal-stack
        cards:
          - type: sensor
            entity: sensor.slaapkamer_ouders
            naam: Temperatuur
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_ouders_humidity
            name: Luchtvochtigheid
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_ouders_co2
            name: Co2
      p3:
        type: horizontal-stack
        cards:
          - type: sensor
            entity: >-
              sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_temperature
            naam: Temperatuur
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_humidity
            name: Luchtvochtigheid
          - type: sensor
            graph: line
            entity: sensor.netatmo_kerkstraat_10_woonkamer_slaapkamer_lukas_co2
            name: Co2
      p4:
        type: horizontal-stack
        cards:
          - type: sensor
            entity: sensor.slaapkamer_jasper
            name: Temperatuur

In need 2 rows, one row with my buttons, and the other with my sensors.

[ASNNetworks]

No, that’s not what I wrote. You now created:

STACK-IN-CARD VERTICAL
  - BUTTON CARD
  - BUTTON CARD
  - BUTTON CARD
  - BUTTON CARD
  - HORIZONTAL-STACK

You need to create the button-card inside a horizontal-stack, just like all other rows you created. This is what it actually means:

So you have ONE vertical-stack, that places all cards inside it under another. Then inside that, you place horizontal-stacks, containing cards you want in a horizontal line.

In need 2 rows, one row with my buttons, and the other with my sensors.

If you need two rows, then you need to create two rows, just like I explained. A horizontal-stack is a row of cards. So if you need 2 rows, create two horizontal-stacks and put both stacks inside a vertical-stack. Makes sense?

[jukkevp (Jurgen)]

Thanks for your help ASNNetworks!

Here my result:
Is it also possible to highlight the active button?
And adapt my button font size?

[ASNNetworks]

That is all possible, but that’s not what this thread is about. That is all up to custom:button-card. You should read the docs of button-card first, because it has a lot of options and is very powerful. All is possible, but you need to make it work and spend a lot of time figuring stuff out. You need to work with state. If you need help regaring button-card, you can ask here: Lovelace: Button card - Share your Projects! / Lovelace & Frontend - Home Assistant Community (home-assistant.io)

[jukkevp (Jurgen)]

Thx I will do!

[KaherdinTristan (Andrew)]

Thanks for a good card!
Q; Can someone tell me if, and maybe how, I could change the vertical position of the title in my card, as shown

type: 'custom:stack-in-card'
mode: horizontal
title: Badrum
keep:
  box_shadow: false
  margin: true
  border_radius: false
  background: false
  outer_padding: false
cards:
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.badrummet
    hours_to_show: 72
    line_color: green
    line_width: 4
    font_size: 80
    hour24: true
    animate: true
    show:
      name: false
      icon: false
      extrema: true
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.badrummet_2
    hours_to_show: 72
    line_color: grey
    line_width: 4
    font_size: 80
    hour24: true
    animate: true
    show:
      name: false
      icon: false
      extrema: true

[Mariusthvdb (Marius)]

HI @RomRider

trying to get a background on a horizontal-stack (with a couple of custom:button-card s) in a stack-in-card, I am stuck. Apparently we can not (yet) set a background on a horizontal stack?

as explained here I’ve tried the various options known to me, and some alternatives, none of which come close to what I am looking for:
Id like the background to only show on the horizontal stack, and have the reset of the stack-in-card as regular card.

Would you know of a way, or, if not, be willing to see if either of your cards could be FR’ed…?

thanks for having a look!

[bigverm23]

where is the actual .js file for this? cannot find it on the page anywhere.

[RomRider]

It is in the releases, on github.

[PedroKTFC]

I think I’m being thick but I can’t seem to keep a margin between each card in the stack. This is what I’ve put together without any joy. Can you point me to what I should be doing. Thanks

type: 'custom:stack-in-card'
keep:
  - margin: 'true'
title: Living room
cards:
  - type: entities
    entities:
      - switch.light
      - switch.telly
  - type: media-control
    name: Sonos Beam
    entity: media_player.living_room
  - type: media-control
    entity: media_player.living_room_tv

[RomRider]

margin: true not margin: 'true'

[Jens_Wymeersch]

Hi Rom, again an amazing card that I’m trying to fit in… I had some trouble initially figuring out how the background works but got this solved.
One maybe stupid question, but is there a simple way to play with the size and styling of the card ? Currently I tried using card-mod but without success.

[ASNNetworks]

Have you tried using mod-card (not card-mod, but is part of card-mod_. GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card

Since stack-in-card doesn’t gave an actual card, you need mod-card. Same applies to cards like vertical-stack etc.

[ASNNetworks]

Check your indentations. Right at the top, below the mod-card. Whenever you see: card (and not cards), this ALWAYS means the code expects ONE card. So no array (-).

So leave out the (-) before the stack in card and put the indents correct, then the code is correct. (I’m on mobile right now, so difficult copy/pasting your code with fix).

[Jens_Wymeersch]

Thank you. After another try adding card-mod, it looks like I can change the background, margin, padding of the card but not width nor length. Am I missing something ?

[ASNNetworks]

Hard to say since you deleted your post . But I recommend you to take a look in the card-mod thread. Most likely there already has been code shared regarding this. If not, some amazing people there can help.

Card-mod - Add css styles to any lovelace card

This is not a custom card. Instead it’s a plugin which changes the way all other cards work How about this? type: entities style: | ha-card { color: red; } entities: - light.bed_light - light.ceiling_lights - light.kitchen_lights [51] Not a custom: in sight. Or this? [mov] (Please click this gif to open it. It seems to be prone to artifacting when compressed) Or how about changing what happens when you click the name or icon in an entities-card? FANTASTIC POST BY ILDAR…

[Jens_Wymeersch]

I’m already on that track, but also looking at layout card. I think the latter, should be the way forward based on what i’ve seen.
My intent is to have a small card where you can change the colour, Brightness of the light without opening the card itself. The size should be as the other cards.

      - type: "custom:stack-in-card"
        title: My Stack In Card
        keep:
          background: true
          outer_padding: true
          margin: true
        modus: vertical
        card_mod:
          style: |
            ha-card {
              --ha-card-background: teal;
            }
        cards:
          - type: entities
            entities:
              - type: "custom:slider-entity-row"
                entity: input_number.input_color
                full_row: true
                hide_state: true
                attribute: hue
            style: |
              ha-card {
                background: linear-gradient(to right, rgb(255,0,0) 0%, rgb(255,255,0) 16.6%, rgb(0,255,0) 33.2%, rgb(0,255,255) 49.8%, rgb(0,0,255) 66.4%, rgb(255,0,255) 83%, rgb(255,0,0) 100%);
              }
          - type: entities
            entities:
              - type: "custom:slider-entity-row"
                entity: input_number.input_color_temp
                full_row: true
                hide_state: true
                attribute: hue
            style: |
              ha-card {
                background: linear-gradient(to right, rgb(195, 209, 255) 0%, rgb(255,255,255) 50%, rgb(255, 169, 87) 100%);
              }

[Jens_Wymeersch]

@ASNNetworks I’ve been able to progress. I got the card to the size I wanted but now within the card, I want to change the size of each card which seems to be impossible. Any ideas ?

code

cards:
  - type: horizontal-stack
    cards:
      - type: "custom:stack-in-card"
        keep:
          background: true
          outer_padding: true
          margin: true
        modus: vertical
        triggers_update:
            - sun.sun
        card_mod:
          style: |
            ha-card {
              height: 100px;
              background-color: var(--primary-background-color)
              box-shadow: >
                [[[
                  if (states['sun.sun'].state == "below_horizon")
                    return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
                  else if (states['sun.sun'].state == "above_horizon")
                    return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
                ]]]
            }
        cards:
          - type: entities
            entities:
              - type: "custom:slider-entity-row"
                entity: input_number.input_color
                full_row: false
                hide_state: true
                attribute: hue
            style: |
              ha-card {
                background: linear-gradient(to right, rgb(255,0,0) 0%, rgb(255,255,0) 16.6%, rgb(0,255,0) 33.2%, rgb(0,255,255) 49.8%, rgb(0,0,255) 66.4%, rgb(255,0,255) 83%, rgb(255,0,0) 100%);
              }
          - type: entities
            entities:
              - type: "custom:slider-entity-row"
                entity: input_number.input_color_temp
                full_row: true
                hide_state: true
                attribute: hue
            style: |
              ha-card {
                background: linear-gradient(to right, rgb(195, 209, 255) 0%, rgb(255,255,255) 50%, rgb(255, 169, 87) 100%);
              }
      - type: "custom:button-card"
        entity: light.master_colour_spots
        icon: "mdi:led-strip"