I’m working on a dashboard for our Christmas Lights. What I would like to do is have a custom button card centered in a grid. I have setup a 1-column grid, but the button card always seems to left justify (see attached image). I’ve also attached my code for this card. Any advice would be greatly appreciated.
type: custom:mod-card
view_layout:
grid-area: main1
card:
type: grid
columns: 1
square: false
title: All Christmas Lights
style:
cards:
- align-self: center
- justify-self: center
cards:
- type: custom:button-card
entity: light.christmas_lights
name: Christmas Lights
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'
card_mod:
style:
hui-grid-card:
$: |
.card-header {
color: white !important;
text-align: center !important;
}
.: |
ha-card {
border: 2px solid white;
padding-left: 40px;
padding-right: 15px;
padding-bottom: 10px;
background-color: #000033;
border-radius: 10px
}
