I use this to get glowing color behind a entity_picture:
icon:
- filter: drop-shadow(0px 0px 12px green) contrast(1.4)
But i want the same color that the lamp/light has like this:
icon:
- color: >-
[[[ return 'rgb('+
states['light.frans_taklampa'].attributes.rgb_color +')' ]]]
I dont want it to only be green 
anyone know how to do it ? 
Try
icon:
- filter: drop-shadow(0 0 12px var(--button-card-light-color))
Thanks! works great! 
Noob question.
I would like to show temperature this way: 15Ā°
(No decimal and no C in unit)
Use state_display: or label:
Sorry still dont understand.
How would i use it in my case:
kiosk_mode:
hide_header: false
views:
- path: default_view
title: android
type: custom:horizontal-layout
badges: []
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.vidtemp_dnevna_temp
name: ' '
icon: mdi:sofa
color: orange
show_state: true
size: 20%
styles:
card:
- height: 120px
- width: 150px
state:
- font-size: 60px
state_display: |
[[[ return entity.state + 'Ā°' ]]]
And so it is in your card:
- type: custom:button-card
entity: sensor.vidtemp_dnevna_temp
name: ' '
icon: mdi:sofa
color: orange
show_state: true
size: 20%
styles:
card:
- height: 120px
- width: 150px
state:
- font-size: 60px
state_display: |
[[[ return entity.state + 'Ā°' ]]]
Worked thank you!
How about no decimal number?
15Ā° instead 15,5Ā°?
Then you could use:
state_display: |
[[[ return Math.round(entity.state | 0) + 'Ā°' ]]]
Fantastic, thank you.
been some time since I adjusted some of my buttons/decluttering cards, so I have this question:
why does this more_info work:
- type: custom:button-card
template: button_meterget
hold_action:
action: more-info
haptic: success
entity: >
[[[ return variables.sensor;]]]
tap_action:
haptic: light
action: call-service
service: zwave_js.refresh_value
service_data:
entity_id: >
[[[ return variables.sensor;]]]
triggers_update:
- switch.[[id]]
- sensor.[[id]]_actueel
variables:
get: 'Power: '
sensor: sensor.[[id]]_actueel
switch: switch.[[id]]
unit: ' W'
but doesnt the entity: do its job:
template: button_meterget
entity: >
[[[ return variables.sensor;]]]
hold_action:
action: more-info
haptic: success
# entity: >
# [[[ return variables.sensor;]]]
tap_action:
haptic: light
action: call-service
service: zwave_js.refresh_value
service_data:
entity_id: >
[[[ return variables.sensor;]]]
triggers_update:
- switch.[[id]]
- sensor.[[id]]_actueel
variables:
get: 'Power: '
sensor: sensor.[[id]]_actueel
switch: switch.[[id]]
unit: ' W'
?
must be simple, but please have a look, thanks.
One more question.
Can i resize units of measurements font?
Make only Ā°C smaller?
If you mean something like that:
hereās the piece of code:
state_display: >
[[[ return Math.round(entity.state | 0) + `<span style='font-size: 14px;
vertical-align: 32px'>Ā°C</span>` ]]]
Exactly what I meant, thank you again.
need some js help pleaseā¦
id like to show something like this:
state_display: >
[[[ var fakestate = `<span style="color: var(--active-color);"> ${entity.state}:</span>`;
var id = entity.entity_id.split('.')[1];
var fakelabel = `<span style="color: var(--active-color);"> ${Math.round(entity.attributes.brightness/2.55)} % - ${states['sensor.' + id + '_power'].state} W</span>`;
return (entity.state == 'on') ? fakestate +' ' + fakelabel : null; ]]]
but only show the wattage provided a sensor.id_power is available. iow the fakelabel is either
var fakelabel = `<span style="color: var(--active-color);"> ${Math.round(entity.attributes.brightness/2.55)} % - ${states['sensor.' + id + '_power'].state} W</span>`;
or when the sensor_power isnt available:
var fakelabel = `<span style="color: var(--active-color);"> ${Math.round(entity.attributes.brightness/2.55)} % </span>`;
what would be the best way to accomplish that? please have a look? thanks!
thought not yet perfect, this is getting close (decided to take out the brightness in the fake state, as I have that already in the notification circle:
state_display: >
[[[ var fakestate = `<span style="color: var(--active-color);"> ${entity.state}:</span>`;
var id = entity.entity_id.split('.')[1];
var power = states['sensor.' + id + '_power'];
var bri = Math.round(entity.attributes.brightness/2.55)
var content = power? power.state + ' W': null;
var fakelabel = `<span style="color: var(--active-color);"> ${content} </span>`;
return fakestate +' ' + fakelabel; ]]]
@romrider, pardon my direct question please, but isnt there another way to do that (I know I can enter a hardcoded sensor I have for all light power sensors summed, but that would update all fields on any power changeā¦ also, I could do:
- type: custom:button-card
template: button_light
entity: light.kist
triggers_update: sensor.kist_power
but that would still require me to hard code that for all buttons.
I will if I must of course, but looking for a more elegant way first
separate update, I believe this does it (and moreā¦):
state_display: >
[[[ var statecolor = (entity.state == 'on') ? 'var(--active-color)' : 'var(--text-color-off)';
var labelcolor = (entity.state == 'on') ? 'var(--button-card-light-color)' : 'orange';
var id = entity.entity_id.split('.')[1];
var power = states['sensor.' + id + '_power'];
var bri = entity.attributes.brightness ? Math.round(entity.attributes.brightness/2.55) : '';
var content = power? power.state + ' W': '';
var divider = power? ': ' : '';
var fakestate = `<span style="color: ${statecolor};"> ${entity.state}</span>`;
var fakelabel = `<span style="color: ${labelcolor};"> ${content} </span>`;
return fakestate + divider + fakelabel; ]]]
also took out the ānullā statements, because all of a sudden I saw āNullā on the buttons, which was new for me tbh, maybe some backend change caused that. Anyways, the above allows me to style all section of the line, and guards for existence on all individual partsā¦pfff
almost forgot to mention: thanks to @bramski for his amazing PowerCalc allowing me to finally add power consumption for all our smart lights and other devices which Ive been looking for for over 4 years. (and forcing me to edit these buttons once again, revisiting JS/CSS ā¦ duh
custom_fields:
wifi: |
[[[
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: var(--icon-color);">
</ha-icon><span>`
]]]
Is it possible to use a sensor to set the icon name?
Yes:
[[[
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: var(--icon-color);">
</ha-icon>${states['sensor.YOURSENSOR'].attributes.friendly_name}`
]]]
By the way, thereās an orphaned <span> in your code.
Thanks for the reply! But it did not turn out as I had imagined. I want the (mdi:iconā¦ sensor) to be instead of the wifi icon. It is possible? See pic below:
[[[
return `<ha-icon
icon="mdi:wifi"
style="width: 20px; height: 20px; color: var(--icon-color);">
</ha-icon>${states['sensor.p30_sofia_sound'].state}`
]]]
What do you mean with that?