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

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

[Ildar_Gabdullin]

@GoodyGizmos

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

No, the syntax is wrong, check this

[Ildar_Gabdullin]

@GoodyGizmos

entity__info__name

W/o checking other stuff, at least an error is here - class names must start with “.”, i.e. “.entity__info__name”