Yes
custom_fields:
day:
- padding-top: 5%
1 Like
If you want to position it on top of the card, Iād suggest to go with position: absolute instead and remove it from the grid.
1 Like
Thanks, this works!
@RomRider I tried that, but my card disappeared alltogether. I think was using the wrong variables with that. Iāll try that otherwise, I have a good solution now as well thanks to you both. Thanks alot!
Edit: the result 
And now itās (ironically) time to sleep 
2 Likes
Is it possible to create a code, where the used Configuration Template is dependent on a part of the entity_id? Basically this:
If entity = binary_sensor.motion_* === then use template: sensor_motion.
So what this does, is using the configuation template I created called āsensor_motionā, but only if the binary_sensor ID used contains the word āmotionā in the first part. I want to use this together with auto-entities, but I have different configuration templates for types of binary sensors (so they all have their own on/off icons based on state).
I hope my question is clear!
Maybe this is also possible by using a javascript template for the icon variable. But I think that is too complext. It then needs to check the entity_id name and also show open or close icon base off the state. I donāt think you can have two different variables for one template right?
That is not possible.
The icon field supports javascript templates, also in the state array. However, better use variables for that and compute the icon globally in your template, then just use the variable wherever you need to.
1 Like
Thanks for clarifying. I hoped to use this in conjunction with layout card and auto-entities. I have it working for light and media player entities. But for sensors I use state dependable icons. That makes having a single configuration template for multiple types of sensor impossible, which then wonāt play nicely with auto-entities sadly.
Hello.
I am trying to get my label: > working but I cant get it to work.
I have been trying all night so I better ask just to see if its even possible before I get crazy home here 
What I want is to get a div with 2 columns like this.
lights <-> doors
but its ending up with
lights
doors
What I am missing?
Br. Tomas
label: >
[[[
var lights = states['sensor.lights_on'].state;
var doors = "Doors open: " + states['sensor.doors_open'].state;
var alarm = "Alarm: " + states['sensor.home_status'].state;
return '<div class="row">' +
'<div class="column">' +
lights +
'</div>' +
'<div class="column">' +
doors +
'</div>' +
'</div>';
]]]
Hi and thanks a lot for this card i use this on all my views 
I have a question :
I have a sonoff which turn on a yeelight and i would like to get a button card that display like light card but the icon toggle switch.sonoff and the slider around increase/decrease brigthness.
I have this :
aspect_ratio: 1/1
custom_fields:
graph:
card:
entity: light.yeelight_001
style: |
#info{
display: none;
}
ha-card {
box-shadow: none;
}
.light-button{
display: none;
}
.more-info{
display: none;
}
type: light
entity: switch.salon_lampe1
icon: 'mdi:lightbulb-outline'
name: Yeelight 001
hold_action:
action: none
styles:
card:
- overflow: unset
grid:
- grid-template-areas: '"i" "n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
graph:
- overflow: unset
type: 'custom:button-card'
How can I put the icon in the middle of the slider ?
Maybe by using the standard light card?
entity: light.infinity_mirror
type: light
It looks fine to me. Is there anything wrong with it?
Youāll have to position your light card using position: absolute and remove it from the grid
I can use a template light yes but i would like use button cardā¦ Thanks
Thank i will try.
What do you mean by āremove it from the gridā?
Thanks i will try
edit:
color: auto
color_type: icon
entity: switch.salon_lampe1
icon: 'mdi:lightbulb-outline'
name: Yeelight
show_icon: true
show_label: false
show_last_changed: false
show_name: true
show_state: false
styles:
card:
- border-radius: 10px
- height: 200px
- width: 200px
- margin: 5px 5px 0px 11px
- padding: 0px 0px
custom_fields:
light:
- background-color: 'rgba(0, 0, 0, 0)'
- position: absolute
- left: 35px
- font-size: 15px
- line-height: 20px
- transform: scale(1.7)
grid:
- position: relative
icon:
- color: |
[[[
if ( (states['light.yeelight_001'].state
== 'on')
|| (states['switch.salon_lampe1'].state
== 'on')
) return 'green';
else return 'red';
]]]
name:
- position: absolute
- bottom: 10px
- font-variant: small-caps
- font-size: 14px
- color: red
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.salon_lampe1
custom_fields:
light:
card:
entity: light.yeelight_001
style: |
#info{
display: none;
}
ha-card {
box-shadow: none;
background: transparent;
}
.light-button{
display: none;
}
.more-info{
display: none;
}
type: light
type: 'custom:button-card'
give me this : 
I have now another problem :
The focus is on the custom_field and not on the entity_id of button card.
I can change the brightness but i click on the bulb, itās not call the service.
If i remove card-mod style, i call the toggle light card action and not the call service of button card.
Have you an idea ? I would like to increase/decrease brightness with the slider and call service switch.toggle which is the action of button cardā¦
Thanks
Try this out:
color: auto
color_type: icon
entity: switch.salon_lampe1
icon: 'mdi:lightbulb-outline'
name: Yeelight
show_icon: true
show_label: false
show_last_changed: false
show_name: true
show_state: false
styles:
card:
- border-radius: 10px
- height: 200px
- width: 200px
- margin: 5px 5px 0px 11px
- padding: 0px 0px
custom_fields:
light:
- background-color: 'rgba(0, 0, 0, 0)'
- position: absolute
- left: 35px
- font-size: 15px
- line-height: 20px
- transform: scale(1.7)
grid:
- position: relative
icon:
- z-index: 10
- color: |
[[[
if ( (states['light.yeelight_001'].state
== 'on')
|| (states['switch.salon_lampe1'].state
== 'on')
) return 'green';
else return 'red';
]]]
name:
- position: absolute
- bottom: 10px
- font-variant: small-caps
- font-size: 14px
- color: red
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.salon_lampe1
custom_fields:
light:
card:
entity: light.yeelight_001
style: |
#info{
display: none;
}
ha-card {
box-shadow: none;
background: transparent;
}
.light-button{
display: none;
}
.more-info{
display: none;
}
type: light
type: 'custom:button-card'
Just curious, why do you have both a switch and a light? It makes your config less cluttered if you always leave the switch on, and just toggle the light. Also I donāt see why not to use a template light, but maybe Iām missing something.
1 Like
I know. I agree with you. At home, I leave the switches on, but itās for a friend who doesnāt like to leave the light bulbs on electrically ā¦ Thanks for your help and I will test as soon as I get home.
And for the template, he wonāt useā¦ 
thanks it works !
another day, another challengeā¦
trying to show a button, depending on the current dashboard (window.pathname)
- type: custom:button-card
template: button_shortcut_menu
icon: >
[[[ return (window.pathname == 'ui-settings/time_settings')
? 'mdi:remote-desktop' : states['sensor.weather_icon'].state ; ]]]
tap_action:
action: navigate
navigation_path: >
[[[ return (window.pathname == 'ui-settings/time_settings')
? '/ui-settings/developer' : '/lovelace/weer_klimaat' ; ]]]
variables:
path: >
[[[ (return window.pathname == 'ui-settings/time_settings')
? 'developer' : 'weer_klimaat' ; ]]]
but this doesnt work. (yet)
regular button in my menu bar is like:
- type: custom:button-card
template: button_shortcut_menu
icon: mdi:calendar
tap_action:
action: navigate
navigation_path: /lovelace/tijd_agenda
variables:
path: tijd_agenda
styles:
icon:
- color: >
[[[ return states['sensor.trash_color'].state ]]]
so I know the format is alright.
What should I change in the window.pathname templates to get this going?
thanks for having a look!
Try out adding a / to the start?
- type: custom:button-card
template: button_shortcut_menu
icon: >
[[[ return (window.pathname == '/ui-settings/time_settings')
? 'mdi:remote-desktop' : states['sensor.weather_icon'].state ; ]]]
tap_action:
action: navigate
navigation_path: >
[[[ return (window.pathname == '/ui-settings/time_settings')
? '/ui-settings/developer' : '/lovelace/weer_klimaat' ; ]]]
variables:
path: >
[[[ (return window.pathname == '/ui-settings/time_settings')
? 'developer' : 'weer_klimaat' ; ]]]