Yes that’s possible using styles and font-size:
label: |
[[[
return '🎼';
]]]
styles:
label:
- font-size: 200px
1 Like
Great! Thank you
Thanks for your prompt reply. Im not sure what exactly needs to be changed and if the change needs to be made in the button card it self in the love lace raw code. are you able to give me an example using the code i provided?
If anyone is interested im willing to compensate for help programming my HA system. Im fairly new to HA and could use a little help with customization.
You need to modify your template which you have in the raw configuration editor. Wherever you have
tap-action:
action: call-service
service: browser_mod.popup
service_data:
card:
xxxx
deviceID: this
you need to use the following:
tap-action:
action: fire-dom-event
browser_mod:
command: popup
card:
xxxx
Basically, whenever you have browser-mod_popup in your code, it needs to be replaced with the new syntax.
Thanks to the comment of Hekm77 the solution is terrifying simple:
styles:
img_cell:
- background: |
[[[
return 'rgb(' + entity.attributes.rgb_color + ',0.2)'
]]]
Greetings all! 
I am completely new to using templates/variables with my button cards, but can already see so many possibilities. Unfortunately, I just can’t seem to understand how to make them work. (At all 
). While the following obviously isn’t correct, it will hopefully explain what I was trying to accomplish:
type: custom:button-card
entity: light.den_lamp
tap_action:
action: |
[[[
if [light.den_lamp] is already on
call-service: light.turn_off
else
call-service: light.turn_on
service_data:
- brightness_pct: 70
- color_temp: 273
]]]
I ultimately have this working through a combination of an empty script and Node-Red, but if someone could perhaps show me the way it SHOULD be written it would definitely help me learn (and hopefully others as well)
Thanks!
I don’t think tap_action allows templating in its configuration. How about you use tap_action for turning the light on with its brightness and color_temp settings and use hold_action or double_tap_action for turning the light off?
Or use light.toggle as service for tap_action. This leaves out the brightness and temp settings though…
I was starting to think that might just be the case as well (or I’m just not smart enough to figure it out 
)
Not a bad idea with the double_tap_action! That’s a function I don’t often think of using. The original idea behind the variable is a single tap switch that will either turn off the light if it’s on, or turn it on while simultaneously clearing out whatever settings were stored from it’s last use. That, and a little furthering of my (clearly lacking ) programming skills!
Thanks for your reply!
I’ve been thinking about this for a bit and you should be able to get what you want by creating 2 scripts. One that turns off the light and one that turns it on with the brightness and color temp parameters.
You can use the call-service tap action with a data template to turn on either script depending on the state of the light. The tap action should look something like this:
tap_action:
action: call-service
service: script.turn_on
data_template:
entity_id: >-
{% if is_state('light.den_lamp', 'off') %}
script.script2
{% elif is_state('light.den_lamp', 'on') %}
script.script1
{% endif %}
Like I said I’m not 100% sure if templates are allowed in tap_action but you could give it a try!
@teamRibcage to add on to what’s already been said and similar to @Jordi83’s suggestion, I created my own toggle script so that a can specify a light profile for use with the custom button card.
toggle_light:
# todo: timer variable?
description: "Toggle a light using the specified profile when turned on"
fields:
light:
description: "A light entity"
example: "light.foyer_light"
profile:
description: "A light profile"
example: "normal/night/security"
mode: parallel
sequence:
- choose:
- conditions:
- condition: template
value_template: "{{ is_state(light, 'off') }}"
sequence:
- service: light.turn_on
target:
entity_id: "{{ light }}"
data:
profile: "{{ profile }}"
default:
- service: light.turn_off
target:
entity_id: "{{ light }}"
tap_action:
haptic: light
action: call-service
service: script.toggle_light
service_data:
light: light.foyer_light
profile: normal
double_tap_action:
haptic: medium
action: call-service
service: script.toggle_light
service_data:
light: light.foyer_light
profile: night
@parautenbach // @Jordi83 - There are some good ideas in both of those answers, and even more importantly they’ve helped me learn a little more about the syntax. Thank you!!
1 Like
Thanks so much for your response! i tried making that change to the code and it doesn’t seem to do anything. no sure if i missed something? any assistance you can provide is extremely apricated!!
Here is a screenshot of what the code looked like before i made the change:
here is what it looks like after i made the change:
I figured it out!! their was a part in the code all the way at the bottom that said
deviceID:
- this
i changed that to
command: popup
you guys are awesome!! thank you all so much for all your help!!!
1 Like
Hi Guys,
im trying to remove the Temperature and humidity for some of my cards as not all of my rooms in my house have temperature sensors. ( i pasted the code in my previous post 2 days ago). every time i remove it from the code it causes the buttons at the button to shift and bunch together. how can i hide or remove without causing issues with the buttons on the bottom of the card?
How to correctly read attribute state from entity in JSTemplate.
I try like this but not working:
- template:
- ventilo_buttons
variables:
entity: fan.haos_vir_balcony_light_n_fan
entity_light: light.haos_vir_balcony_light_n_fan
name: Balkon
type: custom:button-card
[[[
if (entity.state == 'off'){
return 'Off' + ' • ' + states[variables.entity].attributes.percentage + '%';
} else {
return states[variables.entity].attributes.percentage + '%';
}
]]]
Error:
ButtonCardJSTemplateError: TypeError: Cannot read property 'entity' of undefined in 'if (entity.state == 'off'){ return 'Off' + ' • ' + states[variables.entity].attributes.perce...'
Strange problem JSTemplate:
this JSTemplate works without problem:
outlet:
tap_action:
action: more-info
label: |-
[[[ if (entity.state =='on')
var etat = "Vklopljen • " + states[variables.var_sensor_power].state + "W";
else
var etat = "Izklopljen";
return etat ; ]]]
Card:
- entity: switch.haos_vir_halway_climate
variables:
var_sensor_power: sensor.haos_vir_halway_climate_energy_power
name: Klima
template:
- icon_info_bg
- outlet
type: 'custom:button-card'
and this JSTemplate is similar and won’t work:
ventilo:
tap_action:
action: more-info
icon: mdi:dome-light
template: yellow
label: |-
[[[ if (entity.state =='on')
var etat = "Vklopljen • " + states[variables.var_fan].state;
else
var etat = "Izklopljen• " + states[variables.var_fan].state;
return etat ; ]]]
card:
- template: ventilo_buttons
variables:
var_fan: fan.haos_vir_balcony_light_n_fan
var_light: light.haos_vir_balcony_light_n_fan
name: Balkon
type: custom:button-card
Error:
ButtonCardJSTemplateError: TypeError: Cannot read property 'var_fan' of undefined in 'if (entity.state =='on') var etat = "Vklopljen • " + states[variables.var_fan].state; els...'
what is the difference?
You don’t have an entity set in your second card. I’m not sure, if this is the reason for your error, as it states var_fan is undefinied…
If I do like this:
- type: custom:button-card
entity: light.haos_vir_balcony_light_n_fan
variables:
var_fan: fan.haos_vir_balcony_light_n_fan
template: ventilo_buttons
ventilo:
tap_action:
action: more-info
icon: mdi:dome-light
template: yellow
label: |-
[[[ if (entity.state =='on')
var etat = "Vklopljen • " + states[variables.var_fan].state;
else
var etat = "Izklopljen• " + states[variables.var_fan].state;
return etat ; ]]]
I get error:
ButtonCardJSTemplateError: TypeError: Cannot read property 'state' of undefined in 'if (entity.state =='on') var etat = "Vklopljen • " + states[variables.var_fan].state; els...'