I’m relatively new to Home Assistant, as I’ve only been using it for about 2 months. While I feel like I have learned a ton over the last two months, I still have a long way to go. I’m working on some more advanced dashboards, and am running into an issue with alignment.
I have a horizontal-stack nested in a column of a grid. The horizontal stack spans the full width of the grid column. However, the buttons in the horizontal stack are aligned to the left. Is there a way to have the buttons centered in the stack?
button_card_templates:
home_buttons:
color_type: card
size: 100%
styles:
card:
- padding: 0.5em
- '--mdc-ripple-color': rgb(0,50,120)
- '--mdc-ripple-press-opacity': 0.5
- height: 75px
- width: 75px
- background-color: black
- opacity: 0.7
icon:
- opacity: 1
- color: white
name:
- font-size: 0.65em
- white-space: normal
toggle_buttons:
color_type: card
size: 100%
styles:
card:
- padding: 0.5em
- '--mdc-ripple-color': yellow
- '--mdc-ripple-press-opacity': 0.5
- height: 70px
- width: 70px
icon:
- opacity: 0.8
- color: black
name:
- font-size: 0.65em
- white-space: normal
label:
- font-size: 0.4em
- white-space: normal
views:
- title: Home
type: custom:grid-layout
layout:
grid-template-columns: 80px 500px 500px
grid-template-rows: auto
grid-template-areas: >-
"header header header" "buttons label1 main2" "buttons light1 main2"
"buttons label2 main2" "buttons light2 main2" "footer footer footer"
grid-column-gap: 10px
grid-row-gap: 10px
theme: noctis
badges: []
cards:
- type: vertical-stack
view_layout:
grid-area: buttons
cards:
- type: custom:button-card
icon: mdi:home
name: Home
template: home_buttons
- type: custom:button-card
icon: mdi:lightbulb
name: Lights
template: home_buttons
- type: custom:button-card
icon: mdi:video
name: Cameras
template: home_buttons
- type: custom:button-card
icon: mdi:speaker
name: Media
template: home_buttons
- type: custom:button-card
icon: mdi:weather-lightning-rainy
name: Weather
template: home_buttons
- type: custom:button-card
icon: mdi:calendar
name: Calendar
template: home_buttons
- type: vertical-stack
cards:
- type: custom:button-card
entity: sensor.time
show_state: true
show_name: false
show_icon: false
color_type: label-card
styles:
card:
- background-color: black
- padding: 2%
- box-shadow: none
- opacity: 1
state:
- color: white
- font-size: 40px
- text-shadow: 0px 0px 3px blue
- justify-self: left
view_layout:
grid-area: header
- type: vertical-stack
cards:
- type: custom:button-card
entity: sensor.date
show_state: true
show_name: false
show_icon: false
color_type: label-card
styles:
card:
- background-color: transparent
- padding: 2%
- box-shadow: none
- opacity: 1
state:
- color: white
- font-size: 40px
- text-shadow: 0px 0px 3px blue
- justify-self: right
view_layout:
grid-area: header
- type: custom:stack-in-card
title: Bedroom Lighting
mode: horizontal
keep:
box_shadow: true
background: true
view_layout:
grid-area: label1
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,50);
border: 2px solid #E0E0E0;
border-radius: 10px;
padding: 15px
text-align: center;
}
cards:
- type: custom:button-card
entity: light.heather_nightstand
name: Heather's Nightstand
template: toggle_buttons
state:
- icon: mdi:lightbulb-on
color: rgb(0,255,0)
value: 'on'
- icon: mdi:lightbulb-off
color: rgb(255,0,0)
value: 'off'
- type: custom:button-card
entity: light.zach_nightstand
name: Zach's Nightstand
template: toggle_buttons
state:
- icon: mdi:lightbulb-on
color: rgb(0,255,0)
value: 'on'
- icon: mdi:lightbulb-off
color: rgb(255,0,0)
value: 'off'
type or paste code here