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

Check other examples combining ā€œgo in to shadowRootā€ and ā€œdo not goā€ ways - you will see a pattern like this:

card_mod:
  style:
    element_1 $: |
      element_2 {...}
    .: |
      element_1 {...}

This is the simplest pattern; in a real life a structure may be more complex - but it is of the same pattern (nested, cascaded etc).

If you mean those first 2 line (ā€œ.entity__info__nameā€, ā€¦) - surely these lines are misplaced now, look at the pattern I described above.

1 Like

I think I need some sort of CSS basics tutorial (as it applies to card-mod) to even start to apply your help (which Iā€™m sure is good) to my situation. I need to understand what Iā€™m doing to adapt it rather than trying to comb through a bunch of examples and blindly trying them out. For example, what exactly are $ | .: doing and how do I know when to use them or not?

I have read this many timesā€¦thomasloven/lovelace-card-mod: :small_blue_diamond: Add CSS styles to (almost) any lovelace card (github.com). I donā€™t get how to translate what I see in the DOM Navigator to card-mod speak (CSS?).

I am not a CSS expert at all. Never dealt with a web programming / web design myself.
It is like a neural network - step-by-step educate yourself, find patterns, experiment, ā€¦ so on )))

Check this example:

  - type: entities
    title: Title
    icon: mdi:car
    entities:
      - sun.sun
      - sun.sun
    card_mod:
      style:
        .card-content div:
          hui-text-entity-row $ hui-generic-entity-row $: |
            state-badge {
              color: magenta;
            }
        .: |
          .card-header .name .icon {
            color: cyan;
          }
          .card-header .name {
            color: red;
          }

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

How it works:
1.For EACH element ā€œ.card-content divā€ go in to shadowRoot (deeper ā€¦ deeperā€¦),
2ā€¦and apply a style for ā€œstate-badgeā€ element.
3. Starting from an initial level (i.e. ā€œ.card-content divā€) go to ā€œ.card-headerā€ element, then apply styles for some sub-elements.

ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

As for the ā€œpipeā€ - google about ā€œmultiline yamlā€ and check this code which does the SAME:

type: entities
title: Title
icon: mdi:car
entities:
  - sun.sun
  - sun.sun
card_mod:
  style:
    .card-content div:
      hui-text-entity-row $ hui-generic-entity-row $: 'state-badge {color: magenta;}'
    .: '.card-header .name .icon {color: cyan;} .card-header .name {color: red;}'
3 Likes

Check out the tool that was recommended here. Though itā€™s not exactly a tutorial, it helped me find my way around CSS hierarchy many times.

I have a little card mod which changes the size of the card header - thats all nice.

But I would really like to be able to change all the button cards margin top:

My code so farā€¦

card_mod:
  style:
    hui-vertical-stack-card:
      $: |
        h1.card-header {
          padding: 5px;
          font-size: 15px;
          line-height: 15px;
        }

Can anyone help me - i simply cannot figure out what and how to add it to my existing code?

testing the beautiful sankey-chart card Ive run into an issue not being able to mod the card-header with the regular mod I use throughout my system: Anyone using the Sankey Chart Card? - #102 by Mariusthvdb

SchermĀ­afbeelding 2022-11-28 om 17.08.34
and

but

  style: |
    .card-header {
      background-color: var(--background-color-off);
      color: var(--text-color-off);
      padding-top: 0px;
      padding-bottom: 0px;
      margin: 0px 0px 8px 0px;
    }

directly, or as a card-mod-class wont do it. I can use an entities card around this sankey,

type: entities
title: Energie verbruik
card_mod:
  class: class-header-margin
entities:

  - type: custom:hui-element
    card_type: custom:sankey-chart
    card_mod:
      style: |
        ha-card {
          margin: -8px -16px -16px -16px;
          box-shadow: none:
        }

but would hope that not to be the only possibility.
Please have a look with me how to mod the card-header? thx!

btw @Ildar_Gabdullin ive had issues with history-graph, and re-checked šŸ”¹ Card-mod - Add css styles to any lovelace card - #1524 by Ildar_Gabdullin but

  - type: history-graph
    title: Temperatuur - Verwarming
    card_mod:
      style: |
        .type-history-graph .card-header {
            background-color: var(--background-color-off);
            font-weight: 400;
            font-size: 20px;
            color: var(--text-color-off);
            padding: 0px 12px;
            margin: 0px 0px 16px 0px;
          }

doesnt work either. Did something change in these mods?

You are missing that you are applying to the elements in ha-card, but h1 is in a shadow root below ha-card.

So.

card_mod:
  style:
    $: |
      .card-header {
        color: red !important;
      }

is working here. But whyever only after save, not aways directly in the editor.

In standard cards the h1 is most of the time where you are expecting it and not in the shadow root. Donā€™t know, why the author did this.

What is funny is, that Iā€™m on a (own modificated) old version of sankey-card. There it was working as you did. Then I updated to most recent version and $ was needed. Went back to my version and it is now only wokring with $ as well.

1 Like

thanks, will test.

fwiw, Ive just found out the history-explorer card has the same issue, and I can only do this?:

  - type: entities
    title: 3 Fase totaal
    card_mod:
      class: class-header-margin
    entities:

      - type: custom:hui-element
        card_type: custom:history-explorer-card
        card_mod:
          style: |
            ha-card {
              margin: -8px -16px -16px -16px;
              box-shadow: none:
            }
