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

[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"

[Jens_Wymeersch]

@RomRider I’ve been trying card-mod, mod-card, layout-card, etc in multiple scenarios without success, and I’m ready to call it a day. Can you please let me know if you can actually change the height of the cards within the stack-in-card ? Or use layout cards within this card ?

[Ildar_Gabdullin]

@Jens_Wymeersch

Can you please let me know if you can actually change the height of the cards within the stack-in-card ?

Card-mod - Add css styles to any lovelace card

Styling stack-in-card (specially for @Jens_Wymeersch): Similar to vertical-stack: type: 'custom:stack-in-card' title: Some title keep: background: true box_shadow: true margin: true outer_padding: true border_radius: true cards: - type: entities entities: - entity: sun.sun - entity: sun.sun card_mod: style: | ha-card { height: 200px !important; } - type: entity entity: sun.sun card_mod: style: | ha-card { …

[kravalli7]

Does margin work, because the card isn’t moving up. It’s just the icon that is clipping out of the card.

  - type: custom:button-card
    tap_action:
      action: call-service
      service: script.fernseher_ok
    icon: mdi:circle-outline
    show_name: false
    icon_height: 50px
    styles:
      card:
        - margin-top: '-20px'
        - border-radius: 0px
        - border: 2px
        - padding: 0
        - box-shadow: none

this is inside a custom:stack-in-card ass you can see