Hi everyone, been trying to recreate the following dashboard.
But I don’t understand how to place the play button next to both rows and allign them correctly.
type: grid
columns: 4
square: false
cards:
- type: custom:button-card
name: ''
icon: mdi:minus
styles:
card:
- height: 50px
- background-color: 'rgba(0,0,0,0.8)'
- margin: 0px
- padding: 0px
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: '18'
styles:
card:
- height: 50px
- background-color: 'rgba(0,0,0,0.8)'
- margin: 0px
- padding: 0px
name:
- color: cyan
- font-size: 20px
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:plus
styles:
card:
- height: 50px
- background-color: 'rgba(0,0,0,0.8)'
- margin: 0px
- padding: 0px
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:skip-next
styles:
card:
- height: 50px
- background-color: 'rgba(0,0,0,0.8)'
- margin: 0px
- padding: 0px
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:volume-mute
styles:
card:
- height: 50px
- background-color: 'rgba(0,0,0,0.8)'
- margin: 0px
- padding: 0px
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:volume-high
styles:
card:
- height: 50px
- background-color: 'rgba(0,0,0,0.8)'
- margin: 0px
- padding: 0px
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:volume-high
styles:
card:
- height: 50px
- background-color: 'rgba(0,0,0,0.8)'
- margin: 0px
- padding: 0px
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:heart-plus
styles:
card:
- height: 50px
- background-color: 'rgba(0,0,0,0.8)'
- margin: 0px
- padding: 0px
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:play
styles:
card:
- height: 100px
- background-color: 'rgba(0,0,0,0.8)'
- margin: 0px
- padding: 0px
- grid-column: 4 / span 1
- grid-row: 1 / span 2
icon:
- color: cyan
- font-size: 24px
tap_action:
action: call-service
service: your.service_here
service_data: {}
I am also not sure of this is the correct way of doing it, read through the documentation a couple of times but I cannot find some examples on how to do this.
Any help or advise for the correct direction is really appriciated.
Make a grid with 2 columns and in the first cell place a vertical stack with two grid of four columns. In the second cell of the first grid add the play button
Or use custom: layout card from HACS
1 Like
Will try that, thanks for the quick response!
Okay, I have been trying to figure this out over the weekend but I cannot get it to work as espected regarding the marging and outlining of the buttons.
type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:minus
tap_action:
action: call-service
service: media_player.volume_down
service_data:
entity_id: media_player.sonos_downstairs
show_name: false
styles:
icon:
- color: var(--state-icon-color)
- type: custom:button-card
entity: sensor.current_volume
icon: mdi:volume-high
show_name: false
show_state: true
styles:
icon:
- color: var(--state-icon-color)
- type: custom:button-card
icon: mdi:plus
tap_action:
action: call-service
service: media_player.volume_up
service_data:
entity_id: media_player.sonos_downstairs
show_name: false
styles:
icon:
- color: var(--state-icon-color)
- type: custom:button-card
icon: mdi:skip-next
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.sonos_downstairs
show_name: false
styles:
icon:
- color: var(--state-icon-color)
- type: custom:button-card
name: Play/Pause
entity: media_player.downstairs_audio
show_icon: true
show_name: false
icon: |
[[[
if (entity.state === 'playing') {
return 'mdi:pause';
} else if (entity.state === 'paused') {
return 'mdi:play';
} else {
return 'mdi:play-circle-outline'; // Default icon if state is unknown or idle
}
]]]
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.downstairs_audio
styles:
card:
- width: 100px
- height: 100px
- text-align: center
- line-height: 100px
icon:
- width: 50%
- height: 50%
- color: var(--state-icon-color)
The above is how the allignment should look like, so the four buttons all alligned and 1 buttons on the right side.
(This is almost working, but I cannot get the button on the right side and as soon as i make the 8 buttons bigger they overlap.
type: grid
columns: 2
square: false
cards:
- type: vertical-stack
cards:
- type: grid
columns: 4
square: false
cards:
- type: custom:button-card
name: ''
icon: mdi:minus
styles:
card:
- height: 50px
- margin: 0px
- padding: 0px
icon:
- color: cyan
- width: 40px
- height: 40px
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: '18'
styles:
card:
- height: 50px
- margin: 0px
- padding: 0px
name:
- color: cyan
- font-size: 20px
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:plus
styles:
card:
- height: 50px
- margin: 0px
- padding: 0px
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:skip-next
styles:
card:
- height: 50px
- margin: 0px
- padding: 0px
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:volume-mute
styles:
card:
- height: 50px
- margin: 0px
- padding: 0px
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:volume-high
styles:
card:
- height: 50px
- margin: 0px
- padding: 0px
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:heart-plus
styles:
card:
- height: 50px
- margin: 0px
- padding: 0px
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:heart-plus
styles:
card:
- height: 50px
- margin: 0px
- padding: 0px
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: vertical-stack
cards:
- type: custom:button-card
name: Extra Button
icon: mdi:star
styles:
card:
- height: 110px
- width: 100px
- display: flex
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
Last example with the overlap.
type: grid
columns: 2
square: false
cards:
- type: vertical-stack
cards:
- type: grid
columns: 4
square: false
cards:
- type: custom:button-card
name: ''
icon: mdi:minus
styles:
card:
- height: 70px
- width: 70px
- margin: 0px
- padding: 0px
- display: flex
- justify-content: center
- align-items: center
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:play
styles:
card:
- height: 70px
- width: 70px
- margin: 0px
- padding: 0px
- display: flex
- justify-content: center
- align-items: center
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:plus
styles:
card:
- height: 70px
- width: 70px
- margin: 0px
- padding: 0px
- display: flex
- justify-content: center
- align-items: center
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:skip-next
styles:
card:
- height: 70px
- width: 70px
- margin: 0px
- padding: 0px
- display: flex
- justify-content: center
- align-items: center
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: grid
columns: 4
square: false
cards:
- type: custom:button-card
name: ''
icon: mdi:volume-mute
styles:
card:
- height: 80px
- width: 80px
- margin: 0px
- padding: 0px
- display: flex
- justify-content: center
- align-items: center
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:volume-high
styles:
card:
- height: 80px
- width: 80px
- margin: 0px
- padding: 0px
- display: flex
- justify-content: center
- align-items: center
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:heart-plus
styles:
card:
- height: 80px
- width: 80px
- margin: 0px
- padding: 0px
- display: flex
- justify-content: center
- align-items: center
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: ''
icon: mdi:heart-plus
styles:
card:
- height: 80px
- width: 80px
- margin: 0px
- padding: 0px
- display: flex
- justify-content: center
- align-items: center
icon:
- color: cyan
tap_action:
action: call-service
service: your.service_here
service_data: {}
- type: custom:button-card
name: Play/Pause
entity: media_player.downstairs_audio
show_icon: true
show_name: false
icon: |
[[[
if (entity.state === 'playing') {
return 'mdi:pause';
} else if (entity.state === 'paused') {
return 'mdi:play';
} else {
return 'mdi:play-circle-outline'; // Default icon if state is unknown or idle
}
]]]
tap_action:
action: call-service
service: media_player.media_play_pause
service_data: entity_id
What am I missing? I tried it with marging, padding, alignments everything.
Edit: p.s. I am using the sections (experimental) with two columns on the dashboard.