thanks … that worked 
got to fiddle some more with the colors, but its getting there… 
poured it into a button template, so just in time for tomorrows happy day:
Have 2 related question on this, but since they’re not Button questions, Ill post in a separate thread… please allow the tag there.
button_celebration_alert:
template: button_body
# entity: 'binary_sensor.birthday_louise'
aspect_ratio: 1/1
name: >
[[[ return entity.attributes.name + ' ' + entity.attributes.event ]]]
icon: mdi:party-popper
show_state: false
#show_entity_picture: true
#entity_picture: >
# [[[ return entity.attributes.entity_picture ]]]
size: 20px
tap_action:
action: navigate
navigation_path: tijd_agenda
hold_action:
action: call_service
service: persistent_notification.dismiss
service_data:
notification_id: party_notification
styles:
icon:
- color: yellow
- align-self: start
- justify-self: start
# - padding: 5px
card:
- background-image: >
[[[ return `url("/local/family/${entity.attributes.name.toLowerCase()}.jpg")`; ]]]
- background-repeat: no-repeat
- background-size: 100%
- background-position: center
- padding: 5px
- font-size: 10px
- color: blue
# - background: orange
- animation: >
[[[ if (entity.state === 'on') return 'blink 2s ease infinite';
return 'none'; ]]]
grid:
- grid-template-areas: '"i years" "n n" "original_date original_date" "type type"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- align-self: start
- justify-self: start
- padding-bottom: 4px
- color: pink
img_cell:
- margin: none
custom_fields:
years:
- font-size: 20px
- align-self: start
- justify-self: end
- --text-color-sensor: red
original_date:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: red
type:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: white
custom_fields:
years: >
[[[
return `<span style='color: var(--text-color-sensor);'>${entity.attributes.years} </span></span>`
]]]
original_date: >
[[[
return `<span>Date: <span style='color: var(--text-color-sensor);'>${entity.attributes.original_date}</span></span>`
]]]
type: >
[[[
return `<span>Type: <span style='color: var(--text-color-sensor);'>${entity.attributes.type}</span></span>`
]]]
only true button issue is the top left icon which should ideally stay as in the second button, but drops when only 1 line of name is needed.
1 Like
small extra issue:
what’s is wrong here:
hold_action:
action: call_service
service: persistent_notification.dismiss
service_data:
notification_id: party_notification
using this in the developer tools service page works immediately…
call-service 
1 Like
Really. Tunnelvision… sorry
1 Like
Looks like button-card survives! 
son of a… what cards don’t survive?
I think they all survive, but need some effort.
Currently mini-graph and home-feed in my play HA. Maybe more in prod HA, but that was very fast reverted after 0.106 beta. 
Well, it looks like i’m going to hold off on the beta. Been using it on my dev box but I don’t use custom cards there!
Hi all. Ive noticed a verry wierd problem for me that when Ios app loads for the first time i end upp with Buttons being totaly transparent. when in fakt the should just have abitt.
Second one being how it should look like. I only experience this with the ios app.
I ve been trying to figure it out for a while now but cant conclude to anything. Anyone that might know whats causing it?
Works fine on browser on pc. I experiance the same on safari on the phone.
hello how i can insert backgroud color?
this is my code
type: horizontal-stack
cards:
- type: 'custom:button-card'
size: 15%
color_type: card
entity: switch.luce_cucina
lock:
enabled: false
name: Luce cucina
state:
- value: 'on'
color: yellow
icon: 'mdi:lightbulb-on'
styles:
card:
- animation: blink 0s ease infinite
- operator: default
color: navy
icon: 'mdi:lightbulb-outline'
- type: 'custom:button-card'
tap_action:
action: toggle
size: 15%
color_type: card
entity: light.gateway_light_f0b429b3e5e0
lock:
enabled: false
name: Led gateway
state:
- value: 'on'
color: auto
icon: 'mdi:lightbulb-on'
styles:
card:
- animation: blink 0s ease infinite
- operator: default
color: navy
icon: 'mdi:lightbulb-outline'
I lied. It is possible. But you have to give up the Icon and the state name. Apply the following style on your entity:
- entities:
- entity: input_datetime.bedroom1_2
name: 'OFF'
style: |
state-badge{
display: none;
}
You need card-mod and you need to apply the style to the horizontal-stack using the type: mod-card functionality.
I will try
edit: Never mind. No idea what I’ve changed since the last time I tried, but it seems to be working.
edit 2: Nope. Not right. Or sometimes right, sometimes not. I’m getting negative mins??
Hi,
I’m trying to get last_changed to show for my sensors. But I want it in a different format to what show_last_changed: true returns.
I’m no good at javascript and have spent most of today trying to figure out how to change returned format of the function you posted in July last year.
But no matter what I try, it either gives the wrong time, or makes the button disappear.
The format I’m aiming for is 2d6h if over a day, 6h4m if over an hour, 4m15s if over a minute or 15s for less than a minute.
Closest I got was by this or similar to the code, but the numbers returned are very wrong. :
label: >
[[[
function timeDifference(current, previous) {
var msPerMinute = 60 * 1000;
var msPerHour = msPerMinute * 60;
var msPerDay = msPerHour * 24;
var msPerMonth = msPerDay * 30;
var msPerYear = msPerDay * 365;
var elapsed = current - previous;
if (elapsed < msPerMinute) {
return Math.round(elapsed/1000) + 's';
}
else if (elapsed < msPerHour) {
var min = Math.round(elapsed/msPerMinute);
var dif = min * msPerMinute;
var se = elapsed - dif ;
var sec = Math.round(se/1000);
return min + 'm' + sec + 's';
}
else if (elapsed < msPerDay ) {
var hr = Math.round(elapsed/msPerHour );
var dif = hr * msPerHour;
var mi = elapsed - dif ;
var min = Math.round(mi/msPerMinute);
return (hr + 'h' + min + 'm');
}
else {
var day = Math.round(elapsed/msPerDay);
var dif = day * msPerDay;
var hrs = elapsed - dif ;
var hr = Math.round(hrs/msPerHour);
return day + 'd';
}
}
return '<div>' + timeDifference(new Date(), new Date(entity.last_changed)) + '</div>';
]]]
Could you please give me a hint as to what I’ve done wrong?
Thanks.
use Math.floor, not Math.round, next you don’t need a main function or <div>.
To properly get remainders, use mod… which is % symbol.
label: >
[[[
var msPerMinute = 60 * 1000;
var msPerHour = msPerMinute * 60;
var msPerDay = msPerHour * 24;
var now = new Date()
var last_changed = new Date(entity.last_changed);
var elapsed = Math.floor((now - last_changed)/1000);
function elapsedMath(elapsed, divisor1, label1, divisor2, label2){
var value = Math.floor(elapsed/divisor1);
var remainder = elapsed % divisor1;
var value2 = Math.floor(remainder/divisor2);
return value + label1 + value2 + label2;
}
if (elapsed < msPerMinute) {
return elapsed + 's';
}
else if (elapsed < msPerHour)
return elapsedMath(elapsed, msPerMinute, 'm', 1, 's');
else if (elapsed < msPerDay )
return elapsedMath(elapsed, msPerHour, 'h', msPerMinute, 'm');
else
return elapsedMath(elapsed, msPerDay, 'd', msPerHour, 'h');
]]]
1 Like
Thanks for your help.
It’s now showing everything as seconds though.
I’m assuming that means the values aren’t making it passed the first if statement.
edit:
Ok. Figured it out. Just had to delete the * 1000 in msPerMinute.
Thanks
Here is the code i am using in my card, i still have not come one bitt closer to solving why i am having problems. if anyone has any insight to why im getting transparent cards at first load plz let me know
cards:
- content: |
## <ha-icon icon="mdi:remote"></ha-icon> Vardagsrum
type: markdown
- cards:
- card: null
action: toggle
color: var(--secondary-text-color)
color_type: icon
entity: switch.appletv
icon: 'mdi:apple'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
type: 'custom:button-card'
- card: null
action: toggle
color: var(--secondary-text-color)
color_type: icon
entity: switch.htpc
icon: 'mdi:desktop-classic'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
type: 'custom:button-card'
- card: null
action: toggle
color: var(--secondary-text-color)
color_type: icon
entity: switch.tv
icon: 'fas:tv'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
type: 'custom:button-card'
- card: null
action: toggle
color: var(--secondary-text-color)
color_type: icon
entity: switch.ps4
icon: 'mdi:playstation'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
type: 'custom:button-card'
- card: null
color: var(--red)
color_off: var(--primary-text-color)
color_type: icon
entity: binary_sensor.poweroffvardagsrum
icon: 'mdi:power'
name: ' '
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.turn_off
service_data:
entity_id: remote.vardagsrum
type: 'custom:button-card'
type: horizontal-stack
- entities:
- input_select.freetoair
show_header_toggle: false
type: entities
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:exit-to-app'
name: HDMI 1
show_icon: false
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi1
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-up'
name: HDMI 2
show_icon: false
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi2
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:menu'
name: HDMI 3
show_icon: false
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi3
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:volume-plus'
name: HDMI 4
show_icon: false
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-weight: bold
- font-size: 15px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hdmi4
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:exit-to-app'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_exit
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-up'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_upp
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:menu'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_menu
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
double_tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeUp
device: 52940343
entity_id: remote.vardagsrum
icon: 'mdi:volume-plus'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeUp
device: 52940343
entity_id: remote.vardagsrum
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-left'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_left
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:smoke-detector'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_ok
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-right'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_right
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
double_tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeDown
device: 52940343
entity_id: remote.vardagsrum
icon: 'mdi:volume-minus'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: remote.send_command
service_data:
command: VolumeDown
device: 52940343
entity_id: remote.vardagsrum
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:volume-off'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_mute
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:chevron-down'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_ner
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:keyboard-return'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_prev
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:arrow-up-bold'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_channel_up
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
- cards:
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:gamepad-variant'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.gamemode
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:play-pause'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_play
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--secondary-text-color)
color_type: icon
icon: 'mdi:television-guide'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_guide
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
- card:
color: var(--primary-text-color)
color_type: icon
icon: 'mdi:arrow-down-bold'
size: 25%
style: |
:active
ha-card {
background-color: var(--paper-item-icon-active-color);
transition: .05s
styles:
card:
- border-radius: 30px
- height: 53px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 5px
name:
- font-size: 12px
- padding: 0px 0px
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.harmony_channel_down
type: 'custom:button-card'
conditions:
- entity: sensor.harmony_activity
state_not: PowerOff
type: conditional
type: horizontal-stack
type: vertical-stack
`
I know I asked this on another thread ,but I really like these cards and want to use them:
Is there a way to tell what user (or better username) pressed a button and send it to a python script ?
something like:
hold_action:
action: call-service
service: python_script.test_script
service_data:
username: '[[[return states.domain.object_id.context.user_id]]]'
user is a templatable field: https://github.com/custom-cards/button-card#templates so you should be able to
I don’t know how you pass variables to python scripts, but for regular scripts they do have to be under a variables object
e.g.
service_data:
variables:
username: [[[return user]]]