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

[GoodyGizmos]

Ah, I honestly didn’t see that there was a sub-thread dedicated to mmp. I was using some of the other ones as reference. But, I’m halfway there.

I’m not getting the mute button to change.

card_mod:
  style: |
    .entity__info__name  {color: white !important;}
    .entity__info__media {color: white !important;}
    .mmp-player .mmp-player__adds:
      mmp-media-controls:
        $:
          .mmp-media-controls__volume.flex:
            ha-icon-button:
              $: |
                mwc-icon-button {
                  color: white !important;
                }

Once I get that right, I think I’ll be able to reverse-engineer the DOM for the dropdown and adapt the mute controls as well, but if you have an idea what that should look like, that would also be helpful.

Here’s the dom hierarchy for the dropdown:

As a learning point, since CSS is so hierarchical, why can’t I just specify a single color for all things within the card using a single variable? That’s what I thought pointing at ha-card would accomplish initially.

[Ildar_Gabdullin]

@GoodyGizmos

card_mod:
  style: |

Probably because you made an error here.

@GoodyGizmos

why can’t I just specify a single color for all things within the card using a single variable?

May be, I have not tried this too hard - I am not using this card.
But I doubt that there is a variable for a color for a particular button, only for all buttons probably…

[GoodyGizmos]

Sure enough, removing the pipe makes the mute button white, but then both text fields revert back to dark. I don’t really know the purpose of the pipe. How do you use it on only a part of the CSS?

[Ildar_Gabdullin]

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

@GoodyGizmos

but then both text fields revert back to dark.

If you mean those first 2 line (“.entity__info__name”, …) - surely these lines are misplaced now, look at the pattern I described above.

[GoodyGizmos]

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: 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?).

[Ildar_Gabdullin]

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;}'

[CDRX2]

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.

[cvester]

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?

[Mariusthvdb (Marius)]

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

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?

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