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

That’s easy enough
Change every instance of “vertical-stack-in-card” to “stack-in-card”

That’s it :slight_smile:
Default will be vertical anyway, if you wanna be “precise”, you can add just underneath
“mode: vertical”

Hope this help :slight_smile:

EDIT: Just to clarify, you need to intall the card and add it to the resources first :wink:

Could you try without the quotes please?
--keep-background: true;

sure, unfortunately doesnt help. this is my config:

  - type: custom:stack-in-card
    cards:
      - type: markdown
        style: |
          ha-card {
            background: url('/local/images/alarm_bell.png');
            background-size: cover;
            --keep-background: true;
          }

same result I am afraid.

btw, considering that people wouldn’t set a styling / background if they wouldn’t want it the be kept, shouldn’t this be default, and not need a special setting in the style section? It is what made the vertical stack card a bit awkward, setting a style which wasn’t used for the whole stack. Would hope your stack-in-card could set a background for the full stack in the top level of the card, and set dedicated background per stacked card if so configured (like in this case, creating a sort of header), or like here:

  - type: custom:vertical-stack-in-card
    cards:
      - type: picture
        image: /local/images/nmbs.png
        hold_action:
          action: url
          url_path: https://www.belgiantrain.be/nl
      - type: entities
        style: |
          ha-card {
            --ha-card-background: rgb(0,100,182);
            color: rgb(217,242,251);
          }
        title: Nmbs reizen
        show_header_toggle: false
        entities:
          - sensor.essen_brussel_noord
          - sensor.brussel_noord_essen
          - sensor.roosendaal_essen
          - sensor.essen_roosendaal

          - sensor.nmbs_live_brussel_noord
          - sensor.nmbs_live_essen

setting a background color for one of the stacked cards:

neither work now(yet…) in the stack-in-card

Could you try the beta release 0.0.2-1 please and let me know the result ? :slight_smile:
(You have to display the beta in HACS for it to show up)
This should now work:

        style: |
          ha-card {
            background: url('/local/images/alarm_bell.png');
            background-size: cover;
            --keep-background: true;
          }

Will try, but not using HACS. Do you have a link for the beta repo ? Never mind, tried this https://github.com/custom-cards/stack-in-card/releases/tag/0.0.2-1

doesnt help, sorry, no background, image or color

Is the javascript console showing 0.0.2-0 (forgot to update the display to 0.0.2-1, don’t worry) as the version of the card? (I’ve tested with your setup and card-mod and for me it works well)


yes!, it has come alive, just had to wait the full length of Goodfellas :wink:

must have been a cache thing, though I’ve refreshed more than a few times…
Nice!
thank you so much :+1:

working just nicely:

:tada::tada: Version 0.0.3 :tada::tada:

Bug Fixes

  • Fixes some problems with cards not being stacked properly
  • Fixes some issues with --keep-background

Could you share your config please? I don’t see this issue on my side.

Update to the latest decluttering-card, there was an issue with the previous update of decluttering-card when put inside a stack-in-card or vertical-stack-in-card.
Please let me know the result :blush:

Hey Romrider,

not sure if I need to set anything in styles, special for the stack-in-card, but would you please have a look if this styles config would be completely supported as such?

type: custom:stack-in-card
cards:
  - type: entities
    title: Entities Unavailable
    show_header_toggle: false
    style:
      .: |
      "#states > div:nth-child(n+1) > fold-entity-row":
        $:
         "#head > entity-row-maker > hui-section-row":
           $: |
             div.divider {
               height: 0px;
             }
             div.label {
               font-weight: bold;
             }

seems my label font doesn’t turn bold, but I am not sure it did so in the latest versions of VSIC either…

I think you should remove the | here.

type: custom:stack-in-card
cards:
  - type: entities
    title: Entities Unavailable
    show_header_toggle: false
    style:
      .:
        "#states > div:nth-child(n+1) > fold-entity-row":
          $:
           "#head > entity-row-maker > hui-section-row":
             $: |
               div.divider {
                 height: 0px;
               }
               div.label {
                 font-weight: bold;
               }

hey @RomRider thanks for this card. Iam trying to implement it in my HA however I get this issue. I have installed it via HACS.

Can you please help?

thanks.

Did you add it to your resources list? Did you restart your instance? It also seems that in 0.107 and onwards you need to restart after adding a card to the list of resources.

the resource list has disappeared from my raw config for some reason :frowning: I am on 0.107

Check the releases notes:

1 Like

right I have put it in my resource list and I restarted my HA, however I get the same error as before

Are you supposed to have a - at the beginning?

I have just copied your example in your first post and trying to see if it works. so you had a ‘-’

ok I removed ‘-’ and it works now. thanks