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' ; ]]]
had 2 issues at least: a wrong js code, should be window.location.pathname and in my case moe specifically window.location.pathname.split('/')[1] to get the dahsboard url. Secondly, I had an incorrectly placed ‘(’ in the bottom variables path…
resulting in a corrected:
- type: custom:button-card
template: button_shortcut_menu
icon: >
[[[ return (window.location.pathname.split('/')[1] == 'ui-settings')
? 'mdi:remote-desktop' : states['sensor.weather_icon'].state ; ]]]
tap_action:
action: navigate
navigation_path: >
[[[ return (window.location.pathname.split('/')[1] == 'ui-settings')
? '/ui-settings/developer' : '/lovelace/weer_klimaat' ; ]]]
variables:
path: >
[[[ return (window.location.pathname.split('/')[1] == 'ui-settings')
? 'developer' : 'weer_klimaat' ; ]]]
this is working fine now, but still feels somewhat complex, having to repeat the template on all options. did post in the state-switch thread, hope that could simplify things a bit, if at all possible, now or in the future.
Use a variable 
variables:
is_path_matching: "[[[ return window.location.pathname.split('/')[1] == 'ui-settings' ]]]"
tap_action:
action: navigate
navigation_path: >
[[[ return variables.is_path_matching ? '/ui-settings/developer' : '/lovelace/weer_klimaat' ]]]
ha, yes, that’s cool of course. Makes it easier on the eye indeed. Will adjust like that.
Thanks!
Won’t that interfere with the variable option I already use in the button itself?
Still, I’d need that for all options… so it wont really make it much shorter.
- type: custom:button-card
template: button_shortcut_menu
variables:
dashboard: >
[[[ return window.location.pathname.split('/')[1] == 'ui-settings' ]]]
path: >
[[[ return variables.dashboard ? 'developer' : 'home_energy'; ]]]
icon: >
[[[ return variables.dashboard ? 'mdi:remote-desktop' : 'mdi:flash'; ]]]
tap_action:
action: navigate
navigation_path: >
[[[ return variables.dashboard
? '/ui-settings/developer' : '/ui-data/home_energy'; ]]]
# variables:
# path: >
# [[[ return variables.dashboard ? 'developer' : 'home_energy'; ]]]
I’d hoped something like this would have been possible:
- type: custom:button-card
template: button_shortcut_menu
variables:
is_path_matching: >
[[[ return window.location.pathname.split('/')[1] == 'ui-settings' ]]]
tap_action:
action: navigate
state:
- operator: template
value: >
[[[ return variables.is_path_matching ]]
icon: mdi:remote-desktop
navigation_path: /ui-settings/developer
variables:
path: developer
- default:
icon: states['sensor.weather_icon'].state
navigation_path: /lovelace/weer_klimaat
variables:
path: weer_klimaat
fyi this is my template button_shortcut_menu:
button_shortcut_menu:
variables:
view: >
[[[ return window.location.pathname.split('/').slice(-1) ]]]
size: 25px
styles:
icon:
- color: var(--secondary-text-color)
card:
- background: >
[[[ return variables.view == variables.path
? 'var(--secondary-background-color)' : 'var(--card-background-color)';
]]]
How do i split the state text in 2 rows? <br> works with name but how to do it with state? 
You can’t have a variable that uses another variable that’s why you have this error.
You can use state_display with templates for that 
a bit late to the party on this subject, but has it been added to the butt0n-card options? cant find anything on it, and need some hovering popup texts, just like with Custom Header:
sorry If I missed it after reading through +3000 posts…
They are called “tooltip”. You can try adding the HTML using a template
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
aww, too bad, feared as much… wouldn’t there be a way around this? maybe introducing a config_variable next to the variables with now have?
It would be possible if variables where evaluated in the order they are declared, but it’s not the case since the variables object is a map (unordered), not an array (ordered). I can probably introduce something to cover for that edge case.
1 Like
of course…
must have a look how to do that… and where to put it in the card config.
thanks for the pointer!
It may not be possible on the full button because it requires HTML to exist. You definitely can place it on the labels/names/states/custom_field by adding the HTML in a template.
ok, so when this is one of my buttons:
- type: custom:button-card
template: button_shortcut_menu
icon: >
[[[ return states['sensor.weather_icon'].state ]]]
tap_action:
action: navigate
navigation_path: /lovelace/weer_klimaat
variables:
path: weer_klimaat
styles:
icon:
- color: >
[[[ return states['sensor.temperature_color_name'].state ]]]
and I’d like the tooltip to show the value of [[[ return variables.path.replace('_',' ').toUppercase() ]]]. Maybe even simpler, have it show the title of the view (though this not in the button config yet).
title: Weer & Klimaat
path: weer_klimaat
icon: mdi:weather-partly-cloudy
would you try and fit it in this button config individually, or, hoping to cut some extra code, considering it would be identical for all buttons, add it to the used button template:
button_shortcut_menu:
variables:
view: >
[[[ return window.location.pathname.split('/').slice(-1) ]]]
size: 25px
styles:
icon:
- color: var(--secondary-text-color)
card:
- background: >
[[[ return variables.view == variables.path
? 'var(--secondary-background-color)' : 'var(--card-background-color)';
]]]
not really sure where https://www.w3schools.com/css/css_tooltip.asp leads me, so would appreciate any further nudges…
Hi, I have a silly question but definately no idea how to solve.
Im displaying an input_number state.
This state is always shown as X.X
How can I template the state and show the number without ,x only like an integer?
I’ve already told you!
Output this HTML into the label, name, state, or custom field.