type: custom:button-card
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content min-content
- row-gap: 15px
card:
- border-radius: 15px
- box-shadow: null
- padding: 20px
custom_fields:
item1:
card:
type: custom:button-card
name: Wohnzimmer TV
entity: media_player.tv
show_last_changed: false
show_icon: true
show_label: true
show_name: true
show_state: false
tap_action:
action: more-info
entity: media_player.tv
label: |
[[[
if (states['sensor.tv_media_title'].state == 'unknown')
return "Aus";
return states['sensor.tv_media_title'].state + '';
]]]
state:
- value: 'on'
color: '#FCD663'
styles:
img_cell:
- opacity: 0.6
- background-color: '#FCD663'
icon:
- color: var(--card-background-color)
- value: 'off'
styles:
img_cell:
- filter: brightness(90%)
styles:
icon:
- color: null
label:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
- color: ''
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 15px
- margin-left: 12px
- color: var(--secondary-text-color)
state:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- background-color: '#2e2d2d'
- border-radius: 40%
- place-self: center
- width: 42px
- height: 42px
grid:
- grid-template-areas: '"i n" "i l" "i s"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card:
- border-radius: 15px
- box-shadow: null
- padding: 12px
size: 60%
item2:
card:
type: grid
cards:
- type: custom:button-card
show_name: false
tap_action:
action: toggle
entity: script.samsung_tv_channel_up
styles:
icon:
- color: rgba(252, 214, 99, 0.6)
- margin-top: null
- justify-self: center
grid:
- grid-template-areas: '''i'''
card:
- border-radius: 13px
- box-shadow: null
- padding: px 0px 0px 0px
- width: null
- height: 30px
img_cell:
- background-color: null
- border-radius: null
size: 25px
- type: custom:button-card
show_name: false
tap_action:
action: toggle
entity: script.samsung_tv_channel_down
styles:
icon:
- color: rgba(252, 214, 99, 0.6)
- margin-top: null
- justify-self: center
grid:
- grid-template-areas: '''i'''
card:
- border-radius: 13px
- box-shadow: null
- padding: px 0px 0px 0px
- width: null
- height: 30px
img_cell:
- background-color: null
- border-radius: null
size: 25px
- type: custom:button-card
show_name: false
tap_action:
action: toggle
entity: script.samsung_tv_volume_down
styles:
icon:
- color: rgba(252, 214, 99, 0.6)
- margin-top: null
- justify-self: center
grid:
- grid-template-areas: '''i'''
card:
- border-radius: 13px
- box-shadow: null
- padding: px 0px 0px 0px
- width: null
- height: 30px
img_cell:
- background-color: null
- border-radius: null
size: 25px
- type: custom:button-card
show_name: false
tap_action:
action: toggle
entity: script.samsung_tv_volume_up
styles:
icon:
- color: rgba(252, 214, 99, 0.6)
- margin-top: null
- justify-self: center
grid:
- grid-template-areas: '''i'''
card:
- border-radius: 13px
- box-shadow: null
- padding: px 0px 0px 0px
- width: null
- height: 30px
img_cell:
- background-color: null
- border-radius: null
size: 25px
- type: custom:button-card
show_name: false
tap_action:
action: toggle
entity: script.samsung_tv_volume_mute
styles:
icon:
- color: rgba(252, 214, 99, 0.6)
- margin-top: null
- justify-self: center
grid:
- grid-template-areas: '''i'''
card:
- border-radius: 13px
- box-shadow: null
- padding: px 0px 0px 0px
- width: null
- height: 30px
img_cell:
- background-color: null
- border-radius: null
size: 25px
- type: custom:button-card
icon: mdi:power
show_name: false
tap_action:
action: call-service
service: media_player.toggle
service_data:
entity_id: media_player.tv
styles:
icon:
- color: |
[[[
if (states['media_player.tv'].state == 'on')
return "#4da364";
return "#bf5e5e";
]]]
- margin-top: null
- justify-self: center
grid:
- grid-template-areas: '''i'''
card:
- border-radius: 13px
- box-shadow: null
- padding: px 0px 0px 0px
- width: null
- height: 30px
img_cell:
- background-color: null
- border-radius: null
size: 25px
square: false
columns: 6
I installed the layout-card on my testsystem, and it looks like that you are missing the grid configuration (if iām right that you want to align the cards horizontally)
Here my example (might be improvable but i think you get it with that 
)
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-areas: |
"card1 card2 card3 card4"
cards:
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Card1
color: purple
entity: switch.adguard_filtering
view_layout:
grid-area: card1
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Card2
color: purple
entity: switch.adguard_filtering
view_layout:
grid-area: card2
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Card3
color: purple
entity: switch.adguard_filtering
view_layout:
grid-area: card3
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Card4
color: purple
entity: switch.adguard_filtering
view_layout:
grid-area: card4
Important i think is this part for the grid itself:
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-areas: |
"card1 card2 card3 card4"
And the naming of each card:
view_layout:
grid-area: card4
2 Likes
Youāre a champion, thank you!
You pointed me in the right direction. This is what ended up working for me
type: custom:vertical-layout
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: auto
1 Like
Just a general question to everyone. Has anyone put together a template for the up coming media card?
Awesome work guys. I am so happy with that 
Do anyone of you have also problems with Popup card for lights ?
Because it works for me on desktop but not on smartphone, any idea ?
Thank you very much,
sven
Works perfekt, thank you very much
Hello, we need to add all this code on button_card_templates.yaml ?
No, you produce a new templete to call it ācustom_card_welcome_scenesā and then add my code.
##-- Welcome --##
- type: 'custom:button-card'
template: custom_card_welcome_scenes
variables:
ulm_custom_card_paddy_welcome_time: sensor.time
1 Like
i have the same issueā¦popup card works on desktop but not with android or iphone companion-app.
Since we remove/hide the app-toolbar in the mobile theme, and on my phones swipe from left for the sidebar needs two fingers (one is just āgo backā) and i use the chips for navigatiion between different lovelace views, i created a kind of header which can be configured as a template in one place and replicated onto mulitple views. The wheelacts as a replacement for the hamburger menu, it takes me directly to the configuration page, which i need sometimes on the phone.
If anyone is interested in it, i will clean up the code and share it
Placed on each view with 2 simple buttons that uses the template - so if i change the order or add a button, all pages get updated.
- type: 'custom:button-card'
template: home_header
- type: 'custom:button-card'
template: home_header_navigation
Note: the buttons might overflow, i havent fixed that yet, but should be possible.
3 Likes
can share the code please?
Hello @jmadden91 , can I ask you for help, how did you put your pictures instead of icons in the card? could you share the code?
Hello @djacid , I really like your calendar card, could you provide the code, how can I get such a card from me?
You can use the entity_picture from the button card .
show_entity_picture | boolean | (true | false)
Replace the icon by the entity picture (if any) or the custom picture (if any). Falls back to using the icon if both are undefined
entity_picture | string | optional
Can be any of /local/* file or a URL. Will override the icon/the default entity_picture with your own image. Best is to use a square image. You can also define one per state. Supports templates, see templates
1 Like
I dont know why i got this
Ok thanks for this.
Now iāve another error, iāll wait for officially support on next release.
Yes, Iāve looked at the code and the sceneās card is not yet in the main branch of the repo.
If you want you can use the dev branch.
But there are a lot of changes because of the upcoming HACS support.
Something else you could do is copy the card from the github repository and place it into your custom_cards folder yourself. The file is located here:
yaml file and README
Please share
Is it possible to modify that card
so that I am able to control my light/media player like in the Dimmer Button - Addon
over the background? (brightness/volume)
Iāve been trying for quite a while but hasnāt been successful yet.