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

Mariusthvdb · December 11, 2022, 11:18am

nice.

I am a bit worried about the ‘open’ else here though.
We’ve discussed this with Thomas before, and as far as I can remember, the outcome was we only need the if.

  .header .icon {
  {% if is_state('input_boolean.style','on') %}  animation: rotation 1.5s linear infinite;
  {% endif %}  
  }

and the card-mod resource takes care of that in the else case…

please test that if you would, I think it will work without error in the inspector

dolodobendan · December 11, 2022, 12:57pm

I am a bit worried about the ‘open’ else here though.
We’ve discussed this with Thomas before, and as far as I can remember, the outcome was we only need the if .

That’s just a remnant, before I created a bool for this, I just used a random sensor (like weather), with random states and compared it to “test” or whatever. I don’t know why. I’ll correct this.

please test that if you would, I think it will work without error in the inspector

I wouldn’t know how. I’m just guessing things.

Thomas_Prikowitsch · December 11, 2022, 5:38pm

i am struggeling with the same thing… i just wanted to change the width of the time-input-entity.

finally i went the direct way and changed the values in the time-picker-card.js

i thought about changing the custom cards nesting-sceme to make it card-mod-compatible

best regards

Ildar_Gabdullin · December 11, 2022, 7:05pm

For people who is testing their colors for icons & history-graph:
check here for a testing tool: binary_sensor entities with different device_class and a card:

Also:
How to provide alternative values for new variables.

Marin · December 11, 2022, 9:18pm

Hi Ildar,
I just saw this post and found it interesting. Could you help me implementing it to my card as I really don’t have any experience in css. Tried but didn’t work.
I have 2 switches which need to be interlocked. So if one of the two is ON other needs to be disabled until the first one returns to OFF.
How to add your code to this:

type: entities
title: Roletne
show_header_toggle: false
entities:
  - entity: switch.dnevni_roletna_mala_zatvaranje
  - entity: switch.dnevni_roletna_mala_otvaranje

Cheers!

Ildar_Gabdullin · December 11, 2022, 9:20pm

Please write a code for this logic here, then I will show how to add this logic for CSS attributes.
For me, this is not about CSS, this is about a "input_boolean" or a "switch" state first.

Marin · December 11, 2022, 10:13pm

Well this is what I have now. Other switch is removed when first one is ON but I would like to have it greyed out and disabled.

type: entities
title: Tende i roletne
show_header_toggle: false
entities:
  - type: conditional
    conditions:
      - entity: switch.dnevni_roletna_mala_otvaranje
        state: 'off'
    row:
      entity: switch.dnevni_roletna_mala_zatvaranje
      name: Mala roletna - zatvaranje
      icon: mdi:window-shutter
  - type: conditional
    conditions:
      - entity: switch.dnevni_roletna_mala_zatvaranje
        state: 'off'
    row:
      entity: switch.dnevni_roletna_mala_otvaranje
      name: Mala roletna - otvaranje
      icon: mdi:window-shutter

Ildar_Gabdullin · December 11, 2022, 10:30pm

Any conditional styles for ANY case may be coded as:

        xxxx {
          {% if SOME_CONDITION %}
          some_property: some_value;
          {% endif %}
        }

Open any example (like you used for disabling a toggle) and place styles (which are in “{ … }”) into jinjia “if…else…endif” statement.

Marin · December 11, 2022, 11:04pm

So I have this now but I can still press the greyed out toggle switch and I would like to have it disabled.
I don’t know how to do that part.

type: entities
title: testic
show_header_toggle: false
entities:
  - entity: switch.dnevni_roletna_mala_otvaranje
    card_mod:
      style: |
        :host {
          {% if is_state('switch.dnevni_roletna_mala_zatvaranje','on') %}
            color: var(--disabled-text-color);
            --paper-item-icon-color: var(--disabled-text-color);
            pointer-events: none;
          {% endif %}
        }
  - entity: switch.dnevni_roletna_mala_zatvaranje
    card_mod:
      style: |
        :host {
          {% if is_state('switch.dnevni_roletna_mala_otvaranje','on') %}
            color: var(--disabled-text-color);
            --paper-item-icon-color: var(--disabled-text-color);
            pointer-events: none;
          {% endif %}
        }

