Look at the picture left and compare the example code with it:
The style section part 1:
The ‚skeleton‘ to arrange the custom fields is a grid. 1 area for each element in order of appearance.
styles:
…
…
…
grid:
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
Style section part 2:
The arrangement of the custom_fields. Compare again with the left picture.
custom_fields:
temp:
- align-self: start
- justify-self: end
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
sd:
- align-self: middle
- justify-self: start
If you want the icons to change their color if a specified value is exceeded, you have to add another styling rule to each element above:
- --text-color-sensor: '[[[ if (states["sensor.raspi_cpu"].state > 80) return "red"; ]]]'
or in total (example cpu):
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: '[[[ if (states["sensor.raspi_cpu"].state > 80) return "red"; ]]]'
### End Of Styling Section ###
Now the sensors come into play using HTML / Javascript (note backticks).
You assign them to the individual custom fields in the following ˋcustom_fields:ˋ section (note intendation).
custom_fields:
…
cpu: >
[[[
return `<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_cpu'].state}%</span></span>`
]]]
Part 1: icon and its dimensions and color.
return `<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon>
Part 2: The displayed label, here: „CPU“ and its styling.
<span>CPU: <span style="color: var(--text-color-sensor);">
Part 3 - finally - the cpu sensor (with unit of measurement).
${entity.state}°C
Long story short: All you have to do is to replace the example sensors in the ˋ${ } - brackets with your own.
, thanks for educating me .
)