great!! now I can add my button card
“type: custom:button-card
template_xxx:
etc”
thank you
Note that you may use button-card w/o adding templates.
Templates are only needed if you need to reuse one button-card in many places.
I tried to create a single card, anyway I don’t be able to reply the card, because I know very well mushroom card but not button card, so if I have template and card I don’t manage to use together in a single card
What?
Unclear.
Post your code, not pictures.
because I couldnt find a post on setting a live internet image as background to a button-card, please let me post this as some reference.
a local image is straightforward:
styles:
card:
# - background: rgb(223,236,247) #replaced by the image
- background: >
[[[ return "url('/local/season/autumn.png')"; ]]]
- background-size: cover
the internet image: https://cdn.knmi.nl/knmi/map/current/weather/warning/waarschuwing_land_0_new.gif
can be set as entity_picture using:
show_entity_picture: true
size: 80%
entity_picture: https://cdn.knmi.nl/knmi/map/current/weather/warning/waarschuwing_land_0_new.gif
use it as a background image, so we can add some overlaying texts and notifications etc with:
styles:
card:
# - background: rgb(223,236,247)
- background: >
[[[ return "url('https://cdn.knmi.nl/knmi/map/current/weather/warning/waarschuwing_land_0_new.gif')"; ]]]
- background-size: cover
It’s not in the documentation so fixing it here for others that might be able to use it
2 Likes
Hi,
I am restructuring my complete Home Assistant setup - specifically splitting files into subfiles, as I am loosing an overview with these huge code-files and their content. I am using buttons-card templates in order to minimize the coding effort and to maximise the standardisation when it comes to design and look.
However, I am having massive problems right form the start and I need help, please.
My directory structure is as follows:
- /config
- ui-lovelace.yaml
- configuration.yaml
- button-card-template.yaml
- /integrations
- lovelace.yaml
- /lovelace
- /views
- living-room.yaml
- /button-card-templates
- button-card-templates.yaml
- /views
In ui-lovelace.yaml I have following code:
title: My Home
button-card-templates: !include /config/lovelace/button-card-templates/button-card-templates.yaml
views:
- !include lovelace/views/living-room.yaml
In button-card-templates.yaml I have following code:
title-header:
styles:
card:
- font-family: Metropolis-Regular.otf
- background: none
- padding: 16px 0
- '--mdc-ripple-press-opacity': 0
name:
- font-size: 32px
- color: var(--contrast20)
Last but not least, in living-room.yaml the code is as follows:
- type: custom:button-card
template: title-header
name: Living Room
But I constantly get the error message
Button-card-template “title-header” is missing
.
I am certainly blind but I think I have everything referenced.
What am I missing?
Thanks a ton!
1 Like
I’m wondering if anyone has suggestions how I might get calendar events into a custom button card. A basic example using 2023.12:
type: custom:button-card
show_state: true
show_name: false
show_icon: false
state_display: |
[[[
var results = hass.callService(
'calendar',
'get_events',
{
entity_id: 'calendar.birthdays',
duration: "72:00:00"
},
{
entity_id: ['calendar.birthdays'],
});
console.log(results);
]]]
Leads to this error: "Service call requires responses but caller did not ask for responses"
And some searching leads me to find that HA recently added response support to WebService in this PR which made it to 2023.12.
But I also see in connection-mixin.ts that the javascript API doesn’t support setting the return response field.
Is there a way I can make this work or is this a Feature Request?
Hi Everyone!
I’m a bit new to YAML and still figuring it out.
I’m trying to set a background-color with rgb attributes of current light
AFAIK, background-color can recieve rgb in this format only:
background-color: rgb(255,0,0)
i try something like this:
background-color: rgb( {{
states.light.somelight.attributes.rgb_color[0] | int }} , {{
states.light.somelight.attributes.rgb_color[1] | int }} , {{
states.light.somelight.attributes.rgb_color[2] | int }} )
but with no success…
can anyone point me to a solution? ive been searching non-stop with no success
AFAIK i need to be in a JS template [[[ return ...]]] style but with attributes inside.
also important to mention that the background-color that I’m trying to change is for a notification inside the button and the background of the button itself.
did you really search the thread?because only 4 posts up I posted how to use rgb color on a background…
it you want to template the rgb color attribute of some light use the Javascript template syntax this card uses (you have some Jinja lookalike 
)
[[[ return 'rgb(' + states['light.somelight'].attributes.rgb_color + ')' ; ]]]
I actually did. your post talked about setting a live picture from a website as a background which is nice but not what I’m for, please correct me if I’m wrong.
I have 3 RGB attributes from a certain light that i want to use as a background-color for a notification inside my button-card. AFAIK i need to insert those 3 variables so it would keep changing as long as the light color changes. I just need the right JS syntax for this
I posted that above
yes thanks! i noticed after i replied 
unfortunately it didn’t work, maybe
EDIT: my mistake, it works! thanks!!!
1 Like
Hi, I’m building my first dashboard and started using the custom button card for lights. It all seems to work (with a bit of trial and error) but when I open the dashboard for the first time, the buttons look different, they seem to have the right icon but no card background-color. When I turn the light on and then off, the button matches to the template. Can someone point me in the right direction?
button_card_templates:
standard:
size: 30%
hold_action:
action: more-info
color_type: icon
styles:
name:
- font-size: 0.65em
- white-space: normal
label:
- font-size: 0.4em
- white-space: normal
state:
- value: 'off'
color: black
styles:
icon:
- opacity: 0.2
card:
- padding: 0.2em
- background-color: lightgrey
- value: 'on'
color: yellow
styles:
icon:
- opacity: 1
card:
- padding: 0.2em
- background-color: lightslategrey
name:
- color: white
...
views:
- type: sidebar
title: Summary
icon: mdi:tablet-dashboard
badges: []
cards:
- type: custom:stack-in-card
keep:
margin: true
border_radius: true
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.sonoff_10001db111
template: standard
name: Sitting Room1
icon: mdi:lamp-outline
...
I saw it a few times too.
Can you check for JS errors in the browser when refreshing the dashboard page? Could be caused by the same error I had.
There aren’t any errors in the console. When I refresh, it does have the correct card background-color for a second and then reverts to white/ no colour.
share the person card please
1 Like
Edit: this is config used in a picture-elements card.
Thank you very much
today I found myself struggling using a card variables inside a cards background css gradient. I did mange to use it in the end, but it took an intermediate variable I had to declare on the element itself.
I had hoped to do something like:
- background: radial-gradient(variables.severity_color ,skyblue)
but that wont work, nor some of the version I tried with ${variables.severity_color} inside a html format.
Feels a bit clunky to have a global variables set, and not be able to use it directly in one of the options, but need to ‘return’ it first to a new variable.
Please have a look what I did wrong/how this could be fixed If at all?
thanks!
type: custom:button-card
template: button_summary
entity: sensor.schimmel_sensor
name: Schimmel
variables:
active: >
[[[ return states['binary_sensor.schimmel_alert'].state === 'on'; ]]]
severity_color: >
[[[ var mold = entity.state;
if (mold > 80) return 'red';
if (mold > 70) return 'crimson';
if (mold > 65) return 'orange';
return 'green'; ]]]
hold_action:
action: navigate
navigation_path: /ui-data/klimaat
state:
- operator: template
value: >
[[[ return variables.active;]]]
spin: true
styles:
card:
- color: var(--primary-color)
- --card-color: >
[[[ return variables.severity_color; ]]]
## wanted to use the variables.severity_color inside the background here
- background: radial-gradient(var(--card-color) ,skyblue)
icon:
- color: >
[[[ return variables.severity_color; ]]]