Hi all,
I am currently trying to mix up things I could find on the forum and github to finalize my dashboard design.
I could find a nice template for a banner style card and had a nice time using it.
However, I am struggling with one detail.
I couldn’t find a way to center the buttons into the card.
As you can see below, everything it is aligned on the left even if the spacing between the buttons (which sit in a grid) is fine.
Here is what I mean:
The code in my card is the following:
type: 'custom:button-card'
template: container
name: VOLETS RDC
custom_fields:
buttons:
card:
type: grid
columns: 1
square: false
cards:
- type: grid
columns: 4
square: false
cards:
- type: 'custom:button-card'
name: Ouvre
icon: 'kuf:control_arrow_upward'
tap_action:
action: call-service
service: script.OuvreVoletsRDC
styles:
icon:
- color: 'rgb(17, 218, 198)'
card:
- width: 100px
- height: 100px
grid:
- padding-bottom: 0px
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 100px
- grid-template-rows: 60px 10px 25px
img_cell:
- padding-left: 40px
- color: 'rgb(17, 218, 198)'
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- text-transform: lowercase
- color: 'rgb(17, 218, 198)'
state:
- justify-self: start
- padding-left: 10px
- font-size: 10px
- type: 'custom:button-card'
name: Stop
icon: 'kuf:audio_stop'
tap_action:
action: call-service
service: script.StopVoletsRDC
styles:
icon:
- color: 'rgb(17, 218, 198)'
card:
- width: 100px
- height: 100px
grid:
- padding-bottom: 0px
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 100px
- grid-template-rows: 60px 10px 25px
img_cell:
- padding-left: 40px
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- text-transform: lowercase
- color: 'rgb(17, 218, 198)'
state:
- justify-self: start
- padding-left: 10px
- font-size: 10px
- type: 'custom:button-card'
name: Ferme
icon: 'kuf:control_arrow_downward'
tap_action:
action: call-service
service: script.FermeVoletsRDC
styles:
icon:
- color: 'rgb(17, 218, 198)'
card:
- width: 100px
- height: 100px
grid:
- padding-bottom: 0px
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 100px
- grid-template-rows: 60px 10px 25px
img_cell:
- padding-left: 40px
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- text-transform: lowercase
- color: 'rgb(17, 218, 198)'
state:
- justify-self: start
- padding-left: 10px
- font-size: 10px
- type: 'custom:button-card'
name: Ombre
icon: 'kuf:fts_shutter_100'
tap_action:
action: call-service
service: script.OmbreVoletsRDC
service_data:
entity_id: scene.RDCVoletsOmbre
styles:
icon:
- color: 'rgb(17, 218, 198)'
card:
- width: 100px
- height: 100px
grid:
- padding-bottom: 0px
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 100px
- grid-template-rows: 60px 10px 25px
img_cell:
- padding-left: 40px
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- text-transform: lowercase
- color: 'rgb(17, 218, 198)'
state:
- justify-self: start
- padding-left: 10px
- font-size: 10px
The template I use is like that:
button_card_templates:
container:
color_type: label-card
color: dimgblack
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- text-transform: uppercase
- letter-spacing: 0.5em
- font-familly: cursive
- filter: opacity(100%)
grid:
- grid-template-areas: '"i" "n" "buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- background-color: 'rgba(0,0,0,0.3)'
- margin: 0
- padding: 0.3em
- filter: opacity(70%)
Any idea?
Bonus question: how can I add a very thin border on my buttons to make them a bit more visible?
Thanks a lot for your help!