How would I edit the config so the buttons are always the same size no matter how many are on a card?
Use blank cards so there are always 4 in a stack.
- card_type: horizontal-stack
cards:
- entity: light.lifx_spare_bedroom
name: Ceiling
template: light_button
type: 'custom:button-card'
- entity: light.lifx_sp_bed_lamp
name: Bedside
template: light_button
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
- color_type: blank-card
type: 'custom:button-card'
2 Likes
Thanks Tom_I
This really cleaned up my lights part of the gui. Just one tiny thing that is bothering me, and i’m wondering how to solve it. Now the light and border show up in default yellow light if active, but when i’m using colored lights my icon does show the correct color, just the border stays default (yellow)
Anyway to “fix” that? so they both show the correct color the lamp is using.
Thanks!
Try this:
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
1 Like
Awesome! Thanks Alot!
works like a charm!
Change the bit in brackets for the label color to be the same as in the brackets above if you want the brightness % in the same colour
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) # Inside ( ) here same as above ( )
I.e. replace --paper-item-icon-active-color with --button-card-light-color-no-temperature
1 Like
Cool! that’s indeed even better.
Thanks again, looks alot nicer this way.
Hello everyone,
Thank you for your work and your sharing.
I am a novice and I am trying to reproduce your map.
I don’t have a lovelace.yaml file in my Home Assistant Operating System version, so I can’t add “button_card_template: …” inside.
I find a lot of tutorial but they all ask to add lines of code to a .yaml file that I can’t find in my Home Assistant.
Can you help me on the subject?
Thank you for your help
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.