Ah!! thanks!
For some inexplicable reason I had the button_card_templates: in the separate file!!
Doh!
1 Like
Thank you, sir! Interesting how I was able to create a vertical âgap cardâ without needing to declare the color type. Regardless, now I can add spacing in a vertical-stack-in-card! 
Except that (and Iâm really sorry about this) why does this work in my ui.lovelace.yaml
button_card_templates:
haveibeenpwned:
show_state: true
show_icon: false
color: 'var(--paper-card-background-color)'
size: 70%
styles:
name:
- font-size: 14px
state:
- font-size: 14px
but this doesnât
button_card_templates:
!include button_card_templates.yaml
Given that my buton-card-templates.yaml file is this
haveibeenpwned:
show_state: true
show_icon: false
color: 'var(--paper-card-background-color)'
size: 70%
styles:
name:
- font-size: 14px
state:
- font-size: 14px
For completeness my button is defined like this
- type: custom:button-card
entity: sensor.breaches_myemail_com
name: [email protected]
template: haveibeenpwned
state:
- value: 0
operator: '>'
styles:
card:
- box-shadow: 0px 0px 8px 2px var(--primary-text-color)
- color: red
1 Like
If what youâve written is what you have, then your include has underscores and your file has hypens and is missing one t. Appart from that your config looks fine.
1 Like
What an idiot!
You could have been so much crueller. I deserved it.
My only excuse is I started this late last night and continued this morning.
No, not an excuse at all.
Sorry for wasting your time.
PS the missing t was typo in this post only
2 Likes
ah thanks, missed that.
didnât solve the issue though, it seems to completely ignore the styles bit:
mixed test setup, only difference between the buttons is this:
type: horizontal-stack
cards:
- <<: *custom_button_switch
entity: switch.sw_multi_purpose_template
name: Multi purpose
and
- type: custom:button-card
template: switch
entity: switch.sw_audio_auditorium_template
name: Aud. Audio
lock: true
state:
To make it really agnostic, Iâd add an arbitrary attribute to the entity and use the attribute value in the template:
that is a nice trick indeed! will note that for sure. And somehow I canât see how to make the templated translation though, so I can use that in the button_card_templates?
I still would need to truncate the switch.sw bit at the beginning and _template at the and, to arrive at sensor.xxx_actueel to go from switch.sw_xxx_template to sensor.xxx_actueel
doing that now with
var id = entity.entity_id.split('.')[1].slice(3, -9);
return states['sensor.' + id + '_actueel'].state + ' Watt';
maybe you see another way?
yes i have this too, and the include is found alright, but the templates seem not to work (at all).
button_card_templates:
!include /config/lovelace/includes/button_card_templates.yaml
type: horizontal-stack
cards:
- type: custom:button-card
template: switch
entity: switch.sw_multi_purpose_template
name: Multi purpose
etc
etc
Ive copied my anchor into a template, (see post above) but this doesnât configure the button like it shouldâŚ
You have both style and styles defined at the same time, style is deprecated you shouldnât use it anymore.
The path shouldnât start with /config, as home-assistantâs root is already /config when it looks for files. I think it should be (no / at the beginning either): lovelace/includes/button_card_templates.yaml
really sorry to disagree here, but my experience teaches me differently. Paths should always start with the /, even when referencing a simple image template.
Most of the time these paths start with /local/ when these files reside in the /www folder.
since Ive filed all Lovelace files in /config/lovelace and sub folders there , /includes for includes, /tiles for tiles, /buttons for buttons ;-), this is the correct path for this includes file.
Iâve tried it without the root /config, but this wonât work. I get a popup asking me to take control or let Lovelace be configured automatically⌠which is a silly way for saying Ive made an error in the path ⌠(filed an issue for that some time ago, donât knoww if thatâs picked up at all)
O I missed that⌠sorry for that, Ill re-read the docs for that.
Please let me ask, if style is deprecated, how come it is still working when using anchors??
hm, I use this as well I have style: and styles: both in my config and it seems to work fine.
I use this to define an opacity to the card which was (donât know about now) weirdly a different opacity than if Iâd define it in the card style. It is probably fixed but at first the same opacity would look different when using style: or styles:.
Weird stuff 
it is the same with using ârgba(x,x,x,0.7)â which would look different than opacity 0.7 (which it shouldnât no?). For example if I use the --paper-card-background-color with rgba it will only render opacity on the card and not the text. If I use opacity on the card it will render everything that way including text.
But as I said before I am a noob when it comes to this and as such I just did what worked for me. However it might be that there is something that overrides the stuff I made I wouldnât know.
Anyways, I will try to use the opacity in styles as style is deprecated you say. I will report back here if my findings happen to be different from last time 
style is copied to styles.card and style is ignored in the code. Using both at the same time will have unexpected effects (like ignored stuff).
Iâll deprecate style in the next release!
Allright, was only one line anyways but thanks to your handy tip of anchors this will be really one line .
Will change it, thanks.
Hey everyone, how do you set the background of the card to be mostly transparent? I donât want the whole card to be transparent, just the background.
100% transparent
styles:
card:
--ha-card-background: "rgba(0, 0, 0, 0.0)"
--ha-card-box-shadow: 'none'
1 Like
Just a stupid question here, also related to that same transparency question:
What is the difference between ha-card-background and âpaper-card-background-color? I have used the paper card for all my cards for months now, is there any difference and if so are there any advantages?
Same, ha-card-background inherits from the other.
You can simply use background-color instead also 
1 Like
Ok, so no difference other than name? I also found out that when I add a random name in my themes.yaml file, e.g. ugly-betty: âpinkâ and the in the button card:
styles:
card:
- âpaper-card-background-color: var(âugly-betty)
That this will work just as fine as defining an âoriginalâ name.