I hae been messing around with the Custom Button Card all Weekend to create a set of buttons to select channels or apps in one touch.
Here is the code Hope it helps anyone:
type: vertical-stack
cards:
- text: Channel Quick Links
type: custom:text-divider-row
- square: false
type: grid
cards:
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/BBC One South.svg")
- background-size: 80% 80%
- background-repeat: no-repeat
- background-position: center
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.skyq_bbc1_2
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/BBC Two.svg")
- background-size: 80% 80%
- background-repeat: no-repeat
- background-position: center
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.skyq_bbc2
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/BBC News.svg")
- background-size: 80% 80%
- background-repeat: no-repeat
- background-position: center
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.skyq_bbc1_2
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/Channel 5.svg")
- background-size: 80% 80%
- background-repeat: no-repeat
- background-position: center
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
entity_picture: /local/tv/COMEDY CENTERAL.pn
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/Comedy Central.svg")
- background-size: 80% 80%
- background-repeat: no-repeat
- background-position: center
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/Comedy Central Extra.svg")
- background-size: 80% 80%
- background-repeat: no-repeat
- background-position: center
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/Sky Showcase HD.svg")
- background-size: 80% 80%
- background-repeat: no-repeat
- background-position: center
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/ITV1 HD.svg")
- background-size: 80% 80%
- background-repeat: no-repeat
- background-position: center
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/Discovery History 2.png")
- background-size: 80% 80%
- background-repeat: no-repeat
- background-position: center
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/Discovery Turbo.svg")
- background-size: 80% 80%
- background-repeat: no-repeat
- background-position: center
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/TV-Channel.png")
- background-size: 100% 100%
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/TV-Channel.png")
- background-size: 100% 100%
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/TV-Channel.png")
- background-size: 100% 100%
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/TV-Channel.png")
- background-size: 100% 100%
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/TV-Channel.png")
- background-size: 100% 100%
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- text: Streaming Apps
type: custom:text-divider-row
- square: false
type: grid
cards:
- type: custom:button-card
entity_picture: /local/tv/disney-plus.svg
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/Disney Plus.png")
- background-size: 100% 100%
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/Paramount+.png")
- background-size: 100% 100%
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/Prime Video.png")
- background-size: 100% 100%
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/Plex.png")
- background-size: 100% 100%
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/Netfilx.png")
- background-size: 100% 100%
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
- type: custom:button-card
styles:
card:
- width: 100px
- height: 75px
- border-radius: 10px
- border-size: 1px
- border-color: green
- background-color: black
- background-image: url("/local/tv/Discovery Plus.png")
- background-size: 100% 100%
- padding-top: 10px
- padding-right: "-10px"
- padding-bottom: 5px
- margin-bottom: 5px
tap_action:
action: call-service
service: script.
view_layout:
grid-area: sidebarR
