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