homest
March 21, 2023, 3:09pm
1
Is it possible to show values in separated divs?
I have created a template sensor with 2 values and want to style them different from each other. What is the best possible way for doing that?
energie_solar_voor_current_max:
friendly_name: Huidig en max
value_template: >-
{{ ((states('sensor.paneel_voor_1_max') | float )) | round(0) }}
{{ ((states('sensor.envoy_122244026326_inverter_482235037056') | float )) | round(0) }}
unit_of_measurement: "kWh"
icon_template: mdi:transmission-tower
On the dashboard they are shown like this:
Like this I can’t style them apart from each other.
Conditional cards do not support displaying a complex value in separate divs.
Possible solution:
Do not merge 2 values into one, let them be 2 separate sensors.
In markdown card you may place both sensors’ values in different elements.
In custom:button-card you may use additional formatting to place these values as you like.
card-mod allows to add a value of the 2nd sensor into a “:after/:before” pseudoclass to the 1st value.
homest
March 23, 2023, 8:51am
3
Thanks for the replies, I’ve fixed this by using a sensor value for the name in the template sensor. In that way I was also able to style them different from each other.
energie_solar_achter5_total_info:
friendly_name: "max. {{ ((states('sensor.paneel_achter_5_max') | float )) | round(0) }}"
value_template: "{{ ((states('sensor.envoy_122244026326_inverter_482235037071') | float )) | round(0) }}"
unit_of_measurement: "kWh"
icon_template: mdi:lightning-bolt
Now I can show the max reached value and keep the minimal graph working in the background like this:
(The graph is very light in the background, getting more visible when the value gets higher)