How do i get these button cards centered in a vertical stack. I am trying to make a vertical stack with cards to navigate through different views on my dashboard something like this (only one of them would be lights. General Viev, Lights, Heating, Blinds are planned):
This is the sidebar code:
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar_template
- type: conditional
conditions:
- entity: input_boolean.laundry_display
state: 'on'
card:
type: custom:button-card
entity: timer.laundry
template: laundry
- type: vertical-stack
cards:
- type: custom:button-card
name: Lights
icon: mdi:ceiling-light-multiple
template: sidebar_navigation
- type: custom:button-card
name: Heating
icon: none
template: sidebar_navigation
- type: grid
cards:
- type: button
icon: mdi:information-outline
tap_action:
!include popup/sidebar_vacuum.yaml
hold_action:
action: none
- type: button
icon: mdi:information-outline
tap_action:
!include popup/sidebar_information.yaml
hold_action:
action: none
- type: button
icon: mdi:arrow-up-bold-circle-outline
tap_action:
!include popup/sidebar_update.yaml
hold_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.hacs
ans this is the sidebar_navigation template:
sidebar_navigation:
size: 4.4em
color: '#9da0a2'
styles:
grid:
- grid-template-areas: '"n"'
- grid-column-gap: 0.3em
name:
- font-size: 1em
- letter-spacing: 0.015em
card:
- color: '#9da0a2'
- border-radius: 0.6em
- padding: 1em 1em 1em 1.2em
- width: 13em
- font-size: 1.06em
- font-weight: 500
- letter-spacing: 0.015em
- background: '#FFFFFF10'
- height: 3.5em
icon-only:
show_name: false
color: '#9da0a2'
styles:
card:
- color: '#9da0a2'
- border-radius: 0.6em
- width: 4em
- height: 3.7em
- background: '#FFFFFF10'
If you need sth else, pls tell me. I am pretty new to home assistant