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

[arganto]

@Mariusthvdb

directly, or as a card-mod-class wont do it

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.

[Mariusthvdb (Marius)]

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

[SteffenDE (Steffen)]

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:

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

[arganto]

@SteffenDE

Many thanks for any help I’m not the best with CSS.

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.

[arganto]

@Mariusthvdb

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:

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.

[Mariusthvdb (Marius)]

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.

[SteffenDE (Steffen)]

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.

[arganto]

@arganto

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

Replace color with padding. Did you test this?

[Ildar_Gabdullin]

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.

[arganto]

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.

[Ildar_Gabdullin]

@arganto

and not manipulating/moving things of the HA dom.

… which seems to be what was before:

[arganto]

@Ildar_Gabdullin

Currently works with "h1.card-header" - which is weird.

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.

[Ildar_Gabdullin]

@arganto

But only with imprtant.

Right, just noticed. Strange.

[Thyraz]

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

[SteffenDE (Steffen)]

Now I get it found the problem. I do not understood the $ an the .: but with these it works now. Here is the code for alle CSS and card-mod beginners:

type: custom:logbook-card
card_mod:
  style:
    $: |
      h1.card-header {
        font-size: 1.2em;
        font-weight: normal;
        padding-bottom: 2px;
        padding-top: 2px;
        padding-left: 12px;
        padding-right: 12px;
      }
    .: |
      .card-content {
        font-size: 0.9em !important;
        font-weight: normal;
        padding-bottom: 2px;
        padding-top: 2px;
        padding-left: 12px;
        padding-right: 12px;
      }
      .date {
        font-size:0.9em !important;
        font-weight: light;
        padding-bottom: 0px;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
        color:var(--secondary-text-color);
      }
      ha-icon { color: red !important }
entity: input_text.it_fritz_lastcaller
title: Eingehende Anrufe der letzten 48h
history: 2
desc: true
collapse: 2
show:
  duration: false
  start_date: true
  end_date: false
  icon: true
  separator: false
no_event: Kein eingehende Anrufe
hiddenState:
  - ''

[arganto]

With .: you are addressing everything directly in ha-card. with $ you are addressing everything in the next shadow root (where here is the h1). And if you have nested shadow roots, you have to dig deeper with more $. Think about the $ as a css path replacement for a shadow root.

Take your own example and the dom and look where the items are the .card-content, etc. and compare it, which what I have written (or with other examples). I know, for starters it is not that easy, but really look at the developer tools and my explanation again (and again and …) and you will get it.

[GoodyGizmos]

Interesting, so walk me through how you would use that tool with this DOM to change the dropdown icon to white.

My understanding is that I’m targeting div class=“mmp_dropdown.” Is that right?

When I use your tool it turns this JS path

document.querySelector(“body > home-assistant”).shadowRoot.querySelector(“home-assistant-main”).shadowRoot.querySelector(“app-drawer-layout > partial-panel-resolver > ha-panel-lovelace”).shadowRoot.querySelector(“hui-root”).shadowRoot.querySelector("#view > hui-view > horizontal-layout").shadowRoot.querySelector("#columns > div > stack-in-card").shadowRoot.querySelector(“ha-card > div > hui-vertical-stack-card”).shadowRoot.querySelector("#root > mini-media-player:nth-child(2)").shadowRoot.querySelector(“ha-card > div.mmp-player > div.mmp-player__core.flex > mmp-powerstrip”).shadowRoot.querySelector(“mmp-source-menu”).shadowRoot.querySelector(“mmp-dropdown”).shadowRoot.querySelector(“div”)

into…

“#view>hui-view>horizontal-layout$#columns>div>stack-in-card$ha-card>div>hui-vertical-stack-card$#root>mini-media-player:nth-child(2)$ha-card>div.mmp-player>div.mmp-player__core.flex>mmp-powerstrip$mmp-source-menu$mmp-dropdown$div”

So, do I paste that entire string and then add {color: white !important;} or do I need to delete everything before ha-card since that’s the “base” element?

[GoodyGizmos]

@Ildar_Gabdullin I think you’re trying to get me to change this part that’s working for the first two lines, but neither icon:

          card_mod: 
            style: |
              .entity__info__name  {color: white !important;}
              .entity__info__media {color: white !important;}

…into something like this, that doesn’t work for any of it:

          card_mod: 
            style:
              .entity__info__name div:
                $: {color: white !important;}
              .entity__info__media div:
                $: {color: white !important;}

So…finding a way to point to the same element (e.g. entity__info__name) but in a format compatible with the other selector syntax (the .: thing). Is that right?

[CDRX2]

That would be option number two, everything after ha-card since that’s your base element.

The tool can help, but there’s still some thinking involved I’m afraid .

[GoodyGizmos]

Yeah, I meant to say that too…format it into the right gibberish of $ | . and : to make it work.

OK, so if I get this out of that tool:

“#view>hui-view>horizontal-layout$#columns>div>stack-in-card$ha-card>div>hui-vertical-stack-card$#root>mini-media-player:nth-child(2)$ha-card>div.mmp-player>div.mmp-player__core.flex>div>div.entity__info__name”

…so, this is the useful snippet:

div.mmp-player>div.mmp-player__core.flex>div>div.entity__info__name"

…and based on looking at examples that are a bunch of nested divs, I would think I would turn that into this to be useful in card-mod:

          card_mod: 
            style:
              .mmp-player div:
                .mmp-player__core.flex div:
                  entity__info__name: {color: white !important;}

I don’t really know what to do with the extra div or the fact that my final element that I’m targetting is a div itself, so of course that didn’t work. So, what am I missing?