that’s an example if statement, then use that variable inside your string that’s being returned with
${statecolor}
Where do I put this line in my code?
well, look at marius’s example… where does he put it?
Hint: the variable needs to exist before you return it.
I don’t know where to fill :
state_display: >
…
You should only be concerned with the template, not the field it’s going in. That’s everything between the 2 [[[ and ]]]
You’re over complicating this in your head. To be clear, you’ll be copying 1 line, editing that line to use the active icon color and the non icon color vars. Then you’ll edit the color in the return line. It’s 3 actions.
Where do I put the template?
Where’s your current template?
Sorry, to difficult for me to understand.
Where’s your current templatr
I don’t have Template.
Only this card:
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: |
[[[
return `<ha-icon
icon="mdi:server-network"
style="width: 20px; height: 20px;">
state_display:
[[[ var statecolor = (entity.state == 'on') ? 'var(--paper-item-icon-active-color)' : 'var(--paper-item-icon-color)';">]]]
</ha-icon>${states['binary_sensor.wan_status'].state}`
]]]
Down: |
[[[
return `<ha-icon
icon="mdi:download"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>Down: <span style="color: var(--text-color-sensor);">${states['sensor.orange_livebox_download_speed'].state}MBs</span></span>`
]]]
Upl: |
[[[
return `<ha-icon
icon="mdi:upload"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>Up: <span style="color: var(--text-color-sensor);">${states['sensor.orange_livebox_upload_speed'].state}MBs</span></span>`
]]]
HPB: |
[[[
return `<ha-icon
icon="mdi:water"
style="width: 12px; height: 12px; color: black;">
</ha-icon><span>HP Black: <span style="color: var(--text-color-sensor);">${states['sensor.hp_envy_5640_series_black_ink'].state}%</span></span>`
]]]
HPC: |
[[[
return `<ha-icon
icon="mdi:water"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>HP Color: <span style="color: var(--text-color-sensor);">${states['sensor.hp_envy_5640_series_tri_color_ink'].state}%</span></span>`
]]]
type: custom:button-card
You’ve posted it twice now.
No, templates are between [[[ and ]]]. That’s your whole card configuration
I know that I have to play here:
custom_fields:
WAN: |
[[[
return `<ha-icon
icon="mdi:server-network"
style="width: 20px; height: 20px; color: var statecolor = (entity.state == 'Connecté') ? 'var(--paper-item-icon-active-color)' : 'var(--paper-item-icon-color)';">
</ha-icon>${states['binary_sensor.wan_status'].state}`
]]]
When the WAN status is connected, the state is : “Connecté”, when disconnected : “Déconnecté”
alright, so the if statement variable that I referenced multiple times already needs to be in the template and before you return anything. So, again, where do you think it should go?
Sorry, I don’t understand anything 
Dude, what is inside the template? You know that the template is between [[[ and ]]]
What is before the return? You know where the return is. You’re 100% not reading what you have in front of you. This is very easy.
I don’t know what is Before the Return. All others code in this card start with Return after [[[.
Sorry, I’m not a developper, newbi with HA and french (the worst ;-))
you know what before means right? Do you see the word return?