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