You put the template here:
The raw Lovelace config is accessed by pressing the three dot icon (top right of your dashboard) to edit Lovelace twice.
Thank you 
Hello, how do I change the background like you did above? Thanks
The background of what?
The card?
The button?
The view?
You can do it using themes.
Or by directly editing the view.
Tips:
Put your image in /config/www/backgrounds/ the images will be available at /local/backgrounds/
If you have to create the www folder, you need to restart home assistant after doing it.
Great, Thanks I managed to do it by editing the view.
Now if I want to make my maps a bit more transparent to see the background better, what should I do?
This is getting off topic. Please open a new frontend configuration topic.
But it will involve the use of this:
OK thank you, I already use it for other cards this one. Thanks for your help
The resource location should be on your system, not a remote github link.
Thanks for helping @tom_l .
Ok, changed that. It’s still giving me the error when I paste the RAW hui-element.js though; that’s the file I need correct ? I’m assuming yours is the same file but could you share it to test please. Thanks again.
how did you manage to get 4 icons in a row in “outside lights” and the other three in below??
When i try to put 5 butoons in they all get in the same row…
I use a combination of horizontal and vertical stack cards, inside an entities card. This requires the custom:hui-element card.
You may also need blank button cards in the rows with fewer numbers of buttons.
entities:
- card_type: horizontal-stack
cards:
- entity: light.deck_front_downlights
name: Deck Front
template: light_button
type: custom:button-card
- entity: light.deck_side_downlights
name: Deck Side
template: light_button
type: custom:button-card
- entity: light.lifx_deck_spot
name: Deck Spot
template: light_button
type: custom:button-card
- color_type: blank-card
type: custom:button-card
type: custom:hui-element
- card_type: horizontal-stack
cards:
- entity: light.lifx_front_porch
name: Porch
template: light_button
type: custom:button-card
- entity: light.lifx_washing_spot
name: Washing
template: light_button
type: custom:button-card
- color_type: blank-card
type: custom:button-card
- color_type: blank-card
type: custom:button-card
type: custom:hui-element
show_header_toggle: false
title: Outside Lights
type: entities
1 Like
Thanks a lot it really helped me 
Hello,
Since the penultimate update of home assistant, the borders of my maps are no longer displayed in yellow:
My cards:
entities:
- type: custom:hui-element
card_type: horizontal-stack
cards:
- entity: switch.lumiere_cuisine_plafonnier_etage
name: Plafonnier
icon: mdi:chandelier
template: light_button
type: custom:button-card
- entity: group.lumieres_meubles_cuisine
icon: mdi:led-strip
name: Meubles
template: light_button
type: custom:button-card
show_header_toggle: false
title: Cuisine
icon: mdi:countertop-outline
type: entities
Here is the template I am using:
button_card_templates:
light_button:
aspect_ratio: 4/3
color_type: icon
hold_action:
action: more-info
haptic: selection
label: >
[[[ var bri = entity.attributes.brightness &&
Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : 'On'); else return "Off"; ]]]
layout: icon_label
show_label: true
show_name: true
state:
- styles:
card:
- border: solid 1px var(--button-card-light-color-no-temperature)
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color-no-temperature)
label:
- color: var(--paper-item-icon-active-color)
value: 'on'
- styles:
card:
- border: solid 1px var(--primary-color)
- box-shadow: none
value: 'off'
- icon: mdi:alert
label: Lost
styles:
card:
- border: 'solid 1px #7f7f7f'
- box-shadow: none
icon:
- color: '#ff0000'
- opacity: 0.4
label:
- color: '#7f7f7f'
name:
- color: '#7f7f7f'
value: unavailable
styles:
card:
- border-radius: 10px
- padding: 6px 6px 6px 6px
- margin: 0% 0% 0% 0%
- '--ha-card-background': rgba(0, 0, 0, 0)
grid:
- grid-template-areas: '"i l l" "n n n"'
- grid-template-rows: 33% auto
- grid-template-columns: 33% auto
icon:
- width: 28px
- padding: 0px 0px 0px 0px
- color: var(--button-card-light-color-no-temperature)
label:
- font-size: 12px
- justify-self: right
- padding: 0px 0px 0px 0px
- color: var(--secondary-text-color)
name:
- justify-self: middle
- align-self: end
- font-size: 14px
- padding: 0px 0px 0px 0px
- color: var(--primary-text-color)
- white-space: normal
tap_action:
action: toggle
On the other hand for RGB lights the border always works with the color of the lamp:
Did you encounter the same problem?
Do you have any idea how to solve it?
Because of that I forgot a light that stayed on for 24 hours 
Thanks in advance for your feedback.
1 Like
I have the same problem
Do you have any youtube video teaching how do it for beginners? 
I’m referring to this post: Lovelace light control ideas wanted - #11 by tom_l