Sorry for the post, figured it out. I needed to add it to my ui-lovelace.yaml file.
It looks like the tiles-card is old (2 years since update) but got just about everything working on the latest version of HA. The only thing I’m not seeing is the icon. If anyone has any ideas. I copied the example from tom_l and only changed the entity names.
The error I see:
Expected a value of type {entity,name,icon} | entity-id for entities.0.type but received "custom:config-template-card".
I’ve dropped it completely in favour of Rom Rider’s button card. You should really look into it. Takes a bit of effort to get your head around it as there are so many options but it is well worth it. Using the templates option has reduced the size of my Lovelace config considerably.
can you share the lovelace code of yours that is displaying this card?
Do you have an example of this?
Card config
entities:
- type: 'custom:hui-element'
card_type: horizontal-stack
cards:
- entity: light.lifx_top_of_stairs
template: light_button
type: 'custom:button-card'
- entity: light.lifx_bottom_of_stairs
name: Stairs
template: light_button
type: 'custom:button-card'
- entity: light.lifx_hallway
template: light_button
type: 'custom:button-card'
- entity: light.lifx_linen_cupboard
name: Linen Cbd
template: light_button
type: 'custom:button-card'
show_header_toggle: false
title: Hallways
type: entities
Template (put this at the top of your RAW Lovelace config):
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(--paper-item-icon-active-color)
- box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
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
2 Likes
Thank you.
Your theme is awesome. Good job.
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?
