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

[Mariusthvdb (Marius)]

I could see it popup in inspector upon running the script, is only visible for a short period of the script, so had to be quick.

Adding anything like that in the card-mod wouldn’t work though. So we need to theme those colors depending on the domain.

[dolodobendan]

I made a flashing tile card icon:

type: tile
entity: input_boolean.style
style: |
  @keyframes blinker { 50% { opacity: 0; } }
  ha-tile-icon {
    {% if is_state('input_boolean.style', 'on') %}
      animation: blinker 2s linear infinite;
    {% else %}
    {% endif %}
  }

I couldn’t make it spin, though.

Edit: But it doesn’t flash on my phone.

Well, at least the flashing works in the browser:

[Mariusthvdb (Marius)]

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]

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]

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]

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]

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]

@Marin

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.

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]

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]

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]

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]

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]

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:

It works for top level cards:

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]

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]

@Ildar_Gabdullin

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

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]

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

[Ildar_Gabdullin]

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:

1. The theme works fine for Entities.
2. 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]

@tom_l

devs have added the extra shadow root to one of the energy cards but not another:

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

[tom_l]

@Ildar_Gabdullin

since “.card-header” is in shadowRoot - I cannot define a “classy”-style for the header.

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]

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