Hey Button Card Experts! I’m just getting my feet wet with more “advanced” HA things, like CSS modifying. I’m working on a mobile music dashboard, with the help of a few great resources like this one, I’ve almost got what I need to get figured out to finalize it. I’m just having one issue. I’m using the container template, but I can’t figure out how to get my buttons to center within the horizontal stack (IE the icons on the top and the music control buttons). Code below, if anyone can help me.
Template code:
button_card_templates:
container:
color_type: label-card
color: rgb(240, 240, 240)
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- width: 100%
grid:
- grid-template-areas: '"buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- margin: 0
- padding: 0.3em
Top Navigation Bar
type: custom:button-card
template: container
name: Speakers
show_name: false
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.sonos_playing_status
name: Sonos
icon: mdi:sofa
show_icon: true
show_name: false
show_state: false
size: 50%
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- height: 60px
- width: 60px
- border-radius: 100%
- background-color: rgb(254, 254, 254, 1)
- border: 1px solid rgb(0, 0, 0, 0.5)
- box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15)
- align-self: middle
icon:
- color: rgb(90, 153,92,1)
state:
- value: 'on'
styles:
card:
- box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.35)
- border: 2px solid rgb(0, 167, 11)
- type: custom:button-card
entity: input_boolean.everywhere_playing_status
name: Everywhere
show_icon: true
show_name: false
show_state: false
size: 50%
icon: mdi:home
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- height: 60px
- width: 60px
- border-radius: 100%
- background-color: rgb(254, 254, 254, 1)
- border: 1px solid rgb(0, 0, 0, 0.5)
- box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15)
- align-self: middle
icon:
- color: rgb(255, 202, 55, 1)
state:
- value: 'on'
styles:
card:
- box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.35)
- border: 3px solid rgb(0, 167, 11)
- type: custom:button-card
entity: input_boolean.bathroom_playing_status
name: Bathroom
show_icon: true
show_name: false
show_state: false
icon: mdi:bathtub
size: 50%
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- height: 60px
- width: 60px
- border-radius: 100%
- background-color: rgb(254, 254, 254, 1)
- border: 1px solid rgb(0, 0, 0, 0.5)
- box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15)
- align-self: middle
icon:
- color: rgb(65, 106, 154, 1)
state:
- value: 'on'
styles:
icon:
- color: rgb(90, 153 ,92, 1)
card:
- box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.35)
- border: 3px solid rgb(0, 167, 11)
view_layout:
grid-area: A
In case it is helpful, I’m using grid layout and this is the code in the layout options:
grid-template-columns: auto 400px auto
grid-template-rows: auto
grid-template-areas: |
"Gutter1 A Gutter2"
"Gutter1 B Gutter2"
"Gutter1 C Gutter2"
"Gutter1 D Gutter2"