#   - type: custom:history-explorer-card
#     header: 3 Fase totaal
        header: ' '

to get:

thereā€™s a bit too much white above the graph for my taste, but using header: hide makes the graph overflow the headerā€¦ (ofc, I can adapt my header class, but the thing is that was made to be universally useable. too bad these custom cards all use their own header stylingsā€¦

update

can confirm your fix to work :wink: thanks!

type: custom:sankey-chart
title: Energie verbruik
card_mod:
  style:
    $: |
      .card-header {
         background-color: var(--background-color-off);
         font-weight: 400;
         font-size: 20px;
         color: var(--text-color-off);
         padding: 0px 12px;
         margin: 0px 0px 16px 0px;
       }

and same for:

  - type: custom:history-explorer-card
    header: 3 Fase totaal
    card_mod:
      style:
        $: |
          .card-header {
             background-color: var(--background-color-off);
             font-weight: 400;
             font-size: 20px;
             color: var(--text-color-off);
             padding: 0px 12px;
             margin: 0px 0px 16px 0px;
           }

And for the history-graph! which is a core cardā€¦ so even the HA devs now do thisā€¦

  - type: history-graph
    title: Temperatuur - Verwarming
    card_mod:
      style:
        $: |
          .card-header {
             background-color: var(--background-color-off);
             font-weight: 400;
             font-size: 20px;
             color: var(--text-color-off);
             padding: 0px 12px;
             margin: 0px 0px 16px 0px;
           }
    hours_to_show: 48
    refresh_interval: 60
    entities:

So, because this now is becoming more of a default mod, it seems very useful to write that as an extra card-mod-theme class for custom cards and history-graphs (maybe even others, need to checkā€¦). any chance you could help me do that? I now use:

      card-mod-card-yaml: |
        hui-buttons-header-footer $ hui-buttons-base $ : |
          .ha-scrollbar {
            justify-content: space-evenly;
            height: 50px;
            align-content: center;
            margin: -8px 0px 0px 0px;
            --ha-chip-background-color: var(--primary-color);
            --ha-chip-text-color: var(--card-background-color);
            --paper-item-icon-active-color: red;
            --secondary-text-color: var(--card-background-color);
          }
        hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar ha-chip:
          $: |
            .mdc-chip {
              border: 1px solid green;
              border-radius: var(--ha-card-border-radius);
            }
            .mdc-chip__ripple {
              border-radius: var(--ha-card-border-radius) !important;
            }
        .: |
          ha-card.class-header-margin .card-header {
            background-color: var(--background-color-off);
            font-weight: 400;
            font-size: 20px;
            color: var(--text-color-off);
            padding: 0px 12px;
            margin: 0px 0px 16px 0px;
          }

          ha-card.class-header-no-margin .card-header {
            background-color: var(--background-color-off);
            font-weight: 400;
            font-size: 20px;
            color: var(--text-color-off);
            padding: 0px 12px;
          }

so would need to add your ā€˜shadow root below ha-cardā€™ in the stylings

I tried to create a class-shadow-header-margin:

          $: |
            .class-shadow-header-margin .card-header {
               background-color: var(--background-color-off);
               font-weight: 400;
               font-size: 20px;
               color: var(--text-color-off);
               padding: 0px 12px;
               margin: 0px 0px 16px 0px;
             }

but that wont work like that

Hi,

I try now for ours to reduce the header padding on the custom logbook card, but it do not work, Maybe someone here have a idea. Here ist the card and the space between the title ā€˜Anrufer der letzten 48hā€™ and the calling data is to big:

Screen_20221129-125954

Iā€™m looking at the dev tools of the browser and found the padding (red market) and if I change at the browser it looks perfekt but I could not define at card_mod:

Many thanks for any help Iā€™m not the best with CSS.
Steffen

The answer is more or less exactly only 2 posts above yours. It makes sense to always read here and there and play around a bit.

I donā€™t use theme classes and themes only a bit, so I cannot help here at the moment.

In the meantime I saw this now more or less everywhere in my HA. So either the most recent cad_mod-update is causing this or one of the last HA updates, so it it a change in the framework. Iā€™m sure, that it worked in the past without the shadow root addressing.

a yes, I didnt think of thatā€¦ indeed the card_mod was updated.

my regular mod still works on most cards, and yes, it did work on history-explorer-card and history-graphā€¦ hmm, what to do.

Thanks, I read here and look min 1000 Posts, but if the answer is 2 post above i do not understood ā€¦ Everything I try do not work for the header padding.

Replace color with padding. Did you test this?

There was a change in card-mod. Probably it affected handling the ".card-header".
Currently works with "h1.card-header" - which is weird.

Not to mention moving the ".card-header" element into shadowRoot.

This is for sure the reason. But I always thought, that card-mod is only ingesting the css and not manipulating/moving things of the HA dom. And different to the inline-text, it IS nor in the shadow-root and more difficult to style, because of the addition $. But anyways, found it and will use it ā€¦ until the next change. :joy:

ā€¦ which seems to be what was before:
image

works without h1 as well or only with h1 (if only this is there). But only with imprtant. With both qualifiers as in your example, it is working without important.

Right, just noticed. Strange.

Well, I should have just looked at the card-mod sample themes, as there are plenty examples on how to do this. :roll_eyes: