Thanks! Would it also be possible to have something like this that (instead of hash) looks at the url (before hash)? For a different project (that doesnât rely on state-switch), I want to reflect button styles based on the page itself. So I can use templates instead of copying the card to every dashboard.
yes, thatâs very easy, and looks like the hash template above window.location.pathname.split('/')[2] (btw, you know you can check that in the inspector?)
using this button_template:
button_shortcut_menu:
tooltip: >
[[[ function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
return capitalizeFirstLetter(variables.tooltip.replace('_',' ')); ]]]
variables:
# dashboard: >
# [[[ return window.location.pathname.split('/')[1]; ]]]
view: >
[[[ return window.location.pathname.split('/')[2]; ]]]
size: 25px
styles:
tooltip:
- color: var(--text-color-off)
- font-size: 10px
- background: var(--background-color-off)
# - opacity: 0.5
- transition: opacity 0.5s
- padding: 5px
icon:
- color: var(--secondary-text-color)
card:
- box-shadow: none
- background: >
[[[ return variables.view == variables.path
? 'var(--secondary-background-color)' : 'var(--card-background-color)'; ]]]
I color several relevant parts in my menu buttons, but also set icons and navigation paths etc:
a button using that:
- type: custom:button-card
template: button_shortcut_menu
variables:
path: home
tooltip: >
[[[ return variables.view == variables.path
? 'Hassio' : 'Home'; ]]]
icon: >
[[[ return variables.view == variables.path
? 'mdi:home-assistant' : 'mdi:home'; ]]]
tap_action:
action: navigate
navigation_path: >
[[[ return variables.view == variables.path
? '/ui-data/home_assistant' : '/lovelace/home'; ]]]
styles:
icon:
- color: >
[[[ return (states['sensor.count_alerts_notifying'].state > 0)
? 'red': 'green'; ]]]
state:
- operator: template
value: >
[[[ return (states['sensor.count_alerts_notifying'].state > 0); ]]]
spin: true
you can still combine the state_switch to make it a bit more complex ;-=)
- type: custom:state-switch
entity: group
states:
admin:
type: custom:button-card
template: button_shortcut_menu
variables:
path: settings
tooltip: >
[[[ return variables.view == variables.path
? 'Energy' : 'Settings'; ]]]
icon: >
[[[ return variables.view == variables.path
? 'mdi:flash' : 'mdi:tools'; ]]]
tap_action:
action: navigate
navigation_path: >
[[[ return variables.view == variables.path
? '/ui-data/home_energy' : '/ui-settings/settings'; ]]]
user:
type: custom:button-card
template: button_shortcut_menu
variables:
path: help
tooltip: Help
icon: mdi:help
tap_action:
action: navigate
navigation_path: /lovelace/help
3 Likes
That is very thorough and detailed piece of code 
! Thanks a lot, will check it all out and play with it.
When custom header was dropped a few months ago, I created my own version with button card inside a horizontal stack, using it at the bottom as a sticky and disbaling the original header. It works great, but I want to streamline the code, so itâs easier to maintane and change if needed.
Thanks for your code and suggestions!
same here. (btw, still using CH without a single hiccup âŚ)
this is what it my shortcut menubar looks like
1 Like
I agree, I need to do more RFM! 
But in some cases it is not simple to read docs like these for a beginner!
And to the point examples are in some cases more use-full for beginners, because you can compare the code with the existing documentation!
But still, I understand your frustration! 
Thx anyway!
I was a beginner as well I started using Home Assistant little over a year ago and have learned a lot in the first 3 months. Most I have learned by studying other codes (instead of copy/pasting) and reading all documentations and most importantly: making mistakes. I learned most by making mistakes, so I had to figure out what the issue was. Forcing me to understand the docs which allowed me to use and combine different cards in very creative ways, like this project I did for a media player card: Fully loaded media player card (picture-elements project) - Share your Projects! - Home Assistant Community (home-assistant.io)
There are also people who use copied codes and call it a day. It works on the short term, but they find the most issues down the road when updates to Home Assistant and custom cards happen. Then they have no idea what broke their interface and why (since they never bothered to understand what the card actually is about and ignore all changelogs).
The docs can be overwhelming, but it doesnât mean you have to make it all work in one day. Start small using simple buttons and use that code for other projects. So it was just a friendly advise, since I was in your place as well a year ago
HI maxym,
How did you change the icon for the windows?
at it looks like this:
Thank You.
Hello.
Moving icon around the buttons is easy. you need to reconfigure grid of the button. In short you can create own grid of areas and define which one will display what, using specific names. For example grid area named âiâ will handle an icon, ânâ is for entity name, and âsâ is for status
But what Iâve done is, that one button has even more 4 icons. To achieve that I embedded more button cards into parent button card.
Here is grid definition of my card:
styles:
grid:
- grid-template-areas: '"i window" "n n" "misc temp"'
- grid-template-columns: 1fr 60%
- grid-template-rows: 1fr 1fr 1fr
It splits main button into 2x3 matrix. Then in first row has 2 areas: i for icon and custom called window. Second row is dedicated for entity name. Third row has again 2 custom areas: misc and temp
Here is complete code of my approach a published a few days ago in response of someone else.
Hi kongo09,
I have tried to user your scripts and I wanted to ask you a few things. I have an error for example when I try to change the Fan speed/preset and I got this error : Failed to call service script/airpurifier_mode. Error rendering data template: UndefinedError: âNoneâ has no attribute âindexâ . âairpurifier_modeâ is actually the alias Toggle AC fan speed script. I have no idea why is not working maybe you can guide me to fix the problem.
The rest of the buttons are working
Also I saw that you have custom icons used. Is it something that you can share?
Thank you
Hi @ovidiudr and welcome to the community. Please note that Home Assistant has changed the fan integration, so the script needs an update:
alias: Toggle AC fan speed
sequence:
- service: fan.set_preset_mode
data_template:
entity_id: '{{ entity_id }}'
preset_mode: >
{%- set current = state_attr(entity_id, 'preset_mode') %} {%- set modes
= state_attr(entity_id, 'preset_modes') %} {%- set index =
modes.index(current) %} {%- set next = 1 if current == modes[-1] else
index + 1 %} {{ modes[next] }}
mode: single
icon: 'philips:fan_speed_button'
fields:
entity_id:
description: Entity of fan
example: fan.air_ac2729
description: Set the speed mode of philips AC
Please also make sure that you use at least version 0.4.0 of the custom integration for the Philips fan. You can integrate this with HACS by using this repository: GitHub - betaboon/philips-airpurifier-coap: đ¨ Philips AirPurifier custom component for Home Assistant. With support for new Devices with CoAP protocol. Tested on AC2729/10 (bought early 2020)
Yes, I have created my own custom icons from the Philips icons. Iâm not sure if it is ok to share the code here, as Philips holds the copyright to the design and I donât have a license. However, I documented my approach here.
Hello,
I am quite new to Home Assistant and have a question.
I am trying to override the STATE NAME that is displayed.
This is what my current code looks like.
When the STATE changes to Scene_1 I want the STATE to show âONâ.
- type: 'custom:button-card'
entity: input_text.office_lights_current_scene
show_state: true
icon: mdi:ceiling-light
name: 'Deckenlicht: Normal'
template: base_2x2
gridrow: 2
gridcol: 2 / 4
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.buro_deckenleuchte_rechts_links_normal
styles:
card:
- box-shadow: >
[[[ return (entity.state === 'scene_1' || entity.state === 'home') ? '5px 10px 18px rgba(0, 0, 0, 0.8)' : '5px 10px 18px rgba(0, 0, 0, 0.0)'; ]]]
- color: >
[[[ return (entity.state === 'scene_1' || entity.state === 'home') ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.2)'; ]]]
- background-color: >
[[[ return (entity.state === 'scene_1' || entity.state === 'home') ? 'rgba(255, 255, 255, 0.8)' : 'rgba(115, 115, 115, 0.2)'; ]]]
state:
- value: 'scene_1'
styles:
state:
- name: 'On'
It would be really great if someone has an idea why it currently fails.
I think the issue is how youâre using style. Basically youâre saying: when the state of the entity
input_text.office_lights_current_scene is scene_1 , use this styling: and then you style state with name: On. But that is not a style.
Styles are things like colors, width, filters etc. The variable show_state: true displays the actual state of the entity you list there. I believe you canât change what state actually says. Thatâs kinda the whole use case of state, so it shows the acual state of the entity in HA. You should use label if you want to have something below the name that you can change.
Try:
- type: 'custom:button-card'
entity: input_text.office_lights_current_scene
show_label: true
label: 'Off'
show_state: false
icon: mdi:ceiling-light
name: 'Deckenlicht: Normal'
template: base_2x2
gridrow: 2
gridcol: 2 / 4
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.buro_deckenleuchte_rechts_links_normal
styles:
card:
- box-shadow: >
[[[ return (entity.state === 'scene_1' || entity.state === 'home') ? '5px 10px 18px rgba(0, 0, 0, 0.8)' : '5px 10px 18px rgba(0, 0, 0, 0.0)'; ]]]
- color: >
[[[ return (entity.state === 'scene_1' || entity.state === 'home') ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.2)'; ]]]
- background-color: >
[[[ return (entity.state === 'scene_1' || entity.state === 'home') ? 'rgba(255, 255, 255, 0.8)' : 'rgba(115, 115, 115, 0.2)'; ]]]
state:
- value: 'scene_1'
label: 'On'
styles:
What this basically tells the button to do is: put a label under the name as default with the text âOffâ. But when the state of the entity input_text.office_lights_current_scene changes to scene_1 then it will change the label to âOffâ.
You can also add stylings (I put it at the bottom) there, so that icons, label, name etc changes colors for instance when the state has changed to scene_1. Make sure you use the indents under there, just like you did on the main styles. If you donât use styles there, it will just keep the default style on the state. This way you can create multiple states with variables (like icon, label, name) and styles that change based on the state of the entity.
you need to use the state_display option, which was introduced for this especially, and of course, it supports templates.
example:
state_display: >
[[[ return 'Dst: ' + entity.attributes.next.clock ]]]
or somewhat more complex:
state_display: >
[[[ function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
var id = entity.entity_id.split('_').pop(-1);
var fakestate = `<span style="color: var(--active-color);"> ${entity.state}</span>`;
var fakelabel = `<span style="color: var(--active-color);"> ${capitalizeFirstLetter(id)}</span>`;
return (entity.state == 'on') ? fakestate + ': ' + fakelabel : null; ]]]
state_display responds to show_state:
Thank you very much for your explanation and suggested solution.
Works perfectly. Here is my final code:
Button:
- type: 'custom:button-card'
entity: input_text.office_lights_current_scene
template: base_2x2_lights
name: 'Deckenlicht: Normal'
variables:
var_1: 'scene_1'
gridrow: 2
gridcol: 2 / 4
hold_action:
action: more-info
entity: light.deckenleuchte_buro
tap_action:
action: call-service
service: input_text.set_value
service_data:
value: '[[[ return variables.var_1 ]]]'
entity_id: input_text.variable_text_1
Template:
base_2x2_lights:
aspect_ratio: 1/1
show_state: false
show_icon: true
icon: mdi:ceiling-light
show_label: true
label: 'Aus'
variables:
var_1: null
size: 40%
color: '#148eff'
state:
- value: '[[[ return variables.var_1 ]]]'
label: 'An'
styles:
name:
- justify-self: start
- top: 0%
- left: 0%
- line-height: 4em
- padding-left: 10px
- position: relative
icon:
- top: -20%
- left: -30%
- position: relative
state:
- top: 0%
- left: -30%
- line-height: 2em
- position: relative
label:
- justify-self: start
- padding-bottom: 10px
- padding-left: 10px
card:
- font-family: Verdana
- font-weight: 450
- font-size: 1.4em
- border-radius: 0.8em
- transition: none
- box-shadow: >
[[[ return (entity.state === variables.var_1) ? '5px 10px 18px rgba(0, 0, 0, 0.8)' : '5px 10px 18px rgba(0, 0, 0, 0.0)'; ]]]
- color: >
[[[ return (entity.state === variables.var_1) ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.2)'; ]]]
- background-color: >
[[[ return (entity.state === variables.var_1) ? 'rgba(255, 255, 255, 0.8)' : 'rgba(115, 115, 115, 0.2)'; ]]]
2 Likes
Hello Marius,
thank you very much for your suggestion. I used your solution for my blinds buttons.
Button:
- type: 'custom:button-card'
entity: cover.tradfri_blind_office_window_left
template: base_2x2_blinds
name: 'Jalousien Offen'
show_state: true
variables:
var_1: 'scene_0'
var_min: 75
var_max: 100
gridrow: 2
gridcol: 2 / 4
hold_action:
action: more-info
entity: group.window_blinds_office
tap_action:
action: call-service
service: input_text.set_value
service_data:
value: '[[[ return variables.var_1 ]]]'
entity_id: input_text.variable_text_2
state_display: '[[[ return entity.attributes.current_position + "%" ]]]'
Template:
base_2x2_blinds:
aspect_ratio: 1/1
show_state: false
show_icon: true
icon: mdi:blinds-open
show_label: false
variables:
var_1: null
var_min: 75
var_max: 100
size: 40%
color: '#c4c4c4'
state:
- value: '[[[ return variables.var_1 ]]]'
label: 'An'
styles:
name:
- justify-self: start
- top: 0%
- left: 0%
- line-height: 4em
- padding-left: 10px
- position: relative
icon:
- top: -20%
- left: -30%
- position: relative
- color: >
[[[ return (entity.attributes.current_position <= variables.var_max && entity.attributes.current_position >= variables.var_min ) ? '#148eff' : 'rgba(255, 255, 255, 0.2)'; ]]]
state:
- top: 0%
- left: -30%
- line-height: 2em
- position: relative
label:
- justify-self: start
- padding-bottom: 10px
- padding-left: 10px
card:
- font-family: Verdana
- font-weight: 450
- font-size: 1.4em
- border-radius: 0.8em
- transition: none
- box-shadow: >
[[[ return (entity.attributes.current_position <= variables.var_max && entity.attributes.current_position >= variables.var_min ) ? '5px 10px 18px rgba(0, 0, 0, 0.8)' : '5px 10px 18px rgba(0, 0, 0, 0.0)'; ]]]
- color: >
[[[ return (entity.attributes.current_position <= variables.var_max && entity.attributes.current_position >= variables.var_min ) ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.2)'; ]]]
- background-color: >
[[[ return (entity.attributes.current_position <= variables.var_max && entity.attributes.current_position >= variables.var_min ) ? 'rgba(255, 255, 255, 0.8)' : 'rgba(115, 115, 115, 0.2)'; ]]]
1 Like
fwiw, hereâs what they do in my config:
1 Like
Hi folks, a quick question. Different icon by state on/off works with no problem, but when I have different states âhomeâ âworkâ it does not work. Any ideas?
state:
- value: biocenter
icon: 'mdi:biohazard'
- value: away
icon: 'mdi:account-question'
styles:
card:
- background: Red
- value: 'on'
The apostrof ' stays only with states off/on, the editor cuts off it when I need to specify the other states.
Thank you for your help. It is working now 
The only thing I noticed is that it doesnât reconnect to Home Assistant if I unplug the Air Purifier to move it into a different room⌠Did you experienced the same issue ? To fix it I have to restart Home AssistantâŚ
Check the actual state in dev-toolsâŚ