Conditional elements - 2 options for styling:
type: vertical-stack
cards:
- type: entities
title: Conditional
entities:
- entity: input_boolean.test_boolean_2
name: show
- type: picture-elements
card_mod:
style:
hui-conditional-element hui-state-label-element:
$: |
div {
color: red;
}
.: |
ha-card {
height: 80px !important;
}
elements:
- type: state-label
entity: sensor.cleargrass_1_co2
style:
top: 6%
left: 10%
- type: conditional
conditions:
- entity: input_boolean.test_boolean_2
state: 'on'
elements:
- type: state-label
entity: sensor.cleargrass_1_co2
style:
top: 6%
left: 30%
image: /local/images/white.jpg
- type: picture-elements
card_mod:
style: |
ha-card {
height: 80px !important;
}
elements:
- type: state-label
entity: sensor.cleargrass_1_co2
style:
top: 6%
left: 10%
- type: conditional
conditions:
- entity: input_boolean.test_boolean_2
state: 'on'
elements:
- type: state-label
entity: sensor.cleargrass_2_co2
style:
top: 6%
left: 30%
card_mod:
style:
hui-state-label-element:
$: |
div {
color: orange;
}
image: /local/images/white.jpg
Update (20.05.22):
I recommend to use the 1st method.
The 2nd method sometimes does not work:
- Open a view with this card.
- Set the toggle to OFF. The conditional element is not displayed.
- Refresh the page.
- Set the toggle to ON. The conditional element is displayed.
- The conditional element may not be of orange color - this is a glitch.
- Refresh the page.
- The conditional element is of orange color.
So, the glitch occurs if the conditional element is not displayed first, then it is displayed w/o the style. The style is applied after refresh only.
Alternatively, on step 6 got to another view and then return to the view - the style is applied.
Also - same problem with a Conditional row inside Entities card. There is an issue on Github.
Update (30.10.23):
Here I will describe one more (3rd) method to style conditional element.
Also will demonstrate a currently present glitch (2023.10.2, card-mod 3.2.3) & a possible workaround.
A simple case - only 1 conditional element with different sub-elements:
- type: picture-elements
image: /local/images/test/white.jpg
elements:
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
elements:
- type: state-badge
entity: sun.sun
style:
top: 10%
left: 75%
- type: state-label
entity: sun.sun
style:
top: 20%
left: 75%
Now let’s style it using the 2nd method described above:
code
- type: picture-elements
image: /local/images/test/white.jpg
elements:
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
elements:
- type: state-badge
entity: sun.sun
style:
top: 10%
left: 75%
- type: state-label
entity: sun.sun
style:
top: 20%
left: 75%
card_mod:
style: |
hui-state-label-element {
{%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
{%- if FLAG -%}
color: red;
{%- else -%}
color: orange;
{%- endif %}
}
hui-state-badge-element {
{%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
{%- if FLAG -%}
--label-badge-text-color: red;
--label-badge-red: cyan;
--label-badge-background-color: lightblue;
{%- else -%}
--label-badge-text-color: pink;
--label-badge-red: orange;
--label-badge-background-color: yellow;
{%- endif %}
}
Note that here card-mod is used w/o entering a shadowRoot.
When we have to enter a shadowRoot - a picture is a bit different, it is described in the end of this post.
Then let’s add:
– some “non-conditional” SAME elements - state-badge, state-label;
– one more conditional element with SAME sub-elements - i.e. with state-badge, state-label
and do not specify styling for them.
code
- type: picture-elements
image: /local/images/test/white.jpg
elements:
- type: state-badge
entity: sun.sun
style:
top: 10%
left: 25%
- type: state-label
entity: sun.sun
style:
top: 20%
left: 25%
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
elements:
- type: state-badge
entity: sun.sun
style:
top: 40%
left: 75%
- type: state-label
entity: sun.sun
style:
top: 50%
left: 75%
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
elements:
- type: state-badge
entity: sun.sun
style:
top: 10%
left: 75%
- type: state-label
entity: sun.sun
style:
top: 20%
left: 75%
card_mod:
style: |
hui-state-label-element {
{%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
{%- if FLAG -%}
color: red;
{%- else -%}
color: orange;
{%- endif %}
}
hui-state-badge-element {
{%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
{%- if FLAG -%}
--label-badge-text-color: red;
--label-badge-red: cyan;
--label-badge-background-color: lightblue;
{%- else -%}
--label-badge-text-color: pink;
--label-badge-red: orange;
--label-badge-background-color: yellow;
{%- endif %}
}
Note that these added elements got the same styling.
This is a GLITCH.
Since card-mod specified for some particular conditional element - the styling is supposed to be used for this element only. But in fact it is applied for other elements as well.
To understand a possible workaround, we need to consider the 3rd method - “using variable”.
Again with a simple case shown above:
code
- type: picture-elements
image: /local/images/test/white.jpg
elements:
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
elements:
- type: state-badge
entity: sun.sun
style:
top: 10%
left: 75%
- type: state-label
entity: sun.sun
style:
top: 20%
left: 75%
color: var(--my-label-color)
card_mod:
style: |
:host {
{%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
{%- if FLAG -%}
--my-label-color: red;
--label-badge-text-color: red;
--label-badge-red: cyan;
--label-badge-background-color: lightblue;
{%- else -%}
--my-label-color: orange;
--label-badge-text-color: pink;
--label-badge-red: orange;
--label-badge-background-color: yellow;
{%- endif %}
}
Here are variables are defined by card-mod.
Note that:
– a variable for state-label is then used with a native styling way for picture-elements;
– variables for state-badge are defined on this conditional element level - and then supposed to be used inside an internal state-badge.
Let’s add additional elements as we did earlier.
And here we observe the same GLITCH - but only for state-badge!
For state-label everything works as expected since we used a “native picture-elements styling way”.
Now we can see a bit cumbersome workaround:
code
- type: picture-elements
image: /local/images/test/white.jpg
elements:
- type: state-badge
entity: sun.sun
style:
top: 10%
left: 25%
- type: state-label
entity: sun.sun
style:
top: 20%
left: 25%
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
elements:
- type: state-badge
entity: sun.sun
style:
top: 40%
left: 75%
- type: state-label
entity: sun.sun
style:
top: 50%
left: 75%
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
elements:
- type: state-badge
entity: sun.sun
style:
top: 10%
left: 75%
'--label-badge-text-color': var(--my-label-badge-text-color)
'--label-badge-red': var(--my-label-badge-red)
'--label-badge-background-color': var(--my-label-badge-background-color)
- type: state-label
entity: sun.sun
style:
top: 20%
left: 75%
color: var(--my-label-color)
card_mod:
style: |
:host {
{%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
{%- if FLAG -%}
--my-label-color: red;
--my-label-badge-text-color: red;
--my-label-badge-red: cyan;
--my-label-badge-background-color: lightblue;
{%- else -%}
--my-label-color: orange;
--my-label-badge-text-color: pink;
--my-label-badge-red: orange;
--my-label-badge-background-color: yellow;
{%- endif %}
}
Now let’s consider a card-mod with entering a shadowRoot:
code
- type: picture-elements
image: /local/images/test/white.jpg
elements:
- type: state-badge
entity: sun.sun
style:
top: 10%
left: 25%
- type: state-label
entity: sun.sun
style:
top: 20%
left: 25%
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
elements:
- type: state-badge
entity: sun.sun
style:
top: 40%
left: 75%
- type: state-label
entity: sun.sun
style:
top: 50%
left: 75%
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
elements:
- type: state-badge
entity: sun.sun
style:
top: 10%
left: 75%
- type: state-label
entity: sun.sun
style:
top: 20%
left: 75%
card_mod:
style:
hui-state-badge-element:
$:
ha-state-label-badge:
$: |
ha-label-badge {
{%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
{%- if FLAG -%}
color: orange;
--label-badge-text-color: red;
--label-badge-red: cyan;
--label-badge-background-color: lightblue;
{%- else -%}
color: magenta;
--label-badge-text-color: pink;
--label-badge-red: orange;
--label-badge-background-color: yellow;
{%- endif %}
}
hui-state-label-element:
$: |
div {
{%- set FLAG = is_state('input_boolean.test_boolean_2','on') -%}
{%- if FLAG -%}
color: red;
{%- else -%}
color: orange;
{%- endif %}
}
Here we can see that styles are only applied to a particular conditional element (as it is supposed to be), i.e. there is no GLITCH. Earlier we had to use a variable-base workaround to solve it.
But this styling is unstable - it has same issues as described in the beginning of this post.
So, nothing is perfect.
Note that for THESE particular cases there is no a real need to enter a shadowRoot, everything may be styled w/o entering (as we did above). But in real cases to style some UI parts we really need to enter shadowRoot.