Add buton card in columns

Configuration Frontend
1

Good morning
I have configured my roller shutters so that when I press on it the roller shutter lowers indicating the return of “Closed” state as well as the color red.

Capture d’écran 2023-07-20 à 19.03.52
Capture d’écran 2023-07-20 à 19.03.52766×998 18.3 KB 

type: horizontal-stack
title: Volets
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_bureau_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        name: Garage
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_hangar_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_garage_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_baie_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open

When the shutters are open, the status feedback shows open and the shutters are displayed in white color.

What I’m now trying to do, and rather than having buttons separated from each other, I want to put them in a single column like glance.

Capture d’écran 2023-07-20 à 18.58.16
Capture d’écran 2023-07-20 à 18.58.161948×886 79.8 KB 

type: glance
title: Volets
entities:
  - entity: switch.volet_garage_md
    tap_action:
      action: toggle
    name: Hangar

Capture d’écran 2023-07-20 à 19.00.50
Capture d’écran 2023-07-20 à 19.00.501980×830 58.6 KB

The problem is that I can’t modify the image according to the opening and closing of the pane as well as the name “disabled” according to the opening or closing of the pane.

I’ve been on it for several days, but I can’t. Do you have any idea how I could do it? Thanks in advance.

2

There is a custom card in HACS called the “stack in card” which allows you to create a vertical or horizontal stack without the borders between the buttons, so that they all look as if they’re in a single card. Would that do what you want?

3

This is what I managed to do

type: vertical-stack
cards:
  - show_name: true
    show_icon: true
    type: glance
    entities:
      - entity: switch.volet_hangar_md
        tap_action:
          action: toggle
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          icon:
            - width: 60px
            - height: 80px
          state:
            - value: 'on'
              color: red
              icon: mdi:window-shutter
            - value: 'off'
              color: white
              icon: mdi:window-shutter-open
      - entity: switch.volet_hangar_md
        tap_action:
          action: toggle
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          icon:
            - width: 60px
            - height: 80px
          state:
            - value: 'on'
              color: red
              icon: mdi:window-shutter
            - value: 'off'
              color: white
              icon: mdi:window-shutter-open
    columns: 4

The problem is that I can’t customize my Stats and my icons despite my code

Capture d’écran 2023-07-21 à 08.48.45
Capture d’écran 2023-07-21 à 08.48.451956×2038 362 KB

I can’t replace Désactivé to ouvert

4

Wrong, cannot use a code from custom:button-card inside Glance card.

Check the advice about “stack in card” given above.

5

I’ve been looking for a solution for more than a week, but I can’t find where the problem is. I’ve tried a lot of things, but I can’t!

6

Repeat - the easiest way is to take your code from the 1st post with stacks & replace all conventional stacks with “custom:stack-in-card”. Surely you need to read docs for this card to add alterations if needed.

7

What do you mean by all conventional stacks ?

type: custom:stack-in-card
title: Volets
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_bureau_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        name: Garage
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open
  - type: custom:stack-in-card
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_hangar_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open
  - type: custom:stack-in-card
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_garage_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open
  - type: custom:stack-in-card
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_baie_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open

Capture d’écran 2023-07-21 à 16.49.32
Capture d’écran 2023-07-21 à 16.49.321848×2074 612 KB

8

Standard horizontal & vertical stack cards.
Do you have stack-in-card installed? If no - install it. Every custom card must be installed first.

9

It’s a little better, just have to align them horizontally

Capture d’écran 2023-07-21 à 17.32.23
Capture d’écran 2023-07-21 à 17.32.231750×2166 401 KB 

type: custom:stack-in-card
title: Volets
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_bureau_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        name: Garage
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open
  - type: custom:stack-in-card
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_hangar_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open
  - type: custom:stack-in-card
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_garage_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open
  - type: custom:stack-in-card
    cards:
      - type: custom:button-card
        tap_action:
          action: toggle
        entity: switch.volet_baie_md
        show_state: true
        state_display: |
          [[[ 
            if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
            ]]]
        styles:
          card:
            - width: 80px
            - height: 80px
            - font-size: 12px
          icon:
            - width: 40px
            - height: 40px
        state:
          - value: 'on'
            color: red
            icon: mdi:window-shutter
          - value: 'off'
            color: white
            icon: mdi:window-shutter-open
10

Set horizontal mode.

Alternatively you may use a conventional Grid card if you need a grid-like view.

11

I think I succeeded :slight_smile:

