Hi!
One day i saw “button card template is missing” and noticed that code in lovelace dashboards for button_card_templates disappeared and YAML starts with
title: Home
views:
I had a backup, so I restored it, but it disappeared again and again after approx one hour. I can’t see anything in logs (I have an error log level). How can I define button_card_templates in Lovelace dashboards?
small update:
using theme variables with:
opacity-on: rgba(255,100,100,0.8)
opacity-off: rgba(100,255,255,0.8)
works fine, proving the variable is at least set correctly and merged using the id: in the button templates.
probably should conclude (again, or, after all) that using a color variable in the rgba(), simply isn’t allowed?
It is allowed if the css variable is defined as name: 123, 123, 123 which I forgot to mention in my initial message 
Your button-card templates are missing from your lovelace config
Now you lost me… really sorry but I don’t understand what to do.
In my theme I am merely following the main variables primary-color and card-background-color, so no where do I set the rgb numbers myself.
I can’t either, because there are several themes used, all with their own coloring set.
Please give it one more thought how I could use these ‘named’ variables with the opacity?
Look, just do what works for you, there’s no one size fits all way to tackle problems in the web world. 
In your post above you had something which worked for you, just use that.
well, thats just it, I haven’t found a way to use opacity on a named variable, but I’ll take it elsewhere, thanks for the support and suggestions!
for reference: I also tried, as a final option, to have the main theme colors like primary-color: set with rgb values (mine were set in hex) so to follow your last suggestion to the letter. unfortunately that doesnt help either. so for now: I haven’t found a way to use a color variable name in the rgba() construct to have it use an opacity.
To recap:
my-color: 123, 123, 123. Note this is not a color, it’s just 3 numbers separated by a coma.color: rgba(var(--my-color), 0.5)
my-color: rgba(123, 123, 123, 0.5)color: var(--my-color)
That’s the 2 options. It’s not possible to re-use an existing color css variable you’ll have to to duplicate it.
great idea, and now I see what you said before.
copied the colors of primary-color in to a new primary variable name:
# Main colors
primary-color: '#1675C9' # Header
primary: 22, 117, 201
and use it like:
card:
- background-color: rgba(var(--primary),0.8)
or as an intermediary theme color:
opacity-on: rgba(var(--primary),0.8)
used as
card:
- background-color: var(--opacity-on))
unfortunately no such luck…
Edit:
Of course I need to select the theme…. Duh
Success! Thanks!
please read my first message in the topic!
Are you using lovelace YAML mode? If not, you might be using some custom views which rewrites the dashboard. If so it seems to be an issue with that other custom resource.
Just testing the triggers_update but it’s not working for me. The card is only updated by the entity but not form the triggers_update entity. Is there anything i’m doing wrong?
type: custom:button-card
entity: binary_sensor.voordeur
triggers_update:
- binary_sensor.achterdeur
triggers_update updates the card (which is useful if you have javascript templates) but the card doesn’t reflect the state of what is defined in triggers_update if that’s your intent.
Can I use an if statement to set the “top” and “left” styles? I cannot get this to work…
- type: 'custom:button-card'
entity: input_select.page
style:
top: >
[[[
if (entity.state == 'Lighting') return '215px';
if (entity.state == 'Home') return '175px';
else return '500px';
]]]
left: >
[[[
if (entity.state == 'Lighting') return '270px';
if (entity.state == 'Home') return '175px';
else return '500px';
]]]
style is part of card-mod, it doesn’t support javascript templates but I believe you can use jinja2 templates with card-mod.
I thought so, but I was told otherwise… Card-Mod Post
I’ve tried the jinja2 templates also without success
top: >
{% if is_state('input_select.tablet_page','Lighting') %}
215px
{% else %}
500px
{% endif %}
I see, this is for a picture element I guess.
The format is not correct, it should be something like:
card_mod:
style: |
:host {
top: jinja here;
left: jinja here;
}
Can I see a context?
Are you using a custom:button-card inside some Picture elements card?
If so, the conditional positioning should be done like it is described here:
- type: 'custom:button-card'
card_mod:
style:
{% if is_state(..., 'Lighting') %}
--my-top: 215px;
--my-left: 270px;
{% elif is_state(..., 'Home') %}
--my-top: 175px;
--my-left: 175px;
{% else %}
--my-top: 500px;
--my-left: 500px;
{% endif %}
entity: input_select.page
style:
left: var(--my-left)
top: var(--my-top)
Not tested by myself, try using this.