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.
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?).
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;}'
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
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.
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
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
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. 
ā¦ which seems to be what was before:
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. 
