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

Post a screenshot of the cart and point at the element you want to color.

Hi,

and thank you very much for your many samples with card-mod.

Now I try to to mod the custom logbook card and get the fonts smaller but not the space between header and the logbook data?

Screen_20221128-182536

Very nice would be coloring of the icons from the entity state.

Any idea?
Steffen

Tanke this as stating point

    card_mod:
      style: |
        h1 { 
          display:none;
        }
        .date {
          color:var(--secondary-text-color);
          font-size:12px !important;
        }
        .duration {
          font-size:14px !important;
          font-style: initial !important;
        }
        .key, .value {
          font-size:12px !important;
          color:var(--secondary-text-color);      
        }
        .item-content span:first-child {
          display: inline-block;
          width: 80%;
        }
        ha-icon { color: red !important }

And use the developer tools to find the right (other) things to adapt accoring to this exmaples.

As I currently have the card configured, I need to be able to change the font to a lighter color for the card name, source name, mute, and source dropdown arrow.

Sorry, not using this card.

Described.

What is that?
Also, you are using a “custom skin” or something - which makes your card looking absolutely differently from a default look. I hardly can see other elements you want to style.

Thank you, coloring the icon is working, but reduce the border and space between the parts I will look at the dev tools.

OK, thank you. I have study many of your post and there are card-mod parts to the logbook card too. Thats the cause I ask, but I will try further.

Standard Logbook card, not the custom one.

What do you mean by “described?” The source dropdown arrow is an arrow that points downward that, when clicked, shows all of the media_player’s sources in a dropdown menu.

Yes, I have a theme applied that works well for most of my cards. But in light mode, this one is unreadable, so I’m trying to change the font color for just this card.

Means - “described in the post for mini-media-player” (1st post → link at the bottom).

Try to play with styles from the mentioned post with a default theme - see if your elements changed; then test it with your custom theme.

I do not have it on my card ))). Probably to show it I need to specify smth in my card’s code? Since I am not using this card - I do not know how to display it.

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.

Probably because you made an error here.

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…

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?

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?