šŸ”¹ Card-mod - Add css styles to any lovelace card

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

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. :smirk_cat:

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

1 Like

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.

1 Like

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!

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.

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

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.

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

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

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.

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.

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.
:roll_eyes:

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

I finished a theme for your case.
Now busy with adding a ā€œinline-card-redā€ class, coming soonā€¦

1 Like

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.

Cannot check it, have no power sensors unfortunately, here is Middle Ages stillā€¦

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.

The whole problem with ā€œ.card-headerā€ inside shadowRoot seems strange.
I wonder is there any chance of asking Devs to fix itā€¦

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.

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.