In my own configuration Iām using if and else statements to dynamically change the multi-line text of secondary info and not static multi-line strings (see down below in Example 4). I wasnāt sure if/ how you could use an if statement directly with secondary_info so I used the old method of ::before. My bad if it is actually possible to use if statements within secondary_info, because that would be the preferred solution. Could you point me in the right direction if itās possible to implement an if statement directly into secondary_info?
Iām not sure if I misunderstood your explanation but the given example of content: "Critical\A Danger\A"; only works for me when the white-space: pre-wrap; is added, which wasnāt added in the original example. Adding only \A at the end of the content does not solve this issue (Example 2). Additionally, by adding \A at the end you wonāt be able to use ::after properly anymore because the transparant last_changed text is moved over to the next line (Example 3). Iām not sure why someone would want to use ::after, but itās good to know in case someone wants to use it.
Example 1: Dynamic text
Maybe itās possible to do something similar directly in secondary_info?
.grid-content.grid-left .info .secondary::before {
content:
"Temp: {{ states('sensor.temperature_sensor') | round(1) }}Ā°C \A"
"Damper: {%- set sensor = 'fan.damper_example_room' %}
{%- if states(sensor) == 'on' %} {{ state_attr(sensor,'percentage') }}%
{%- else %} Off
{%- endif %}"
;
line-height: normal;
white-space: pre-wrap;
}
Example 2: Without pre-wrap but with \A at the end of the line.
.grid-content.grid-left .info .secondary::before {
content: "Line 1\A Line 2\A";
line-height: normal;
}
Example 3: With pre-wrap, with \A, and with a 3rd line using ::after
The transparant last_changed information has moved over to the next line by using \A at the end of Line 2. This causes Line 3 to move over.
.grid-content.grid-left .info .secondary::before {
content: "Line 1\A Line 2\A";
line-height: normal;
white-space: pre-wrap;
}
.grid-content.grid-left .info .secondary::after{
content: "\A Line 3";
line-height: normal;
white-space: pre-wrap;
}
Example 4: With pre-wrap, without \A, with a 3rd line using ::after
The ::after content does start with \A to move the text to the next line.
.grid-content.grid-left .info .secondary::before {
content: "Line 1\A Line 2";
line-height: normal;
white-space: pre-wrap;
}
.grid-content.grid-left .info .secondary::after{
content: "\A Line 3";
line-height: normal;
white-space: pre-wrap;
}
