Does anyone know of any example of where “buttons” can be replaced with custom jpegs where they fill the entire button???
I want to replace the whole mdi look of HA to something more “custom” with my own buttons.
Custom Button Card. Though the support for this card has been a bit lacking recently.
entities:
- card_type: horizontal-stack
cards:
- entity: script.lounge_tv_ch_abc
entity_picture: /local/tv_logos/abc.png
tap_action:
service: script.lounge_tv_ch_abc
template: picture_button
type: custom:button-card
- entity: script.lounge_tv_ch_sbs
entity_picture: /local/tv_logos/sbs.png
tap_action:
service: script.lounge_tv_ch_sbs
template: picture_button
type: custom:button-card
- entity: script.lounge_tv_ch_sbs_vice
entity_picture: /local/tv_logos/sbs-vice.png
tap_action:
service: script.lounge_tv_ch_sbs_vice
template: picture_button
type: custom:button-card
- entity: script.lounge_tv_ch_sthnx
entity_picture: /local/tv_logos/southern-cross-television.png
tap_action:
service: script.lounge_tv_ch_sthnx
template: picture_button
type: custom:button-card
type: custom:hui-element
- card_type: horizontal-stack
cards:
- entity: script.lounge_tv_ch_nine
entity_picture: /local/tv_logos/nine.png
tap_action:
service: script.lounge_tv_ch_nine
template: picture_button
type: custom:button-card
- entity: script.lounge_tv_ch_gem
entity_picture: /local/tv_logos/gem.png
tap_action:
service: script.lounge_tv_ch_gem
template: picture_button
type: custom:button-card
- entity: script.lounge_tv_ch_go
entity_picture: /local/tv_logos/go.png
tap_action:
service: script.lounge_tv_ch_go
template: picture_button
type: custom:button-card
- entity: script.lounge_tv_ch_7mate
entity_picture: /local/tv_logos/seven-mate.png
tap_action:
service: script.lounge_tv_ch_7mate
template: picture_button
type: custom:button-card
type: custom:hui-element
- card_type: horizontal-stack
cards:
- entity: script.lounge_tv_ch_7two
entity_picture: /local/tv_logos/seven-two.png
tap_action:
service: script.lounge_tv_ch_7two
template: picture_button
type: custom:button-card
- entity: script.lounge_tv_ch_win
entity_picture: /local/tv_logos/win.png
tap_action:
service: script.lounge_tv_ch_win
template: picture_button
type: custom:button-card
- entity: script.lounge_tv_ch_one
entity_picture: /local/tv_logos/one.png
tap_action:
service: script.lounge_tv_ch_one
template: picture_button
type: custom:button-card
- entity: script.lounge_tv_ch_eleven
entity_picture: /local/tv_logos/eleven.png
tap_action:
service: script.lounge_tv_ch_eleven
template: picture_button
type: custom:button-card
type: custom:hui-element
show_header_toggle: false
title: TV Channels
type: entities
Template (in raw config)
button_card_templates:
picture_button:
aspect_ratio: 4/3
color_type: icon
hold_action:
action: none
layout: vertical
show_entity_picture: true
show_icon: false
show_label: false
show_name: false
show_state: false
styles:
card:
- border-radius: 10px
- border: solid 1px var(--primary-color)
- box-shadow: none
- padding: 6px 6px
- margin: 0px 0px
- '--ha-card-background': rgba(0, 0, 0, 0)
entity_picture:
- width: 100%
- height: 100%
- object-fit: contain
tap_action:
action: call-service
1 Like
Thanks for the object-fit info. It’s exactly what I was looking for.