I found the issue, but i cannot understand how to solve it.
Here is explained the cause:
“… This is because the template from the popup is evaluated from the parents’ point of view, not the child point of view, this is the expected behaviour. If you want to achieve that, move the card which is in the popup in a button-card config template.”
Someone can help me?
reviewing my longstanding button-card templates, I have a question, using:
styles:
custom_fields:
zone_image:
- bottom: 10%
- position: absolute
- right: 12%
# - border: '3px solid #73AD21'
# - width: 30px
# - height: 30px
custom_fields:
zone_image: >
[[[ return `<img src= "${states['sensor.' + variables.id + '_overlay_image'].state}"
style="width: 30px">`; ]]]
as you can see, I have a zone_image showing at the bottom right corner. I need to set the style width in that src tag, because if I dont, the image is completely blown out of proportion of the button. I ofc hoped to set those size stylings in the custom_field styling for that element (now commented) but they only see to the placeholder, and not the image itself. the border clearly marks the correct spot and size.
cant we resize an image other than in the tag?
note btw that we need both width and height for the border, but only width for the image.
please have a look, thanks!
You can use your sensor state as background image for the custom field and so get rid of using a <src> tag.
custom_fields:
zone_image:
- width: 80px
- height: 80px
- background: >
[[[ return 'url(' +
states['sensor.' + variables.id + '_overlay_image'].state + ')'
]]]
- background-size: cover
- background-position: center
custom_fields:
zone_image: '[[[ return '' '' ]]]'
Hi, what card did you use for this remote controller?
thanks, that was it.
I made it happen using:
styles:
custom_fields:
zone_image:
- background-image: >
[[[ return 'url(' + states['sensor.' + variables.id + '_overlay_image'].state +')'; ]]]
- background-size: contain
- background-repeat: no-repeat
- bottom: 10%
- position: absolute
- right: 10%
# - border: '3px solid #73AD21'
- width: 30px
- height: 30px
custom_fields:
zone_image: >
[[[ return ' '; ]]]
but am not sure this is prettier than me earlier solution with the img tag tbh…
it does fit better with my card config, because that looks like:
styles:
custom_fields:
zone_image:
- background-image: >
[[[ return 'url(' + states['sensor.' + variables.id + '_overlay_image'].state +')'; ]]]
- background-size: contain
- background-repeat: no-repeat
- bottom: 10%
- position: absolute
- right: 10%
# - border: '3px solid #73AD21'
- width: 30px
- height: 30px
card:
- background-color: >
[[[ return states['sensor.' + variables.id + '_background_color'].state; ]]]
- background-image: >
[[[ return 'url(' + states['sensor.' + variables.id + '_picture'].state +')'; ]]]
- background-position: center
- background-repeat: no-repeat
- background-size: 95%
- animation: >
[[[ return variables.united ? 'card_bounce 4s infinite' : null; ]]]
custom_fields:
zone_image: >
[[[ return ' '; ]]]
now, using the same techniques for card And overlay image.
Somehow though it feels a bit tacky to have an empty zone_image custom_fileds
anyways, nice to have to option and understand it. again, thanks for explaining!
Hi, I’m using a markdown card as a custom field. Is there anyway to use a variable inside a jinja code?
Replacing the light entity with a variable assigned in the button card? thanks
{% if is_state("light.woonkamer_lampen", "on") %}
<font color='#74e5f2'>De lampen staan aan</font>
{% else %}
<font color='#74e5f2'>De lampen staan uit</font>
{% endif %}
using a button-card with this style on the card:
card:
- background-color: >
[[[ return states['sensor.' + variables.id + '_background_color'].state; ]]]
- background-image: >
[[[ return 'url(' + states['sensor.' + variables.id + '_picture'].state +')'; ]]]
- background-position: center
- background-repeat: no-repeat
- background-size: 95%
as you can see there is a background-color, which shows a nice small ‘border’ around the background-image. This is perfect when the border-radius is 0px, which is my system default.
However, I have 1 theme where the border-radius is set to 25px (Christmas…) and then there s a small issue here.
The button-card gets rounded nicely, but the background-image is cut at the rounded edges, and isnt rounded itself.
can we not set the border radius on the background image itself too?
ofc I did try and add a dedicated
- border-radius: var(--ha-card-border-radius)
but that doesnt help. It simply adds the radius which is already set in the theme. And it does that to the card, and not the image…
edit
I was able to set
show_entity_picture: true
entity_picture: >
[[[ return states['sensor.' + variables.id + '_picture'].state; ]]]
take out the background settings mostly, except for color, and style it with:
entity_picture:
- border-radius: var(--ha-card-border-radius)
which is nice too.
I do see the picture not always being fully centered though, even though all of my pics are 100% square.
Will let the cache flow for a bit and see what happens on successive reloads.
Using the picture as background was spot perfect…
always something…
edit
nothing to do with cache. it was the set padding. inspector showed the card had padding: 4.096px 0px which explains it all…
fixed with:
card:
- padding: 0px
and 
So… If I’m starting a new and ambitious UI project… Should I dare to rely heavily on this amazing card or is the risk caused by it not being actively maintained great? Advice please! 
I strongly recommend the use. I think that the danger that it will stop being maintained is very low. At least one of the other users will take over the maintenance as this card has a lot of fans.
And start with button templates and variables from the beginning. It saves a lot of time and structures your configuration 
beautiful this card, but how to change the color of the backlight? now it always comes out yellow
Hey,
do you want to define the color yourself? Or is it supposed to show the hue of the LED?
There are so many possibilities =)
type: custom:button-card
color_type: icon
entity: light.{{ENTITY}}
size: 55%
name: Light
state:
- value: 'on'
spin: false
color: yellow
icon: mdi:lightbulb
styles:
state: 'on'
card:
- box-shadow: 0px 0px 10px 1px cyan
icon:
- color: |
[[[
var [domain, object_id] = entity.entity_id.split('.');
if (domain === "light")
return 'var(--button-card-light-color)';
return '{{ color }}';
]]]
- operator: default
spin: false
color: grey
icon: mdi:lightbulb
thank you, you opened a world for me 
In addition to @MrThiemann, here is the whole code of my card:
type: custom:button-card
entity: light.hue_iris
custom_fields:
ring: |
[[[ if (entity.state == 'on' && entity.attributes.brightness) {
const brightness = Math.round(entity.attributes.brightness/2.55);
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
stroke="var(--button-card-light-color)" stroke-width="2" fill="none"
style="transform: rotate(-90deg); transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
<text x="50%" y="54%" fill="var(--button-card-light-color)" font-size="16" font-weight= "bold"
text-anchor="middle" alignment-baseline="middle">
${brightness}<tspan font-size="10">%</tspan></text></svg>`;}
]]]
aspect_ratio: 1/1
color-type: icon
color: auto
styles:
card:
- border: none
- border-radius: 5px
- '--mdc-ripple-color': lightyellow
- '--mdc-ripple-press-opacity': 0.5
name:
- font-size: 0.8rem
- font-weight: 700
state:
- font-size: 0.7rem
label:
- font-size: 10px
custom_fields:
ring:
- position: absolute
- right: 5%
- top: 10%
- width: 30%
tap_action:
action: toggle
haptic: success
hold_action:
action: more-info
haptic: selection
show_last_changed: false
show_state: false
state:
- value: 'on'
styles:
card:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
- box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
- transition: 2s ease
icon:
- filter: drop-shadow(0 0 0.75rem var(--button-card-light-color))
- transition: 2s ease
- position: relative
- left: '-1.5rem'
name:
- color: var(--button-card-light-color)
id: glow
show_label: true
label: |
[[[
if (entity.state == 'on' && entity.attributes.brightness)
return 'Helligkeit: ' + (Math.round(entity.attributes.brightness / 2.55)) + '%';
]]]
i love this custom button card! there are so many possibilities! Almost my entire dashboard is made of it!
I also think the custom_fields are really awesome! that opens new doors =)
After I had pretty much everything done, I got busy cleaning up my code and subpacking everything into templates and variables.
that makes it a lot clearer!
wow thank you!!!
really!!
it works well:
can you perhaps help to adjust the code that he draws a circle without the math for brightness? i want to use it for my radiator too, but only with my temperature.
i get the temperature to work, but i dont know exactly change the code to draw a complete circle
okay i get it
Thank YOU AGAIN
can you explain me why you use more than one template?
i dont understand the usage?
save you in the template for example the values of the custom card not only the styles?
Hi,
I for myself use the button card by 90%.
See the weather table in the center of that dashbord:
This template looks like this:
table_button:
layout: vertical
show_state: false
show_icon: false
show_label: true
show_name: false
show_units: false
styles:
card:
- height: 50px
label:
- font-size: 16px
tap_action:
action: null
I have another template for a music and number button but my major button looks like this:
button_card_templates:
standard_button:
size: 25px
show_icon: true
show_label: true
show_state: true
show_name: false
variables:
disconnected_entity: 'off'
custom_fields:
disconnected: |
[[[
if (variables.disconnected_entity == 'on') return `<ha-icon
icon="mdi:lan-disconnect"
style="width: 20px; height: 20px; color: red;"</ha-icon>`;
]]]
add_info: ' '
styles:
card:
- height: 65px
label:
- font-size: 12px
- position: absolute
- top: 70%
- left: 5%
state:
- font-size: 13px
- position: absolute
- right: 8%
- top: 40%
icon:
- position: absolute
- left: 5%
- top: '-25%'
custom_fields:
disconnected:
- height: 20px
- line-height: 20px
- min-width: 12px
- position: absolute
- right: 1%
- top: 60%
add_info:
- font-size: 11px
- font-weight: bold
- height: 13px
- position: absolute
- right: 3%
- top: 2%
I have a fixed space to show, if a device is broken or unavailable.
Due to the template, the button config is now quite simple:
entity: sensor.active_harmony_scene
template: standard_button
label: Media
icon: mdi:audio-video
show_state: true
variables:
disconnected_entity: |
[[[
if (states['binary_sensor.harmony_online'].state == 'on') return 'off';
else return 'on';
]]]
styles:
icon:
- color: |
[[[
if (entity.state == 'PowerOff') return 'var(--state-icon-color)';
else return 'var(--state-icon-active-color)';
]]]
tap_action:
action: navigate
navigation_path: /lovelace-details/5
type: custom:button-card
I simply have to define, which entity is the relevant to watch if connected or not and it will be shown as this:
@Jens_Wymeersch > I like your version! But my initial use of it failed. I am a little confused about the use. Can you give a custom-button code example for the button, one where you have all the variables and when you do not have one (like the power)?
Thanks.