a ok, cool. At least you can’t blame me for not reading the release notes and breaking changes 
1 Like
Regarding Templating, is there currently a way within button-card to apply two separate templates (for example, a style template and a state template) to the same card? I find myself duplicating style settings any time I want the general appearance of my buttons to be the same but the functionality to differ based on the device type (for example, fans should have a spinning icon, etc.) The end result are multiple button templates that are 95% identical and therefore duplicated throughout various templates.
I read through the docs once more but either didn’t understand or didn’t see how to accomplish what I am attempting to do.
EDIT: I know I can configure device specific settings on the card, but in my case I actually have device specific states that would apply to multiple cards and therefore benefit from having a template.
You can inherit another template from a template 
Just add: template: other_template in a template. And the examples in the documentation uses that trick, if I remember correctly
Brilliant! Thank you!
Quick follow up - The following nested template results in a fan icon that does not spin. Is this the expected behavior or have I done something wrong?
dimmer-left-button-settings:
show_state: true
show_label: true
icon: mdi:lightbulb
tap_action:
action: toggle
styles:
grid:
- grid-template-areas: '"n i" "s i" "l i"'
- grid-template-columns: auto 50px
card:
- width: 160px
- border-radius: 10px 0px 0px 10px
- height: 55px
- background-color: '#222222'
label:
- font-weight: bold
icon:
- height: 35px
- width: 35px
name:
- justify-self: start
- padding-left: 8px
- font-weight: bold
- text-transform: Titlecase
- font-size: 14px
state:
- justify-self: start
- padding-left: 14px
- font-size: 10px
- text-transform: uppercase
state:
- value: 'on'
color_type: icon
color: rgb(181, 142, 49)
- value: 'off'
styles:
name:
- filter: opacity(50%)
state:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- filter: opacity(50%)
fan-left-button-settings:
template: dimmer-left-button-settings
icon: mdi:fan
state:
- value: 'on'
spin: true
If you want to merge states, you need to specify an id, else you other state is appended, see here
From the doc also:
You can merge states together by id when using templates. The states you want to merge have to have the same id. This id parameter is new and can be anything (string, number, ...). States without id will be appended to the state array. Styles embedded in a state are merged together as usual. See here for an example.
thanks!
btw, your cardcolor - --paper-card-background-color: rgb(255, 251, 239) can also be set like:
- background-color: island spice
update
island spice didn’t work after all, now using ‘ivory’ for that.
Now I get it. Sometimes I need to see a feature in action to truly absorb how it works. After a quick version upgrade and cache purge, everything is working as it should. Thanks again!
1 Like
so I am building my lights panel, which is coming along nicely. Had to play with the aspect ratio for the top button, and now the size is fine, but the placing of the label and state is awkward, and no matter the window size, the text overlaps as you can see. How should I change that to have it have more space between the lines (code below the screenshot):
top button:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: 'custom:button-card'
# color_type: label-card
# color: auto
name: Hallway and ambient lights
entity: group.all_hallway_lights
aspect_ratio: 8/1
label_template: >
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
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;
}
}
var stateHTML = entity.state === 'on'
? `<span style="color: #FF0000">${capitalizeFirstLetter(entity.state)}</span>`
: `<span style="color: #00FF00">${capitalizeFirstLetter(entity.state)}</span>`;
if (count === 0 || count === entities.length ) return stateHTML +': All ' + entities.length.toString();
return stateHTML +': ' + count.toString() + ' of ' + entities.length.toString();
# if (count > 0) return count.toString() + ' of ' + entities.length.toString() + ' hallway and ambient lights';
# return 'Hallway and ambient lights';
layout: icon_name
# color: auto
size: 25px
# show_state: true
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
# - padding: 0px 0px
- border-radius: 12px
# - width: 330px
# - height: 55px
- --paper-card-background-color: rgb(255, 251, 239)
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
# - padding: 0px 5px
# - justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
# - padding: 0px 10px
# - justify-self: start
- text-transform: capitalize
# - font-weight: bold
# - padding-left: 10px
grid:
- grid-template-columns: min-content min-content
- width: min-content
- margin: auto
- grid-gap: 0px 10px
name:
# - justify-self: center
# - padding-left: 10px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
state:
- value: 'on'
#spin: true (uncomment this line for spinning icon)
styles:
name:
- color: black
state:
- color: red
- value: 'off'
styles:
card:
- opacity: 0.6
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: black
name:
- color: black
state:
- color: black
- value: 'unavailable'
styles:
card:
- opacity: 0.4
- color: grey
- --paper-item-icon-color: grey
label:
- color: rgba(0, 0, 0, 0.0)
thanks for having a look!
Try with:
styles:
card:
- padding: 0px
better!
maybe even a bit too much…
Just put layout: vertical for this button and it will be okay.
ok thanks, that looks more robust indeed, and Ive added 4px padding, which prevents it from reaching the bottom edge of the button. vertical made the icon appear on top though. Would there be a way to have the icon and name on 1 line again? (could of course use the padding without vertical, but that showed a bit more wobbly)
You hand’t the icon before so I would also just add show_icon: false and you’ll be set
EDIT: I found a workaround from an earlier @Mariusthvdb post. Changing…
img_cell:
- align-self: start
- text-align: start
to
img_cell:
- justify-content: start
- align-items: start
…fixed the alignment.
Summary
Have some weird behavior going on that I cannot explain. Using the Apple Like button example from the gitub page, the icon placement is inconsistent. On Chrome (Desktop) and Safari (iOS), the icon is centered. On Safari (Desktop), the icon is left justified. I’ve cleared the cache numerous times and it doesn’t seem to help. What am I missing?
… now that you mention it. It is not mentioned at all. so it must have taken the icon of the group automatically, caused by the layout: vertical. Will play around some more and see what gives in the various options.
so many of those, this is becoming a ‘grabbelton’ of goodies
I’m sure I saw it on here but can’t find it now (it is a looong thread).
How do you insert a line break in a name or label template?
try +"<br>"+ ?
label_template: >
var id = entity.entity_id.split('.')[1].slice(3, -9);
return states['sensor.' + id + '_actueel'].state +"<br>"+ ' Watt';
you probably remembered this post for a break in the label (not template), though I can’t get that to work in the name.
Does anyone have an example for a template low battery icon red full battery icon green?
I have a sensor for phone battery and would like to change colour based on below % or above %.
Cheers
How did you do the “under cabinets” card? I use “slider entity row” but I didn’t see an option for the big icon… Is it this component that can do that?
Looks awesome.