needs to be rgba
The thing is no styles are being applied. I’ve tried this in firefox and chrome
- title: Test
cards:
- type: 'custom:button-card'
tap_action:
service: media_player.kodi_call_method
action: call-service
service_data:
method: Input.ContextMenu
entity_id: media_player.kodi
styles:
card:
- width: 100px
- height: 100px
- background-color: green
icon:
- color: red
icon: 'mdi:menu-open'
then something is wrong with your install or you are using an old version
1 Like
Thanks, double checked everything and you were right. It was an install error
1 Like
So this is wrong unless you actually created a customcards folder inside the www folder.
Remember, local is just a link to www and customcards is also a link to www. Neither local nor customcards folders actually ‘exist’
1 Like
trying to concatenate the state: in a template and the actual config for an entity won’t work just yet.
please check with me if this should be possible:
template bit:
state:
- value: 'on'
# icon: 'mdi:desk-lamp'
styles:
name:
- color: black
state:
- color: gray
label:
- color: red
- value: 'off'
# icon: 'mdi:flashlight-off'
styles:
card:
- opacity: 0.6
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: grey
name:
- color: grey
state:
- color: grey
- value: 'unavailable'
styles:
label:
- color: rgba(0, 0, 0, 0.0)
- opacity: 0.4
- color: grey
- --paper-item-icon-color: grey
and the entity config:
- type: horizontal-stack
cards:
- type: custom:button-card
template: switch
entity: switch.master_bed_outlet
name: Master-b light
label_template: >
var id = entity.entity_id.split('.')[1].slice(11);
return id;
state:
- value: 'on'
icon: 'mdi:desk-lamp'
- value: 'off'
icon: 'mdi:flashlight-off'
as far as I can check it now, the template is used, up to the state: section posted above, because the icons from the entity config take over the state: section. As a consequence, all other state: settings are ignored.
reading this: button-card/README.md at master · custom-cards/button-card · GitHub
specifically:
The state arrays in templates will be concatenated together with your config, meaning you can add new states but not change/delete states. Your main config states will be appended to the ones in the template.
As far as I can test it now, the whole state: section is ignored and only the icon bit is active, when using the icon in the entity-config. No concatenation at all taking place. Which would really be a pity, because if one only wants to set an icon depending on state, one needs to set to whole state section on each individual entity. In this case, they are all identical, so that’s a whole lot of code duplicated many times…
thanks for having a look!
Thanks. Fixed that now.
Not sure what I’m doing wrong here. I’d like my fan icon to spin when the fan is in an on state, yet that doesn’t seem to happen as configured. Has anyone managed to get spin: working with a fan?
Template
button_card_templates:
ceiling-fan-icon-settings:
show_icon: true
show_label: false
show_name: false
styles:
card:
- height: 36px
- width: 50px
grid:
- grid-template-areas: '"i"'
- grid-template-columnns: auto
icon:
- height: 26px
- width: 26px
state:
- value: 'on'
styles:
icon:
- spin: true
Button
- type: custom:button-card
template: ceiling-fan-icon-settings
entity: fan.living_room_fan
tap_action:
action: call-service
service: fan.toggle
service_data:
entity_id: fan.living_room_fan
1 Like
try:
state:
- value: 'on'
spin: true #(uncomment this line for spinning icon)
That did the trick. Thank you sir!
The icon size is by default 40% of its area width. You can use size: 100% or any other value to resize the icon. This is a main config parameter,it’s not is styles.
Coincidentally, I was able to manipulate the icon size via styles using:
styles:
icon:
- height: XXpx
- width: XXpx
This gave me exactly what I needed to tweak icon sizes down to the pixel.
That’s also a solution, size does exactly this with the value you provide 
but it existed before you where able to do the same thing with styles, so I keep it.
Hi peeps,
Any way to display more then one label, or multiple state attributes via label_template (but each in it’s own row)?
Use <br /> between rows you want to display. label_template supports HTML that’s why this works.
Did you get the templates to work.
I am stuck at trying to import the file with the styles
No errors but the buttons looks like the plain old ones.
Hmm…can’t make this work…if I add HTML break it doesn’t render the card 
This is the example code…
label_template: >
return 'Moisture: ' + states['plant.dracaena'].attributes.moisture + '%' <br /> + states['plant.dracaena'].attributes.conductivity + 'µS/cm'
You’re missing a “+” before your break (quotes too). Try:
label_template: >
return 'Moisture: ' + states['plant.dracaena'].attributes.moisture + '%' + '<br />' + states['plant.dracaena'].attributes.conductivity + 'µS/cm'
1 Like
Awesome! That works!
Much appreciated 
It’s exactly the behaviour expected (for now) but I’ll work on something to make this possible. There’s no easy way to achieve that (it will involve adding an id to your state so that I can match what you want to merge).
There’s already a feature request for this here : #165