Ildar_Gabdullin · December 11, 2022, 11:18pm

You should take a RIGHT styling (not just using “:host”) and then insert conditions inside.
Means - that styling which you said “just saw it”.

tom_l · December 12, 2022, 2:34am

I’m trying to get the same title padding and font for the inline red card as the parent card. This was broken in a recent release:

Screenshot 2022-12-12 at 08-29-36 Overview – Home Assistant

It works for top level cards:

Screenshot 2022-12-12 at 09-31-13 Administration – Home Assistant

This is what used to work (card mod theme):

  card-mod-theme: day
  card-mod-card: |

    h1.card-header {
      font-size: 20px;
      font-weight: 300;
      letter-spacing: 0px;
    }

    ha-card.inline-card-red {
      border: solid 1px #FF6262;
      --ha-card-background: linear-gradient(rgba(250,98,98), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%);
    }

    ha-card.inline-card-red h1.card-header {
      padding-top: 0px;
      padding-bottom: 28px;
    }

Top level card:

Inline Card:

It seems there is an extra shadow root placed in the inline card now.

Ildar_Gabdullin · December 12, 2022, 2:57am

Is that what you expect - same styles for all cards, including internal?

type: vertical-stack
cards:
  - type: entities
    title: title
    card_mod: &ref_card_mod
      style: |
        .card-header {
          font-size: 30px;
          font-weight: 800;
          letter-spacing: 10px;
          padding-top: 40px;
          padding-bottom: 40px;
        }
        ha-card {
          border: solid 1px #00ff00;
          --ha-card-background: linear-gradient(rgba(250,98,98), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%);
        }
    entities:
      - type: custom:hui-element
        card_type: entities
        entities:
          - entity: sun.sun
        title: title
        card_mod: *ref_card_mod
  - type: entities
    entities:
      - entity: sun.sun
    title: title
    card_mod: *ref_card_mod

Do not bother about colors etc, I changed them to make more vivid (to see if it works).

If yes - then I will try to make a theme.

tom_l · December 12, 2022, 3:10am

Yes, exactly that. It used to work.

Also I have just noticed that the front end devs have added the extra shadow root to one of the energy cards but not another:

10 points for inconsistency.

Hopefully I’ll be able to work that out from your example theme fro the red card.

Ildar_Gabdullin · December 12, 2022, 3:35am

I finished a theme for your case.
Now busy with adding a “inline-card-red” class, coming soon…

Ildar_Gabdullin · December 12, 2022, 3:59am

My aim was to define a theme which will work for:

entities
glance
other cards with a header like history-graph.

Check this theme:

