Yes Im aware the badges are still around, they just fit into the “look” im going for in lovelace. Il check out that custom card though, might be my only option. Thanks.
hi i’m new to lovelace. will someone please help me out how can i show time of last door open below the name of sensor. i need only the last door open time it should not change when door close. thanks
this how my config looks like:
type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: sensor.front_door
show_name: true
icon: 'mdi:door'
color: 'rgb(68, 116, 156)'
name: Front door
size: 20%
hold_action:
action: more-info
state:
- value: 'on'
color: 'rgb(251,216,57)'
icon: 'mdi:door-open'
styles:
card:
- height: 90px
- width: 172px
name:
- color: gray
- font-size: 15px
- padding: 5px 5px
would you mind sharing 1 button HassOS for example so that I can replicate the rest, thank you
You folks are doing crazy things, I love it 
I’m a bit less available lately, but don’t worry, I’ll still release new stuff and bugfix when required 
1 Like
Sure, this layout started from @iantrich post here:
I changed it a little and my code has slight alignment issues and difference between desktop and mobile so it’s still WIP
My HassOS button:
entity: sensor.pi_temp
icon: 'mdi:raspberry-pi'
label_template: |
return '<div align="left">' +
'<div>' +
'<ha-icon icon="mdi:thermometer" style="width: 12px; color: #f4e842; padding-bottom: 0px;"></ha-icon> ' +
states['sensor.pi_temp'].state + '°C' +
'</div>' +
'</div>';
name_template: |
return '<div align="left" style="padding-top: 0px;">' +
'<div style="font-weight: bold;font-size: 13px;">' + "HassOS" + '</div>' +
'<div style="margin-top: -5px;">' +
'<ha-icon icon="mdi:server" style="width: 12px; color: #03a9f4; padding-bottom: 2px;"></ha-icon> ' +
"CPU: " + states['sensor.processor_use'].state + '%' +
'</div>' +
'<div style="margin-top: -10px;">' +
'<ha-icon icon="mdi:memory" style="width: 12px; color: #03a9f4; padding-bottom: 2px;"></ha-icon> ' +
"RAM: " + Math.round(states['sensor.memory_use_percent'].state) + "%" +
'</div>' +
'<div style="margin-top: -10px;">' +
'<ha-icon icon="mdi:harddisk" style="width: 12px; color: #03a9f4; padding-bottom: 2px;"></ha-icon> ' +
"SD: " + states['sensor.disk_use_percent'].state + "%" +
'</div>' +
'</div>';
state:
- color: lime
operator: template
value: |
return states['sensor.pi_temp'].state < '60'
- color: orange
operator: template
value: >
return states['sensor.pi_temp'].state < '80' &
states['sensor.pi_meye_temp'].state > '60'
- color: red
operator: template
value: |
return states['sensor.pi_temp'].state > '80'
aspect_ratio: 1/1
color: auto
layout: icon_label
show_label: true
show_state: false
styles:
card:
- border-radius: 15px
- padding: 0px 0px
grid:
- grid-template-rows: 35px auto 40px
- grid-template-columns: 40px auto
icon:
- height: 30px
- width: 30px
label:
- padding: 5px 5px
- font-size: 10px
- margin-top: 0px
- font-weight: bold
- font-family: Helvetica
- justify-self: end
name:
- justify-self: start
- align-self: start
- text-transform: capitalize
- padding: 0px 10px
- font-size: 10px
- margin-top: 0px
- font-weight: normal
type: 'custom:button-card'
5 Likes
thanks, very nice (though admittedly a bit intense…
)
notice you use 2 styles of multi-line (at least I assume the | is for the multiline notation) Any particular reason for that? I always use the chevron > and substituted it in your templates, works as hoped for.
You do know you can use ‘entity.state’ in the templates if you’ve declared an entity. Makes for some easy config copying, even templating, if you like to use the button for other config too, and create a button_template, or maybe even a decluttering_template:
- type: 'custom:button-card'
entity: sensor.cpu_temperature
icon: 'mdi:raspberry-pi'
label_template: >
return '<div align="left">' +
'<div>' +
'<ha-icon icon="mdi:thermometer" style="width: 12px; color: #f4e842; padding-bottom: 0px;"></ha-icon> ' +
entity.state + '°C' +
'</div>' +
'</div>';
name_template: >
return '<div align="left" style="padding-top: 0px;">' +
'<div style="font-weight: bold;font-size: 13px;">' + "HassOS" + '</div>' +
'<div style="margin-top: -5px;">' +
'<ha-icon icon="mdi:server" style="width: 12px; color: #03a9f4; padding-bottom: 2px;"></ha-icon> ' +
"CPU: " + states['sensor.processor_use'].state + '%' +
'</div>' +
'<div style="margin-top: -10px;">' +
'<ha-icon icon="mdi:memory" style="width: 12px; color: #03a9f4; padding-bottom: 2px;"></ha-icon> ' +
"RAM: " + Math.round(states['sensor.memory_use_percent'].state) + "%" +
'</div>' +
'<div style="margin-top: -10px;">' +
'<ha-icon icon="mdi:harddisk" style="width: 12px; color: #03a9f4; padding-bottom: 2px;"></ha-icon> ' +
"SD: " + states['sensor.disk_use_percent_home'].state + "%" +
'</div>' +
'</div>';
state:
- color: lime
operator: template
value: >
return entity.state < '60'
- color: orange
operator: template
value: >
return entity.state < '80'
- color: red
operator: template
value: >
return entity.state > '80'
aspect_ratio: 1/1
color: auto
layout: icon_label
show_label: true
show_state: false
again: thanks!
2 Likes
Thanks I changed them all to >
This is result of copy pasting from many different posts 
Will check templates when I’ll sort all alignment issues
What is the current best practice to configure a button that executes a curl command?
Currently, I have defined the curl command as a command line switch. The problem is, the command is stateless, but the switch wants to look like a switch.
Is there a simpler way, like using a service_call or something else to execute the curl command?
Thanks, Richard
I use a shell command for that and then can call a service
Hi, Would it be possible to change the color for the smaller icons (names) depending of state?
I did one for motion like you but under it I listed all the different motions sensors and I would like to see by color which one is the trigger. I hope I could explain what I’m looking for
I have that same problem. I would like to only show brightness if it is a valid attribute for that entity/light. And nothing (or ‘ ’ ) if the light doesn’t support brightness.
I am using the label_template for both types of button which works fine .
Entity with no brightness:
label_template: >
' '
Entity with brightness:
label_template: >
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
If I could find the correct way of formatting the IF statement for the existence of the brightness attribute, I’d be happy as a clam.
@RomRider, anyone else, any ideas?
should work on the button also.
you can however leave out the ‘else’ here.
Thanks, David. Perfect.
Cheers, Richard
1 Like
hopefully, if I state at this code long enough ul fully understand what’s going on here. Looks great!
@iantrich - So I love the look of this card but it doesn’t look like templow is populated for me by DarkSky. So I get undefinned for that in the card.
'<div style="font-size: 11px;">' + entity.attributes.temperature + '°F - ' + entity.attributes.forecast[0].temperature + '°F / ' + entity.attributes.forecast[0].templow + '°F</div>' +
if I go into the template tool I see that forecast doesn’t have this key at all
{{states.weather.dark_sky.attributes.forecast }}
[{'datetime': '2019-07-08T14:00:00', 'temperature': 89, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T15:00:00', 'temperature': 90, 'precipitation': 0.1, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T16:00:00', 'temperature': 89, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T17:00:00', 'temperature': 89, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T18:00:00', 'temperature': 89, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T19:00:00', 'temperature': 88, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T20:00:00', 'temperature': 86, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T21:00:00', 'temperature': 83, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T22:00:00', 'temperature': 80, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-08T23:00:00', 'temperature': 78, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T00:00:00', 'temperature': 76, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T01:00:00', 'temperature': 76, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T02:00:00', 'temperature': 75, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T03:00:00', 'temperature': 74, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T04:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T05:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T06:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T07:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T08:00:00', 'temperature': 74, 'precipitation': None, 'condition': 'sunny'}, {'datetime': '2019-07-09T09:00:00', 'temperature': 76, 'precipitation': None, 'condition': 'sunny'}, {'datetime': '2019-07-09T10:00:00', 'temperature': 79, 'precipitation': None, 'condition': 'sunny'}, {'datetime': '2019-07-09T11:00:00', 'temperature': 82, 'precipitation': None, 'condition': 'sunny'}, {'datetime': '2019-07-09T12:00:00', 'temperature': 85, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T13:00:00', 'temperature': 87, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T14:00:00', 'temperature': 88, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T15:00:00', 'temperature': 88, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T16:00:00', 'temperature': 87, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T17:00:00', 'temperature': 86, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T18:00:00', 'temperature': 86, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T19:00:00', 'temperature': 84, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T20:00:00', 'temperature': 82, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T21:00:00', 'temperature': 80, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T22:00:00', 'temperature': 78, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-09T23:00:00', 'temperature': 76, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T00:00:00', 'temperature': 75, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T01:00:00', 'temperature': 75, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T02:00:00', 'temperature': 75, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T03:00:00', 'temperature': 75, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T04:00:00', 'temperature': 74, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T05:00:00', 'temperature': 74, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T06:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T07:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T08:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T09:00:00', 'temperature': 74, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T10:00:00', 'temperature': 77, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T11:00:00', 'temperature': 79, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T12:00:00', 'temperature': 82, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T13:00:00', 'temperature': 84, 'precipitation': None, 'condition': 'partlycloudy'}, {'datetime': '2019-07-10T14:00:00', 'temperature': 86, 'precipitation': None, 'condition': 'partlycloudy'}]
Am I doing something wrong here ?
Looks like you have hourly mode set which doesn’t include a low temp. You can either modify my button to not include that or switch to daily mode
platform: darksky
api_key: !secret darksky_api_key
mode: daily
I admit that this request is only a bit of a ‘nice to have’, but would it be possible to stop the animation and the cursor changing if there is no action ?
That should already be the case, if not, explicitly specify:
tap_action:
action: none
1 Like
EDIT2: Actually - still an issue. Does not work when placed inside the surrounding card.
EDIT1: figured it out. Changed my horizontal stack to a layout card, with 4 blank cards total surrounding the 3 visible buttons.
- type: custom:layout-card
layout: horizontal
column_num: 7
max_columns: 7
max_width: [10%, 20%, 10%, 20%, 10%, 20%, 10%]
Happy with the result:
ORIGINAL POST:
Can someone point me in the right direction to achieve the above without using hardcoded pixel widths / heights? I thought I could add 4 blank buttons surrounding the centered buttons with width @ 25%, but after reading more I see you have to use widths in px. I also ran into the issue if I used more than 5 buttons the height would shrink automatically. Tried experimenting with styles - margin / padding, and aspect ratios as well.