🔹 Card-mod - Add css styles to any lovelace card

[Mariusthvdb (Marius)]

another day, another challenge…

trying to create a conditional badge, and it should be added to an existing card-mod. Here, display: none is suggested by Troon, but I can’t get it right just yet.

  - entity: sensor.state_badge
    card_mod:
      style: |
        :host {
          display: {% if config.entity is none %}none{%endif%}
        }
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .badge-container .label-badge {
                  /* Top circle of the Badge (State) */
                  border-style: dashed;
                  border-color: blue;
                  color: grey;
                  background-color: yellow;
                 }
                  /* Label of the Badge (Unit) */
                .badge-container .label-badge .label span {
                  border-style: dotted;
                  border-color: pink;
                  color: red;
                  background-color: green;
                 }
                  /* Below the Badge (Name) */
                .title {
                  color: orange;
                }

So I have two challenges here:

• on config.entity: the config.entity is none template doesnt work, (while a test in dev tools does work) tried config.entity.entity_id etc. if not config.entity which should be valid, same effect: Keep getting
  

• how to combine the display: none template with the other card_mod config settings…

as an example, this does work:

    card_mod:
      style: |
        :host {
          display: {% if states('binary_sensor.updater') == 'off' %} none {% endif %}
        }

thanks for having a look

[Ildar_Gabdullin]

Marius,

1. Wrong placement for ":host" style.
2. Should be is_state(config.entity, “none”).
3. Wrong expression for "display" style.

        card_mod:
          style:
            ha-state-label-badge:
              $:
                ha-label-badge:
                  $: |
                    .badge-container .label-badge {
                      border-style: dashed;
                      border-color: blue;
                      color: grey;
                      background-color: yellow;
                     }
                    .badge-container .label-badge .label span {
                      border-style: dotted;
                      border-color: pink;
                      color: red;
                      background-color: green;
                     }
                    .title {
                      color: orange;
                    }
            .: |
              :host {
                {% if is_state(config.entity,"none") %} display: none; {% endif %}
              }

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

{% if is_state(config.entity,"none") %} display: none; {% endif %}

thanks, and indeed, I can now use the 2 templates. Finally see and understand the use of .: | …

still, the test for existence doesnt work:

Simply try it on an incorrect entity, and you’ll see.
seems the config.entity cant be tested for existence in card-mod, hence 'if config.entity is none' template doesn't work · Issue #134 · thomasloven/lovelace-card-mod · GitHub

[Ildar_Gabdullin]

Try this, it works in my setup:

{% if states(config.entity) in ['unavailable','unknown','none'] %} display: none; {% endif %}

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

['unavailable','unknown','none']

No that doesnt work either. Did you try to take out a single character of the entity? like binary_sensr.updater ?

[Ildar_Gabdullin]

That was exactly how I tested - with "sensor.cleargrass_1_co"

[Mariusthvdb (Marius)]

well I’ll be…

please dont tell me Ive got another typo here:

  - entity: sensor.state_badg
    card_mod:
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .badge-container .label-badge {
                  /* Top circle of the Badge (State) */
                  border-style: dashed;
                  border-color: blue;
                  color: grey;
                  background-color: yellow;
                 }
                  /* Label of the Badge (Unit) */
                .badge-container .label-badge .label span {
                  border-style: dotted;
                  border-color: pink;
                  color: red;
                  background-color: green;
                 }
                  /* Below the Badge (Name) */
                .title {
                  color: orange;
                }
        .: |
          :host {
            display: {% if states(config.entity) in ['unavailable','unknown','none'] %} display: none; {% endif %}
          }

[Ildar_Gabdullin]

@Mariusthvdb

display: {% if states(config.entity) in ['unavailable','unknown','none'] %} display: none

Here is double display word, causes error.

[Mariusthvdb (Marius)]

this is what I am trying to replicate with config.entity:

{% if states.binary_sensor.updater is defined %} none {% endif %}

or even better:

{% if states.binary_sensor.updater %} none {% endif %}