type: custom:stack-in-card
title: Volets
cards:
  - type: horizontal-stack
    cards:
      - type: grid
        cards:
          - type: custom:button-card
            tap_action:
              action: toggle
            entity: switch.volet_bureau_md
            show_state: true
            state_display: |
              [[[ 
                if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
                ]]]
            name: Garage
            styles:
              card:
                - width: 80px
                - height: 80px
                - font-size: 12px
              icon:
                - width: 80px
                - height: 80px
            state:
              - value: 'on'
                color: red
                icon: mdi:window-shutter
              - value: 'off'
                color: white
                icon: mdi:window-shutter-open
          - type: custom:button-card
            tap_action:
              action: toggle
            entity: switch.volet_bureau_md
            show_state: true
            state_display: |
              [[[ 
                if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
                ]]]
            name: Garage
            styles:
              card:
                - width: 80px
                - height: 80px
                - font-size: 12px
              icon:
                - width: 80px
                - height: 80px
            state:
              - value: 'on'
                color: red
                icon: mdi:window-shutter
              - value: 'off'
                color: white
                icon: mdi:window-shutter-open
          - type: custom:button-card
            tap_action:
              action: toggle
            entity: switch.volet_bureau_md
            show_state: true
            state_display: |
              [[[ 
                if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
                ]]]
            name: Garage
            styles:
              card:
                - width: 80px
                - height: 80px
                - font-size: 12px
              icon:
                - width: 80px
                - height: 80px
            state:
              - value: 'on'
                color: red
                icon: mdi:window-shutter
              - value: 'off'
                color: white
                icon: mdi:window-shutter-open
          - type: custom:button-card
            tap_action:
              action: toggle
            entity: switch.volet_bureau_md
            show_state: true
            state_display: |
              [[[ 
                if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
                ]]]
            name: Garage
            styles:
              card:
                - width: 80px
                - height: 80px
                - font-size: 12px
              icon:
                - width: 80px
                - height: 80px
            state:
              - value: 'on'
                color: red
                icon: mdi:window-shutter
              - value: 'off'
                color: white
                icon: mdi:window-shutter-open

On the other hand, I encounter a problem at the level of the columns! Look at the picture below

Capture d’écran 2023-07-21 à 18.37.51
Capture d’écran 2023-07-21 à 18.37.512444×1660 468 KB

style="--grid-card-column-count: 3; is 3!

If I manually display at 4, that’s perfect, but I don’t see how to change this value?

12
13

Is good all works

type: custom:stack-in-card
title: Volets
cards:
  - type: horizontal-stack
    cards:
      - type: grid
        columns: 4
        cards:
          - type: custom:button-card
            tap_action:
              action: toggle
            entity: switch.volet_bureau_md
            show_state: true
            state_display: |
              [[[ 
                if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
                ]]]
            name: Bureau
            styles:
              card:
                - width: 100px
                - height: 100px
                - font-size: 12px
                - border: none
              icon:
                - width: 80px
                - height: 80px
            state:
              - value: 'on'
                color: red
                icon: mdi:window-shutter
              - value: 'off'
                color: white
                icon: mdi:window-shutter-open
          - type: custom:button-card
            tap_action:
              action: toggle
            entity: switch.volet_hangar_md
            show_state: true
            state_display: |
              [[[ 
                if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
                ]]]
            name: Hangard
            styles:
              card:
                - width: 100px
                - height: 100px
                - font-size: 12px
                - border: none
              icon:
                - width: 80px
                - height: 80px
            state:
              - value: 'on'
                color: red
                icon: mdi:window-shutter
              - value: 'off'
                color: white
                icon: mdi:window-shutter-open
          - type: custom:button-card
            tap_action:
              action: toggle
            entity: switch.volet_garage_md
            show_state: true
            state_display: |
              [[[ 
                if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
                ]]]
            name: Garage
            styles:
              card:
                - width: 100px
                - height: 100px
                - font-size: 12px
                - border: none
              icon:
                - width: 80px
                - height: 80px
            state:
              - value: 'on'
                color: red
                icon: mdi:window-shutter
              - value: 'off'
                color: white
                icon: mdi:window-shutter-open
          - type: custom:button-card
            tap_action:
              action: toggle
            entity: switch.volet_baie_md
            show_state: true
            state_display: |
              [[[ 
                if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
                ]]]
            name: Baie
            styles:
              card:
                - width: 100px
                - height: 100px
                - font-size: 12px
                - border: none
              icon:
                - width: 80px
                - height: 80px
            state:
              - value: 'on'
                color: red
                icon: mdi:window-shutter
              - value: 'off'
                color: white
                icon: mdi:window-shutter-open

Capture d’écran 2023-07-21 à 19.00.44
Capture d’écran 2023-07-21 à 19.00.44878×368 5.76 KB