Yeah, that’s how I feel with this crap sometimes.
Last question, what style are you applying to keep your icon and circle frame the same size but also keeping them in adjacent corners?
It seems like you’re doing something with padding but also keeping the icon in the upper left.
Something like this:
size: 60%
styles:
img_cell:
- justify-content: start
- align-items: start
icon:
- height: auto
grid:
- grid-template-areas: '"i info" "n n" "s s" "l l"'
- grid-template-columns: 1fr 35%
- grid-template-rows: 1fr min-content min-content min-content
- position: relative
custom_fields:
info:
- align-self: start
- opacity: 0.5
My stuff are in the grid, not absolutely positioned.
Yeah, auto did the trick. I’ve been fighting with icon auto stretching the height so none of the positioning was working unless i set the height to a % which is not what I wanted. Was about to pull my hair out. Auto keeps the aspect ratio.
A bit of help please? I’m trying to have the card change the picture with state change, but it’s not happening. Ideas?
- type: horizontal-stack
cards:
- type: "custom:button-card"
entity: cover.cover
name: balcony
styles:
card:
- height: 200px
entity_picture: >
[[[
if (entity.state == 'closed') return '/local/img/awn_closed.jpg';
else return '/local/img/awn_open.jpg';
]]]
entity_picture is not a style entry, it’s a main config entry:
- type: "custom:button-card"
entity: cover.cover
name: balcony
entity_picture: >
[[[
if (entity.state == 'closed') return '/local/img/awn_closed.jpg';
else return '/local/img/awn_open.jpg';
]]]
styles:
card:
- height: 200px
mkay…I did that, but still no joy 
no image is shown with the card at all.
EDIT: figured it out. Needed to add:
show_entity_picture: true
Fat button
Hi Luxor73,
Can you publish your button configuration?
Thank you
hi @RomRider, when I try to make the lock icon smaller it doesn’t work fine , it’s as if it only works in a little radius around the padlock and not on the entire surface of the card,is this normal or its possible fix it?
thanks again for the best lovelace card
Sure, but it’s work in progress…
I created six templates for rooms and light points:
- light_room_classic
- light_room_ambiance
- light_room_color
- light_point_classic
- light_point_ambiance
- light_point_color
Code:
####### BUTTON LIGHT TEMPLATE ###############
button_card_templates:
# variabili: name, entity, icon
light_room_classic:
show_name: true
show_state: false
show_label: true
tap_action:
action: toggle
hold_action:
action: more-info
color: auto-no-temperature
color_type: icon
styles:
icon:
- height: 40px
- width: 40px
label:
- font-size: 13px
- align-self: start
- justify-self: center
- padding-top: 5px
- padding-left: 10px
grid:
- grid-template-areas: '"l i bt_set" "l n bt_set" "bg_icon bt_bg_slider bg_value"'
- grid-template-columns: 25px auto 25px
- grid-template-rows: 40px auto auto
custom_fields:
bt_set:
- align-self: start
- justify-self: end
bt_bg_slider:
- padding-top: 6px
bg_icon:
- align-self: center
- justify-self: end
- padding-top: 2px
bg_value:
- font-size: 12px
- align-self: center
- justify-self: center
- padding-top: 4px
- padding-right: 2px
state:
- value: 'on'
label: 'ON'
- value: 'off'
label: 'OFF'
custom_fields:
bt_set:
card:
type: 'custom:button-card'
entity: '[[[ return entity.entity_id ]]]'
entity_picture: '/local/icone/classic.png'
show_entity_picture: true
show_name: false
show_state: false
show_icon: false
tap_action:
action: more-info
hold_action:
action: more-info
custom_fields:
setting_icon: >
[[[
return `<ha-icon
icon="mdi:settings"
style="width: 20px; height: 20px; color: var(--button-card-text-color);">
</ha-icon>`
]]]
styles:
card:
- height: 45px
- background-color: 'rgba(0, 0, 0, 0.0)'
- width: 25px
- border-radius: 0%
entity_picture:
- align-self: start
- justify-self: end
- height: 20px
- width: 20px
setting_icon:
- align-self: start
- justify-self: end
grid:
- grid-template-areas: '"setting_icon" "i"'
- grid-template-columns: auto
- grid-template-rows: 22px 22px
bt_bg_slider:
card:
type: 'custom:button-card'
entity: '[[[ return entity.entity_id ]]]'
show_name: false
show_state: false
show_icon: false
custom_fields:
slider:
card:
type: custom:slider-entity-row
entity: '[[[ return entity.entity_id ]]]'
hide_state: true
name: slide_brighness
full_row: true
styles:
card:
- height: 20px
- background-color: 'rgba(0, 0, 0, 0.0)'
- border-radius: 0%
grid:
- grid-template-areas: '"slider"'
- grid-template-columns: auto
- grid-template-rows: auto
bg_icon: >
[[[
return `<ha-icon
icon="mdi:brightness-5"
style="width: 18px; height: 18px; color: var(--button-card-text-color);">
</ha-icon>`
]]]
bg_value: >
[[[
var bri = states[entity.entity_id].attributes.brightness;
return (bri ? bri : '');
]]]
light_room_ambiance:
template: light_room_classic
styles:
grid:
- grid-template-areas: '"l i bt_set" "l n bt_set" "bg_icon bt_bg_slider bg_value" "tmp_icon bt_tmp_slider tmp_value"'
- grid-template-rows: 40px auto auto auto
custom_fields:
bt_tmp_slider:
- padding-top: 6px
tmp_icon:
- align-self: center
- justify-self: end
- padding-top: 2px
tmp_value:
- font-size: 12px
- align-self: center
- justify-self: center
- padding-top: 4px
- padding-right: 2px
custom_fields:
bt_set:
card:
entity_picture: '/local/icone/ambiance.png'
bt_tmp_slider:
card:
type: 'custom:button-card'
entity: '[[[ return entity.entity_id ]]]'
show_name: false
show_state: false
show_icon: false
custom_fields:
slider:
card:
type: custom:slider-entity-row
entity: '[[[ return entity.entity_id ]]]'
hide_state: true
name: slide_temperature
attribute: color_temp
full_row: true
styles:
card:
- height: 20px
- background-color: 'rgba(0, 0, 0, 0.0)'
- border-radius: 0%
grid:
- grid-template-areas: '"slider"'
- grid-template-columns: auto
- grid-template-rows: auto
tmp_icon: >
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px; color: var(--button-card-text-color);">
</ha-icon>`
]]]
tmp_value: >
[[[
var bri = states[entity.entity_id].attributes.color_temp;
return (bri ? bri : '');
]]]
light_room_color:
template: light_room_ambiance
custom_fields:
bt_set:
card:
entity_picture: '/local/icone/color.png'
light_point_classic:
template: light_room_classic
styles:
icon:
- height: 30px
- width: 30px
- align-self: center
- justify-self: end
name:
- justify-self: start
grid:
- grid-template-areas: '"l i n bt_set" ". . . bt_set" "bg_icon bt_bg_slider bt_bg_slider bg_value"'
- grid-template-columns: 25px auto auto 25px
- grid-template-rows: 35px 10px auto
light_point_ambiance:
template: light_room_ambiance
styles:
icon:
- height: 30px
- width: 30px
- align-self: center
- justify-self: end
name:
- justify-self: start
grid:
- grid-template-areas: '"l i n bt_set" ". . . bt_set" "bg_icon bt_bg_slider bt_bg_slider bg_value" "tmp_icon bt_tmp_slider bt_tmp_slider tmp_value"'
- grid-template-columns: 25px auto auto 25px
- grid-template-rows: 35px 10px auto auto
light_point_color:
template: light_point_ambiance
custom_fields:
bt_set:
card:
entity_picture: '/local/icone/color.png'
1 Like
Then you can put buttons everywhere with (examples):
- entity: light.ingresso
template: light_room_ambiance
icon: 'mdi:door'
name: Ingresso
type: 'custom:button-card'
- entity: light.sgabuzzino
template: light_room_classic
icon: 'mdi:hammer'
name: Sgabuzzino
type: 'custom:button-card'
- entity: light.specchio_sinistra
template: light_point_ambiance
icon: 'mdi:lightbulb'
name: sx
type: 'custom:button-card'
- entity: light.camera_anteriore_destra
template: light_point_color
icon: 'mdi:lightbulb'
name: adx
type: 'custom:button-card'
P.S.
I have 3 images in ‘/local/icone/’ folder to identify differents hue lamps (classic, ambiance and color)
hi @RomRider
thanks for adding better error tracking! though, a template that has been functioning for a really long time now all of a sudden errors out:
label: >
[[[
var i;
var entities = entity.attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {count += 1;}
}
if (count === entities.length) return 'All ' + entities.length + ' lights on';
if (count === 0) return 'No lights on';
return 'Lights on: ' + count + ' of ' + entities.length;
]]]
what could be the issue here:
the group definitely exists:
please have a look? thanks!
It has been working because I was not catching errors 
It doesn’t mean your code is correct.
You have to put some sanity check in your code. Accessing objects properties before testing if the object exists is a VERY BAD behaviour in javascript and results in what you are seeing 
label: >
[[[
var entities = entity.attributes && entity.attributes.entity_id ? entity.attributes.entity_id : undefined;
var count = 0;
var length = entities ? entities.length : 0;
if (entities) {
entities.forEach(entity => {
if (states[entity] && states[entity].state === 'on') count += 1;
})
}
if (count === 0) return 'No lights on';
if (entities && count === length) return 'All ' + length + ' lights on';
return 'Lights on: ' + count + ' of ' + length;
]]]
PS: It probably happens because one of the entity in your group doesn’t exist (typo?)
That’s gotta be it. I’m looking at his code and in a perfect world it should work. Only option is that one of the entity_id’s listed in the group isn’t real or no longer exists.
will have to recheck, but the @RomRider code above works perfectly:
if one of the lights in the group would be non-existent for whichever reason, I would have to see an error wouldn’t I?
You are correct though, I did change 1 light, and it was still listed in the group. So how come this is now not an issue… must take a closer look at the template
Got into this in earnest today (lockdown!) and trying to figure out some styling so some advice would be appreciated. I have two questions:
I’ve added a cover with the results in the pix below but how do I make the name appear under the icon like it is for the LL Button card?
color_type: icon
entity: cover.garage
name: Garage
icon: 'mdi:garage'
color: green
size: 50%
styles:
card:
- height: 170px
state:
- value: open
color: red
icon: 'mdi:garage-alert'
styles:
card:
- animation: blink 5s ease infinite
- operator: default
type: 'custom:button-card'
And secondly, I have a tide sensor that presents the next high tide as a time only (along with other sensors that have just time values) and I’m looking for the best way to present these in LL with a consistent theme/styling.
Left: Glance Card; Right: Entity Card
I want to have the sensor value (time) centered with the sensor name in a centered colored text just below the time value. Is that doable?
please let me follow up, with a related button.
been using a backend sensor before, which dent update an all group members, so I used sensor.time. Now trying your frontend JS template in a button notification like this:
[[[
var i;
var entities = states['group.github_repo_updates'].attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {count += 1;}
}
return count;
]]]
# [[[ var group = 'group.github_repo_updates';
# var entities = states[group].attributes && states[group].attributes.entity_id ? states[group].attributes.entity_id : undefined;
# var count = 0;
# if (entities) {
# entities.forEach(entity => {
# if (states[group] && states[group].state === 'on') count += 1;
# })
# }
# return count;
# ]]]
@romrider will get mad at me again… because I use the unchecked states, but for this exercise it shows what I am trying to do: count the groupmembers with state ‘on’.
The commented bit was my effort at trying Romriders correction from the posts above, but it will only show me the total count of the group, not the ‘on’ count.
how should I add the entity to the counting template to have it iterate the individual entities, and not count the group…
thanks if you would have a look.