both of these work as expected, and likewise with ‘not is defined’ or is none

[Ildar_Gabdullin]

Regarding the condition:
if condition = true:

    card_mod:
      style: |
        :host {
          display: none
        }

if condition = false:

    card_mod:
      style: |
        :host {
          display: 
        }

The 2nd expression will not work if using this construction:

          display: {% if config.entity is none %}none{%endif%}

[Mariusthvdb (Marius)]

@Mariusthvdb

in [‘unavailable’,‘unknown’,‘none’]

so this works:

      style: |
        :host {
          display: {% if states(config.entity) in ['unknown'] %} none {% endif %}
        }

and this:

      style: |
        :host {
          display: {% if states(config.entity) == 'unknown' %} none {% endif %}
        }

… pff now thats a bit of a surprise. I mean, not that these 2 templates do the same. of course they do. but the fact we can not use config.entity, and can not use is none, but need to use the states() of the config.entity, and need to check for 'unknown'

[Ildar_Gabdullin]

This is anyway wrong conditional check.

A=
if(condition)
  123

What if condition is false? The value A becomes undefined…
You should specify “else” or put “A=” under the condition’s check.

[Ildar_Gabdullin]

@Mariusthvdb

d need to check for 'unknown'

Seems so:

[Mariusthvdb (Marius)]

yes, thats what I wrote here, and as state there, it seems to work just fine. Have just tested it with this full card-mod, and can confirm once more that is shows when the existence check is positive. (the condition isn’t met, iow the states(config.entity) != 'unknown'

[Mariusthvdb (Marius)]

yes, of course I understand that, but that’s checking for the states state (as in state of the entity), while I was trying to check for the state (as in entity) itself

compare this js template:

        - color: >
            [[[ if (entity) return entity.attributes.icon_color;
                return 'var(--secondary-text-color)'; ]]]

first check if the entity itself exists, then return an attributes of that entity

seems we should be able to do that with config.entity, unless there’s something in card-mod preventing that.
Well, you’ve pointed me to a solution, to thanks again! Hope Thomas will have a look at the issue and see if things can be simplified…

add this to the top of your lovelace view:

    style:
      <<: &exist
        .: |
         :host {
           display: {% if states(config.entity) == 'unknown' %} none {% endif %}
         }

and simply add it to any other badge with:

    style:
      <<: *exist

Nice !

btw, with {% else %} guard:

           :host {
             display: {% if states(config.entity) == 'unknown' %} none
                      {% else %} inline-block
                      {% endif %}

or:

    card_mod:
      style:
        <<: &exist
          .: |
           :host {
             {% if states(config.entity) == 'unknown' %} display: none
             {% else %} display: inline-block
             {% endif %}
           }

[Ildar_Gabdullin]

@Mariusthvdb

display: inline-block

Do not touсh it. One day it may be changed in HA code. It is better to simply “do not change the style”.

[Mariusthvdb (Marius)]

now you lost me… I thought you wanted an else clause? what would you suggest in this case then?

building on this, I tried the same mod on a button-card in the view, but that doesn’t work. It simply shows a button, with all style settings, but without a working entity…

[Ildar_Gabdullin]

@Mariusthvdb

I thought you wanted an else clause? what would you suggest in this case then?

That is why I proposed you:

              :host {
                {% if is_state(config.entity,"none") %} display: none; {% endif %}
              }

which is equal to:

              :host {
                display: none;
              }

and

              :host {
              }

@Mariusthvdb

I tried the same mod on a button-card in the view, but that doesn’t work. It simply shows a button, with all style settings, but without a working entity…

Give me a code for the button & your expectations, I will try to figure it out.

[Mariusthvdb (Marius)]

ok I see, thanks. didn’t realize that’s what you implied with that.

the interpreter won’t choke on an empty {} then? Guess not, it doesn’t choke on the absence of the else either

[Ildar_Gabdullin]

@Mariusthvdb

he interpreter won’t choke on an empty {} then?

no, it will be OK.
you may put a useless style if you like:

--my-invented-variable: red;