I gave it a go copy pasting the custom fields bit and replacing the sensor in the fields to the ones i wanted but it all stayed blank. Looks like its a bit out of my skillset
This is pretty advanced stuff, you’ll need to learn about CSS grids and javascript at least a bit.
For the example to work, not only the custom fields are required but also all the styles.
The main sensors im looking to use are
sensor.current_version
sensor.processor_use_percent and
sensor.cpu_temperature
basically I’m just trying to get the home assistant and RPI stats, could you if you have the time highlight where in the yaml from that example linked they would go? upon further inspection I think I put them in the wrong bit but reading that yaml example linked I’m still not entirely sure where.
I tried them where the text-color-sensors show but that doesn’t seem right
Here comes a simple example using my fan entity (just for the icon) and a sensor that shows some reading of the fan:
type: 'custom:button-card'
entity: fan.air_ac2729
show_name: false
custom_fields:
pm25: "[[[ return 'pm2.5 = ' + states['sensor.ac2729_pm25'].state ]]]"
styles:
grid:
- grid-template-areas: '"i pm25"'
- grid-template-columns: "1fr 1fr"
- grid-template-rows: "1fr"
custom_fields:
pm25:
- font-size: 24px
I’ve put the two things to display into a grid next to each other. To understand grids, I used this: Basic Concepts of grid layout - CSS: Cascading Style Sheets | MDN (mozilla.org)
The above code results in this card:
And if you were looking to add multiple lines would entity up the top change to entities?
Here you have three lines, two with sensors, one with an attribute of an entity. It really depends on your grid setup:
type: 'custom:button-card'
entity: fan.air_ac2729
show_name: false
custom_fields:
pm25: "[[[ return 'pm2.5 = ' + states['sensor.ac2729_pm25'].state ]]]"
fan: "[[[ return 'IAI = ' + states['fan.air_ac2729'].attributes.indoor_allergen_index ]]]"
internet: "[[[ return 'Internet = ' + states['sensor.speedtest_download'].state + ' MBit/s' ]]]"
styles:
grid:
- grid-template-areas: '"i pm25" "i fan" "i internet"'
- grid-template-columns: "1fr 1fr"
- grid-template-rows: "1fr 1fr 1fr"
This looks like this:
I’m looking to align my buttons horizontally. I’m using the horizontal-stack but can’t figure out why my cards are overlapping. Can someone help me figure out what’s happening and how I can adjust? Thanks.
- title: Lights
path: lights
icon: 'hass:lightbulb-outline'
theme: Google Dark Theme
badges: []
cards:
- type: vertical-stack
cards:
- type: 'custom:button-card'
template: label-card
color: 'rgb(23, 23, 23)'
name: Living Room
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: light
entity: light.living_room_lamp
name: Lamp
area: living room
- type: 'custom:button-card'
template: light
entity: light.living_room_lights
name: Ceiling Lights
area: living room
- type: 'custom:button-card'
template: light
entity: light.tv_lights
name: TV Lights
area: living room
TEMPLATE
light:
aspect_ratio: 1/1
show_state: true
color_type: icon
icon: 'mdi:lightbulb-outline'
size: 65%
tap_action:
action: toggle
styles:
card:
- font-family: helvetica
- letter-spacing: 0.05vw
- width: 150px
- height: 150px
- border-radius: 10%
- padding: 20%
- color_type: card
- background-color: auto
- color: auto-no-temperature
- opacity: 100%
grid:
- grid-template-areas: '"i . ." "s s s" "n n n" "n n n"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
img_cell:
- align-self: left
- justify-self: left
- padding-top: 80%
- padding-left: 30%
state:
- align-self: start
- justify-self: start
- padding-left: 18%
- padding-top: 30%
- font-weight: 300
- font-size: 25px
- color: gray
name:
- justify-self: start
- padding-top: 20%
- padding-left: 20%
- padding-bottom: 10%
- font-weight: 550
- color: white
- font-size: 15px
custom_fields:
- area: null
- justify-self: start
- padding-left: 10%
- padding-bottom: 10%
- font-weight: 400
- color: gray
- font-size: 15px
state:
- value: 'off'
styles:
icon:
- icon: 'mdi:lightbulb-outline'
- color: gray
- value: 'on'
styles:
icon:
- color: yellow
state:
- color: yellow
1 Like
Don’t specify width or height in styles.card. Use only aspect_ratio: 1/1 instead in the main part of the config.
Remove - padding: 20% and it will be alright
As a side note, your config is somewhat wrong…
-
custom_fieldsas it is isn’t valid - all the paddings you have in place are useless
- the grid definition is wrong also (you have 3 columns but you define 4 of them). You also don’t need to use 1fr all the way
Ha. I clearly am plugging value by value to try and set this up. Thanks for the pointers.
Really aiming to make this look as similar as possible to the New Nest Hub Dark UI.
- The custom fields section was just a start to add another line beneath the entity name which would display the area of the entity. I just didn’t know where to start with making it return that value.
- All of the paddings were to position the elements inside the card. I removed them but it again changed my layout. Am I supposed to adjust that in another way?
- Ah, what’s the proper layout there? Just listing 1fr a single time and that will then apply to all columns?
All your help is much appreciated. What you see above was about a weeks worth of an hour here and an hour there. 
TEMPLATE
light:
aspect_ratio: 1/1
show_state: true
color_type: icon
icon: 'mdi:lightbulb-outline'
size: 65%
tap_action:
action: toggle
styles:
card:
- font-family: helvetica
- letter-spacing: 0.05vw
- border-radius: 10%
- color_type: card
- background-color: auto
- color: auto-no-temperature
- opacity: 100%
grid:
- grid-template-areas: '"i . ." "s s s" "n n n" "n n n"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
img_cell:
- align-self: left
- justify-self: left
state:
- align-self: start
- justify-self: start
- font-weight: 300
- font-size: 25px
- color: gray
name:
- justify-self: start
- font-weight: 550
- color: white
- font-size: 15px
custom_fields:
- area: null
- justify-self: start
- font-weight: 400
- color: gray
- font-size: 15px
state:
- value: 'off'
styles:
icon:
- icon: 'mdi:lightbulb-outline'
- color: gray
- value: 'on'
styles:
icon:
- color: yellow
state:
- color: yellow
As far as I know, there is no way to retrieve the area of an entity from the frontend. But I might be wrong (I checked some months ago and it was not possible/I couldn’t find the value anywhere in all the objects)
The grid is how the layout is defined. Then each element is inside a cell and gets positionned with CSS on itself.
What you want is probably:
grid:
- grid-template-areas: '"i . ." "s s s" "n n n"'
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: 40% 1fr 1fr
Much appreciated! I’ve made a couple more tweaks and here’s where I’m at. Do you know how I can make the label card not use the card background? I really want the label “Living Room” to look like a label for the row of lights and not be contained within a card. Also would like to align left.
I’m struggling with getting some buttons and text lined up with this custom card. Attached is an image of my screen with the far left being text only (no button). Code below? How do I edit the text entity to have the same size as the custom buttons?
- type: horizontal-stack
cards:
- type: 'custom:button-card'
name: Barn Lights
group_expand: true
- type: 'custom:button-card'
tap_action:
action: toggle
entity: script.barnlightonscene
icon: 'mdi:lightbulb-on-outline'
name: 'On'
- type: 'custom:button-card'
entity: script.1610244373954
name: Dim
tap_action:
action: toggle
icon: 'mdi:lightbulb-outline'
- type: 'custom:button-card'
tap_action:
action: toggle
entity: script.barnlightnightscene
icon: 'mdi:lightbulb-on-outline'
name: Night
- type: 'custom:button-card'
tap_action:
action: toggle
entity: script.barnlightoffscene
icon: 'mdi:lightbulb-off-outline'
name: 'Off'
Like this (it’s a template):
header:
styles:
card:
- padding: 16px 15px 4px 15px
- background: none
- border-radius: 0
- box-shadow: none
name:
- justify-self: start
Maybe this will work: (add it to your text button only – I didn’t test it, it might or might not work):
styles:
card:
- height: 100%
1 Like
Here’s what I have so far with the two sensors, I’d like to add one more. I tried to copy paste to get a third but even then it still didn’t work. Here’s what I have so far Imgur: The magic of the Internet
type: ‘custom:button-card’
layout: icon_name_state
show_entity_picture: true
entity_picture: ‘https://pbs.twimg.com/profile_images/720135322223312896/WS3etv24_400x400.jpg’
custom_fields:
pm25: ‘[[[ return ‘‘Version = ‘’ + states[’‘sensor.current_version’’].state ]]]’
internet: >-
[[[ return ‘Processor = ’ + states[‘sensor.processor_use_percent’].state + ’
%’ ]]]
styles:
grid:
- grid-template-areas: ‘“i pm25” “i fan” “i internet”’
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr
@Krispkiwi You really need to read-up on CSS grid. In your case, I’d suggest the following:
- name the custom fields according to your sensors, e.g.
version:anduse: - add the third custom field in the same manner with another unique speaking name
- define the grid accordingly
For the grid, you have to imagine a table where you give names to the areas of cells. In my code example you have four names:
- i
- pm25
- fan
- internet
So you would replace these names with your speaking names for the custom fields. One field name is special and related to the button-card in the example, and that’s i. You can read the special names in the documentation here: custom-cards/button-card: 
Lovelace button-card for home assistant (github.com)
The i name defines the img_cell which is where the icon of the card will end up. Now, to stay with the example, you have a table like this:
| first column | second column |
|---|---|
| i | pm25 |
| i | fan |
| i | internet |
The grid will combine the three cells name i to one large cell spanning three rows. The other names reflecting the custom fields will determine where these fields are displayed (on the right in individual rows).
Finally, the other two grid definitions tell the browser about sizing. The unit fr is a fraction, so we have two columns each being one fracting wide. Essentially, they each take 50% of the space. And we have three rows, each being 1 fraction high, essentially splitting them evenly to 33%. With the left three rows being combined to one field capturing the icon.
If you would like to have more sensor, you need to design your grid accordingly, introduce more fields, tell the browser about the arrangement of these fields, which cells get which custom field, which cells to combine to larger areas and so on.
1 Like
@gillman99 I do this with aspect_ratio: 1/1 for each button which results in square buttons. Not sure if your text will fit though.
Is there a way to size the button-card such that it automatically grows large enough to host a custom_field (e.g. when it is positioned at 0, 0 absolute) or does the size need to be hard-coded to be large enough?
To give some context: I would like to use button-card as a container to host other cards that overlap each other via custom_field, bringing all the button-card magic in. The hosting button-card itself would be “empty”, i.e. not show any entity or control directly.
No, that is not possible with absolutely positioned elements because they are removed from the flow.
Your best bet is to set the size of the absolutely positioned element in % (it will be then based on the parent’s size)