@mcfrojd I definitely overlooked that prefix. I’m glad you figured it out. 
I was incorrect on one point: Apparently case does matter. Your device name has to match ‘zone.’+Friendly name in both case and exact text. (former post has been corrected)
I am a bit late to the party here, but how did you get the corners so nicely rounded on your entities.
That would be part of the theme. There is a card-radius parameter you can use.
Is there somewhere that you can go to see all of the styles - like the card radius parameter - that can be used?
for the radius you want something like:
ha-card-border-radius: "20px"
in your theme
Thanks! I’m trying to build my dashboard for my wall mounted tablet - I am spending entirely too much time on it, but it is constantly improving.
I’m having some trouble combining templates, does anyone have an idea why my local definition or STATE ON is not overwriting the template config? The docs say local config takes priority.
Commenting out the two templates does get it working as expected with the blink.
I’ve also tried moving the location of the template definition above and below the state definition with no change.
- type: "custom:button-card"
entity: light.window_lights
icon: "mdi:wall-sconce-flat-variant"
state:
- value: "on"
styles:
icon: mdi:home
color: red
styles:
card:
- animation: blink 1s ease infinite
icon:
- color: red
template:
- light_button
- all_buttons
button_card_templates:
all_buttons:
styles:
card:
- width: min(20vw, 90px)
- height: min(20vw, 90px)
- margin: 10px
- border-radius: 15px
- background-color: var(--primary-background-color)
- box-shadow: >
[[[
if (states['sun.sun'].state == "below_horizon")
return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
else if (states['sun.sun'].state == "above_horizon")
return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
]]]
icon:
- color: var(--primary-text-color)
show_icon: true
show_name: false
triggers_update:
- sun.sun
hold_action:
action: more-info
light_button:
state:
- value: "on"
styles:
card:
- border-style: solid
- border-width: 2px
- border-color: var(--paper-item-icon-active-color)
- box-shadow: >
[[[
if (states['sun.sun'].state == "below_horizon")
return 'inset -4px -4px 5px #2c2c2c, inset 4px 4px 5px #191919';
else if (states['sun.sun'].state == "above_horizon")
return 'inset -4px -4px 5px #ffffff, inset 4px 4px 5px #ebebeb';
]]]
icon:
- color: var(--paper-item-icon-active-color)
show_icon: true
show_name: false
triggers_update:
- sun.sun
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: medium
1 Like
But also note the 3rd point:
- You can merge states together by
idwhen using templates. The states you want to merge have to have the sameid. Thisidparameter is new and can be anything (string, number, …). States withoutidwill be appended to the state array. Styles embedded in a state are merged together as usual. See here for an example.
Does anyone know how to get tap action to do browser back?
like
window.history.back()
I want to make pages that support accessing them from multiple source points, but have a button that will return to the source.
@MrKuenning, I don’t think that can be done as a tap action, but you might be able to output some raw HTML that has a click event to do that.
Just wanted to thank you for this write up. I was able to do some pretty cool things with templating thank to you and the conversation you had with qoheleth. It’s really cool that you continued to help everyone with their individual needs to. Someone should be paying you!
1 Like
@Bearded_Beef, I’m glad you found this helpful. I have a natural desire to both learn and teach, so I enjoy writing up the result of something I spent a lot of time figuring out. The act of writing it up often helps me refine and improve what I started with too, so it’s a win-win 
@ktownsend-personal - great write up Keith, thanks for sharing. I have two questions if you dont mind?
I will start with what may be a simpler one to describe. Here is an extract from part of a lovelace I have. There are a few buttons related to my solar. The Exporting Electric button you see in red, i would like to have the state read “Exporting” or “Importing”, instead of on or off, is that possible do you know?
My second question. The blue card shows how much i am importing or exporting, at the moment i use colours to identify import or export. I know i can have different icons but ideally i would like to duplicate the card, one for export and one for import, but only show the Wattage value for the relevant card based on its value (i.e. greater or less than/equal to 0).Is it possible to set the show value based on condition?
thanks
Darren
Hya,
i have the following card:
type: custom:button-card
entity: switch.egg_on_off
icon: mdi:radiator
color: auto
action: more_info
name: Egg Boiler
style:
- text-transform: none
- color: rgb(255, 155, 155)
- font-weight: bold
show_state: true
state_color: true
problems: color does not apply, and i also want to include the entity state (available or unavailabe) which is given by entity: binary_sensor.ek3117
But when i try to include, nothing else works.
Any clue?
Try this:
type: custom:button-card
entity: switch.egg_on_off
name: Egg Boiler
icon: mdi:radiator
color_type: icon
show_icon: true
show_state: true
tap_action:
action: more-info
styles:
card:
- color: rgb(255, 155, 155)
- font-weight: bold
state_display: |
[[[ return states['binary_sensor.ek3117'].state ]]]
Use state_display:
type: custom:button-card
entity: YOUR_SENSOR_ID
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Exporting'; return 'Importing';
]]]
I don’t know the attributes of a consumption sensor (but you can post it, see Developer Tools → States), so I can only speculate; probably something like this:
state_display: |
[[[
if (entity.state <= 0) return entity.state;
if (entity.state > 0) return 'big up the pace!'
]]]
Thx! and how to change the icon size and also color (black when available but off and red when availabe and on)?
I would solve it in this way:
styles:
icon:
color: |
[[[
if (entity.state == 'on') return 'red';
if (entity.state == 'off') return 'black';
else return 'grey';
]]]
You can change the icon size easily by using
icon: mdi:radiator
size: 2rem
(or 14px or whatever you prefer). You can also change the size in the styles: section instead:
styles:
icon:
- width: 14px
- height: 14px
Thx for the help.
tried the same with a person entity.
With default card, clicking on it open the map showing location.
With this nothing happens:
type: custom:button-card
entity: person.paulo
name: Paulo
color_type: icon
show_icon: true
show_state: true
tap_action:
action: more_info
styles:
card:
- height: 100px
- width: 150px
- background-color: white
- border-radius: 5%
- padding: 1%
- color: Ivory
- font-size: 18px
- text-transform: capitalize
- color: rgb(155, 020, 155)
- font-weight: bold