looking to control the margin-bottom under the badges in a section view,
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges {
margin-bottom: 100px;
}
nothing happeningā¦ what am I missing here?
The flex direction column works as hoped for in sections view with that mod, but I must have cut the wrong bit if the Dom path now.
I am not using sections)))
You have a missing ā|ā. Could be a reason.
you mean this?
card-mod-view-yaml:
hui-sections-view: |
$: |
hui-view-badges {
margin-bottom: 100px;
}
I tried that but it does not work.
this is the dom path:
and the margin-bottom: 0 is set there in Inspector is the correct spot, and working in the browser
card-mod-view-yaml: |
hui-sections-view:
$: |
hui-view-badges {
margin-bottom: 100px;
}
Did you try this? (I think that is maybe what Ildar meant)
Or perhaps this?:
card-mod-view-yaml: |
hui-sections-view $: |
hui-view-badges {
margin-bottom: 100px;
}
Like Ildar, I donāt use sections so havenāt tested any of thisā¦
yeah, I did, and thanks btw.
neither work though.
also, be careful with these, I had a full meltdown of the Frontend after having made a syntax error and restartingā¦
This works:
card-mod-view-yaml: |
hui-sections-view $: |
hui-view-badges {
margin-bottom: 200px !important;
background-color: yellow;
}
right, that is the one I missed in my attemptsā¦
great. let me post this in the current beta, would be nice it you added it in the āissueā that was raised for it
would be good to spread the fact we can adjust it already
btw, what is remarkable here, is that even when the margin is set , the background does not follow that margin.
suppose it would be great too if we could fill that void too now, as if it were the background of the badges, and not of the view
Can someone point me in the right direction? How would I formulate this argument to enforce both the container mods as well as the ha-card? I canāt seem to get the right syntax to have both in effect at the same time.
card_mod:
style:
mushroom-state-info$: |
.container {
flex-direction: row !important;
align-items: baseline;
gap: 10px;
mushroom-state-info$: |
--card-primary-font-size: 20px;
--card-secondary-font-size: 15px;
}
ha-card {
background-color: rgba(0,0,0,0);
box-shadow: none;
border-style: hidden;
position: absolute;
left: 0px;
top: -40px;
width: 100%;
height: 20%;
}
This works for me:
card-mod-view-yaml: |
.: |
hui-sections-view {
background: purple !important;
}
$:
.: |
hui-view-badges {
margin-bottom: 100px !important;
}
Perhaps I misunderstood your comment:
Bbtw, what is remarkable here, is that even when the margin is set , the background does not follow that margin.
suppose it would be great too if we could fill that void too now, as if it were the background of the badges, and not of the view
I thought you were trying to fill the background including the margin?
Edit: Actually, I think this is wrong:
card-mod-view-yaml: |
.: |
hui-sections-view {
background: purple !important;
}
hui-sections-view:
$:
.: |
hui-view-badges {
margin-bottom: 100px !important;
background: red !important;
}
And maybe it should be this instead?
card-mod-view-yaml: |
.: |
hui-sections-view {
background: purple !important;
}
hui-sections-view:
$:
hui-view-badges:
$:
ha-sortable:
.: |
div.badges {
background: red !important;
padding-bottom: 50px !important;
}
ofc, sorry, I missed what you were trying to help me withā¦ sorry.
yes, I was figuring out how to set that margin, And color the background in 1 go.
this would set the margin
card-mod-view-yaml: |
hui-sections-view $: |
hui-view-badges {
margin-bottom: 50px !important;
background-color: yellow;
}
adding a padding to the div.badges is another way of moving that, let me give it a try
thx
edit
yers, I can see the background and padding being applied using:
hui-sections-view $:
hui-view-badges $:
ha-sortable: |
div.badges {
background: red !important;
padding-bottom: 50px !important;
}
this does not stick in Safari however, upon reload the mod is gone. Chrome does reload the mod.
changing the path to your format is more robust:
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges:
$:
ha-sortable: |
div.badges {
background: red !important;
padding-bottom: 50px !important;
}
btw, remarkable to note is that the sections background is also shown behind the badges background.
and, the !important can be left out I now see:
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges:
$:
ha-sortable: |
div.badges {
background: red;
padding-bottom: 50px;
}
works just as well
this might be even better:
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges:
$:
ha-sortable: |
div.badges {
background: red;
padding-bottom: 0px;
margin-bottom: -16px !important;
}
because the margin was not robust in the other mods, this seems to hold in Safari And Chrome 
new challengeā¦
sinwe have several theme variables for the header font styles in the sections I looked for a background variable, but that has not been added yet. would love to be bale to style that in my themed colors (now its always transparent, and lacks great visibility because of that)
see
for the Dom path and element to customize.
would appreciate the steps to that, my experiments fail up to now. given the post above on the badges background, my hopes are up we can also customize this header background
Do you mean this?
card-mod-view-yaml: |
.: |
hui-sections-view {
background: purple !important;
}
hui-sections-view:
$:
ha-sortable:
div:
div:
div.section-header: |
h2.section-title {
font-size: 40px;
font-family: serif;
background: orange;
}
Iām not seeing the same element you have. 
But maybe Iām in the wrong spot.
So, weird oneā¦
I am wondering if there is some way to combine the card and theme optionsā¦ Like if I am in a card that does not accept a theme (as the entities card does for instance) and I want to apply a card-mod-theme I created to it, is there any way to nest that card inside card_mod as usual but then have it look to the already created card-mod-theme I created for other cards?
Like the battery-state-card doesnt take a theme, and so I would have to card mod it with the lengthy css in the card itself. But could I card_mod and reference the card_mod_theme somehowā¦ or wrap the card in the custom card mod card and then apply the theme. I know some of it may not translate and would need firther editing, but this could still save a lot of lines.
Thanks
that doesnt work here, we should target the hui-heading-card, and probably the ha-card in it.
Ive tried to set a direct card-mod on the type: heading, as that would be great, but alas, no effect either
Oh, I realize now youāre on 2024.10! I will need to update before I can dig into that.
Hi Gilles,
please move your post to the card-mod thread, this particular thread is about card-mod theme, and you need per card mods
hui-sections-view:
$:
ha-sortable:
div:
div:
hui-section:
hui-grid-section:
$:
ha-sortable:
div:
div:
hui-card:
hui-heading-card:
$:
.: |
ha-card {
background: orange !important;
}
ha-card:
div:
div: |
p {
font-family: serif !important;
font-size: 50px;
padding: 10px;
}
Ho sorry !
Will do !
Thanks for the heads up