You’re putting on these “coding is hard” blinders, and this is really easy. Like SUPER easy with the hints i’ve given you.
Euh…before the return, you have all of that…
entity: binary_sensor.wan_status
show_icon: false
aspect_ratio: 1/1
name: Livebox
styles:
card:
- border-radius: 15%
- padding: 8%
- font-size: 100%
grid:
- grid-template-areas: '"i WAN" "n n" "Down Down" "Upl Upl" "HPB HPB" "HPC HPC"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 100%
- align-self: middle
- justify-self: start
- padding-bottom: 9%
img_cell:
- justify-content: start
- align-items: start
- margin: none
custom_fields:
WAN:
- align-self: start
- justify-self: end
Down:
- padding-bottom: 5%
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.orange_livebox_download_speed"].state > 80)
return "red"; ]]]
Upl:
- padding-bottom: 5%
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.orange_livebox_upload_speed"].state > 80)
return "red"; ]]]
HPB:
- padding-bottom: 5%
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.hp_envy_5640_series_black_ink"].state < 30)
return "red"; ]]]
HPC:
- padding-bottom: 5%
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.hp_envy_5640_series_tri_color_ink"].state < 30)
return "red"; ]]]
custom_fields:
WAN: |
[[[
right. and it needs to be after the [[[ which indicates the start of your template…
Ok… If you don’t want to help me, no issue, I’ll try to find by myself → 3hours that I search…
Dude. I’m trying to help you. Here, i’ll give you the answer you can’t figure out.
It goes here; Literally between your [[[ and return. You have these blinders on for some reason and you’re making this harder on yourself.
custom_fields:
WAN: |
[[[
var statecolor = (entity.state == 'on') ? 'var(--paper-item-icon-active-color)' : 'var(--paper-item-icon-color)';
return `<ha-icon
icon="mdi:server-network"
style="width: 20px; height: 20px; color: ${statecolor};">
</ha-icon>`
]]]
3 Likes
Thanks a lot !!! it works
I used this to show the brightness of lights:
state_display: >
[[[return entity === undefined || Math.round(entity.attributes.brightness / 2.54) + "%"; ]]]
But when it’s turned off it only shows this:
Do you know how can I make it say “off” instead?
EDIT:
Trial and error and this worked 
state_display: >
[[[ return entity.state == 'on' ? [Math.round(entity.attributes.brightness / 2.54) + "%"] : 'Av' ]]]
Hello to all
I am a beginner, very beginner
I have read this whole post to find a solution to my problem, but I was able to do only the left part of the card and I just can’t complete the second right part of the card
In practice, on the right side of the card I would like to divide it into 2 and put the system date and a counter at the bottom.
Thank you all for your help and sorry for my bad English, but I get help from a translator …
Thanks again
type: horizontal-stack
cards:
################################################################################################
# Prima intestazione lato SX
################################################################################################
- type: 'custom:button-card'
icon: mdi:sprinkler-variant
color_type: icon
entity: automation.irr_irrigazione_settimanale_su_orario_ciclo_1
layout: icon_label
name: Ciclo di Irrigazione 1
show_label: false
show_state: true #visualizza il suo stato
show_name: true
styles:
card:
- width: 520px
- height: 80px
grid:
- grid-template-areas: '"n i" "s i" "l i"'
- grid-template-columns: 35% 18% 1fr
- grid-template-rows: 28px 15px
custom_fields:
n i:
- align-self: center
- justify-self: center
- font-size: 30px
l i:
- align-self: center
- justify-self: center
- font-size: 30px
icon:
- color: >
[[[
if (entity.state === 'on') return 'lime';
if (entity.state === 'off') return 'yellow';
else return 'red';
]]]
I’m all but an expert with this, but I do see some things, that are wrong. 
First off, if you’re using the grid template, there are already letters for the main things (i = img_cell, n = name, l = label, s = state). If you use them, you need to address them correctly.
custom fields come only in play, if you use other than the four default ones. In your case, you’re using the custom_fields definitions for the default ones, that will not work.
And, what you’re doing codewise is different to your image /see under the code example)
Take a look here:
For your code it would be something like this (something, as I don’t know what exactly you want):
grid:
- grid-template-areas: '"n i" "s i" "l i"'
- grid-template-columns: 35% 18%
- grid-template-rows: 28px 15px ??px
img_cell:
# definitions for i (=img_cell)
name:
# definitions for n (=name)
state:
# definitions for n (=name)
label:
# definitions for n (=name)
This code makes the grid look like this:
|- name -|- img_cell -|
|- state -|- img_cell -|
|- label -|- img_cell -|
where img_cell is a combined cell, will say it is just one cell, not three different. Just to make it clearer, your picture right now would look like this:
|- ciclo -|- date -|
|- ciclo -|- counter -|
Hope this helps a little, it is kind of a steep learning curve with button-card, but once you get the hang of it, it is simply amazing, what you can do with it.
EDIT: and you should check your indentation of the code, right now your button-card is two spaces to far to the left, corresponding to the horizontal-stack.
Thanks paddy0174, for your prompt reply …
Believe me I have seen the documentation you propose to me, but I find it very difficult to understand, I probably miss something when translating it from English and sometimes I do not understand its meaning …
anyway thank you very much for your information slowly maybe I get there
at the moment with a lot of effort I managed to adapt a package adapting it to my needs … but that card I just can’t configure it …
Nope, you don’t miss something, it is a really steep learning curve.
What is it, that you want to achieve? Your first or your second pic? And while we’re at it, how do you get the data you want to show? Are these three different sensors, or is this one with three attributes or …? And what should this automation you set as entity do? Do you want to toggle the automation on/off?
Hello paddy0174. Thanks again
The first photo is a part of the second photo, the card at the top left.
The first photo, the left side is already working, will not be the best way to get it (surely) but in practice it inhibits the functioning of the entire irrigation board.
On the right side of the first photo, as you can see, it is divided into 2 and at the top I would like to put the date and time of the system, while at the bottom a counter that counts the irrigation cycles already completed.
The entity of the counter is “- entity: counter.cycle_irrigation_counter”
I have already made the whole board and working using the automatisms made available by HA, now I would like it to be more beautiful graphically and for this I have started to manage it through Yaml code … but I still don’t understand this story of the grid … a practical example would be very useful to me.
Is there a shutter button? I’m looking for something like this, or someone has built and can share.
Thanks
Wow! Where did you get those colored icons? They are very nice
I tried, but I couldn’t get it to work.
My thermostat entity is climate.thermostat
What have you tried and didn’t work? You should post your example code, so others can help to solve the error.
Hello to all
Kindly, Who helps me to insert in the card posted below the two date and time fields, and a counter field, at the top right and bottom right.
The code currently used is the following …
type: horizontal-stack
cards:
################################################################################################
# Prima intestazione lato SX
################################################################################################
- type: 'custom:button-card'
icon: mdi:sprinkler-variant
color_type: icon
entity: automation.irr_irrigazione_settimanale_su_orario_ciclo_1
layout: icon_label
name: Ciclo di Irrigazione 1
show_label: false
show_state: true #visualizza il suo stato
show_name: true
styles:
card:
- width: 520px
- height: 80px
grid:
- grid-template-areas: '"n i" "s i" "l i" "contatore_ser contatore_ser "'
- grid-template-columns: 35% 18% 40%
- grid-template-rows: 28px 15px
Grazie a tutti ancora …