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

[Mariusthvdb (Marius)]

no not exactly.

custom-ui is completely browser side (well, except for templates that use other entities) Thats why there is no burden on the processor usage using that. JS templates are used

custom button-card uses the same js templates, hence the beauty of it on the RPi

of course, regular template sensors, in all variations use backend computations, and burden the processor.

card-mod uses jinja templates too, which , again, use backend capacity, server side. I must confess I am not 100% certain, because this is done in Lovelace, which is frontend of course… still, jinja is backend server side. Would love to hear from the dev’s on this. to be certain.

I suppose the same would go for all the custom cards that use jinja. backend computations.

[Ildar_Gabdullin]

I have RPi 3 as a HA server, iPhone 5S, iPad Air 2.
When browsing HA on a rather powerful PC, sometimes there are freezes on pages with card-mod, markdown.
When browsing on iPhone 5S companion HA app, it simply may not display a page at all - but sometimes does display. And these freezes happen less often on iPad Air 2.

For test purpose, I ran HA in VmWare on that powerful PC - and I saw no freezes when browsing HA on the same PC, but I still saw same freezes on iPhone 5S and less on iPad Air 2.

Now I do not understand why my mobile clients cause freezes.
So, the best solution is “powerful server, powerful client” ))).

[Mariusthvdb (Marius)]

yep, it can be a balancing act.
from my experience, I can only say the custom-ui customizations fly as quick as one could wish, using up to date iOS devices and regular browsers. The app, they al fare extremely well.

I do have a rather high processor %:

but that doesn’t seem to harm anything (especially now I use the Argon ONE case keeping things cool.
And why wouldn’t one use the processor… that’s what it’s there for isnt it?

This is on a large (dev’s say huge…) RPI4 instance. I have 2 supporting Rpi3 instances, which only have Z-WavejS and MQTT add-ons respectively, and their temp is higher in regular cases, and I can’t say they use less percentage really:

So I guess its modern HA core taking its toll too, no matter the measures we take in the configurations…

[greghesp]

Card-mod - Add css styles to any lovelace card

Wondering if anyone can help me with my theme, as I cannot for the life of me get it to apply a text style. Below is my structure, and I am wanting to apply a style to the h1 tag inside of the shadow-root inside the hui-grid-card [image] In my themes.yaml I am using the card-mod-view-yaml option like so: card-mod-view-yaml: > "grid-layout$": hui-grid-card: $: | h1 { line-height: 0 !important; padding: 1vw 0 0vw 0 !i…

Anyone able to assist?

[Mariusthvdb (Marius)]

hop over to the dedicated thread for that: 🔹 Card-mod - Super-charge your themes!

[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 %}
           }