test_tom_i:

  card-mod-theme: test_tom_i

  card-mod-card-yaml: |
    $: |
      .card-header {
        /* for history-graph & glance */
        font-size: 30px !important;
        font-weight: 800 !important;
        letter-spacing: 10px !important;
      }
    .: |
      .card-header {
        /* for entities */
        font-size: 30px;
        font-weight: 800;
        letter-spacing: 10px;
      }
      ha-card.inline-card-red .card-header {
        /* for some class */
        padding-top: 40px;
        padding-bottom: 40px;
        color: magenta;
      }
      ha-card:not(inline-card-red) {
        /* for all other classes - need to override parental styles */
        border-color: var(--ha-card-border-color,var(--divider-color, #e0e0e0));
        border-width: var(--ha-card-border-width, 1px);
        border-style: solid;
        --ha-card-background: var(--ha-card-background, var(--card-background-color, white));
      }
      ha-card.inline-card-red {
        /* for some class */
        border: solid 1px #00ff00;
        --ha-card-background: linear-gradient(rgba(250,98,98), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%);
      }

Test view:

  - theme: Backend-selected
    title: nine
    path: nine
    badges: []
    cards:
      - type: history-graph
        entities:
          - sun.sun
        title: title.inline-card-red
        card_mod:
          class: inline-card-red
      - type: vertical-stack
        cards:
          - type: entities
            entities:
              - entity: sun.sun
            title: title.inline-card-red
            card_mod:
              class: inline-card-red
          - type: entities
            entities:
              - entity: sun.sun
            title: title
      - type: entity
        entity: sun.sun
        name: inline-card-red
        card_mod:
          class: inline-card-red
      - show_name: true
        show_icon: true
        show_state: true
        type: glance
        entities:
          - entity: sun.sun
        title: title.inline-card-red
        card_mod:
          class: inline-card-red
      - type: entities
        entities:
          - entity: sun.sun
        title: title
      - type: vertical-stack
        cards:
          - type: entities
            title: title.inline-card-red
            card_mod:
              class: inline-card-red
            entities:
              - type: custom:hui-element
                card_type: entities
                entities:
                  - entity: sun.sun
                title: title
              - type: custom:hui-element
                card_type: entities
                entities:
                  - entity: sun.sun
                title: title.inline-card-red
                card_mod:
                  class: inline-card-red
          - type: entities
            entities:
              - entity: sun.sun
            title: title

What we can see here:

The theme works fine for Entities.
For Glance, History-graph: since “.card-header” is in shadowRoot - I cannot define a “classy”-style for the header. Have no idea how to select a shadowrooted “.card-header” for some special class.

Ildar_Gabdullin · December 12, 2022, 4:03am

Cannot check it, have no power sensors unfortunately, here is Middle Ages still…

tom_l · December 12, 2022, 4:04am

Yeah that is the issue I’m trying to fix.

Thanks for trying though.

I guess I’ll just add the style directly to the recalcitrant cards.

Ildar_Gabdullin · December 12, 2022, 4:13am

The whole problem with “.card-header” inside shadowRoot seems strange.
I wonder is there any chance of asking Devs to fix it…

tom_l · December 12, 2022, 4:18am

There’s always a chance. Even if it is a snowball’s chance in hell.

This does not seem to access the shadow root. What am I doing wrong:

card_mod:
  class: top-level-card
  style: |
    .:
      h1.card-header {
        font-size: 30px;
        font-weight: 800;
        letter-spacing: 10px;
        padding-top: 40px;
        padding-bottom: 40px;
      }

I tried with and without h1 in the path. No luck.

Ildar_Gabdullin · December 12, 2022, 4:21am

No need to use “h1”.
To win shadowRoot you must think like a shadowRoot.
Check my theme again:

  card-mod-card-yaml: |
    $: |
      .card-header {
        ...
      }
    .: |
      .card-header {
        ...
      }

But check this also:

Can you guess how I did it? )))
Hint: managed to define classy shadowRoot style.

OK, here it is:

test_tom_i:

  card-mod-theme: test_tom_i

  card-mod-card-yaml: |
    $: |
      .card-header {
        font-size: 30px !important;
        font-weight: 800 !important;
        letter-spacing: 10px !important;
        color: var(--my-classy-color) !important;
        padding-top: var(--my-classy-padding-top) !important;
        padding-bottom: var(--my-classy-padding-bottom) !important;
      }
    .: |
      .card-header {
        font-size: 30px;
        font-weight: 800;
        letter-spacing: 10px;
      }
      ha-card.inline-card-red .card-header {
        padding-top: 40px;
        padding-bottom: 40px;
        color: magenta;
      }
      ha-card:not(inline-card-red) {
        border-color: var(--ha-card-border-color,var(--divider-color, #e0e0e0));
        border-width: var(--ha-card-border-width, 1px);
        border-style: solid;
        --ha-card-background: var(--ha-card-background, var(--card-background-color, white));
      }
      ha-card.inline-card-red {
        border: solid 1px #00ff00;
        --ha-card-background: linear-gradient(rgba(250,98,98), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%);
        --my-classy-color: magenta;
        --my-classy-padding-top: 40px;
        --my-classy-padding-bottom: 40px;
      }

To specify a classy-shadowRoot-element style - use variables which are defined for the classy-parent.