This works:
card-mod-view-yaml: |
hui-sections-view $: |
hui-view-badges {
margin-bottom: 200px !important;
background-color: yellow;
}
2 Likes
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.
1 Like
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
1 Like
haha right, you updated
this has to be the most complex card-mod setting weāve encountered until nowā¦
will test it soon, but truly hope we will be able to do
type: heading
card_mod:
style: |
ha-card {
background: var(--card-background-color);
}
soonā¦
or its theme version in our themes ofc, as a generic theme variable there would be most efficient
1 Like
This works:
type: heading
heading: Kitchen
heading_style: title
card_mod:
style: |
ha-card.type-heading {
background: var(--card-background-color) !important;
}
(!important only needed if overriding a card-mod theme.)
1 Like
nice!
almost there now:
- type: heading
heading: Speciale scenes
heading_style: title
card_mod:
style: |
ha-card.type-heading {
background: var(--background-color-off);
--ha-heading-card-title-color: var(--text-color-off) !important;
--ha-heading-card-title-font-size: 20px !important;
--ha-heading-card-title-font-weight: 400;
padding: 12px;
}
.content {
justify-self: left !important;
}
is the styling I always use for my header custom buttons,
button_default_title:
# aspect_ratio: 12/1
show_state: false
show_icon: false
tap_action:
action: none
styles:
card:
# - border: none
- background: var(--background-color-off)
- color: var(--text-color-off)
- font-size: 20px #24px
- font-weight: 400 #300
#- letter-spacing: 0px
# - font-weight: bold
- padding: 12px
# - pointer-events: none
name:
- justify-self: left
or type: entities cards via card-mod theme class:
ha-card.class-header-margin .card-header {
background: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
and this is an 98% succes (top is the new section type: heading, bottom is type: custom:button-card:
on the theme subject:
I had to take out the card-mod theme variables, because even the !important did not override that, card-mod-theme is more powerful, or, is applied later, which ever it is.
the margins arenāt an exact copy yet. I suppose I need to touch the .content with justify-self: left but this doesnt do it. Maybe I can somehow get it in the main ha-card.type-heading style differently, needs more study
Also now, the 2 entities I do have in there need customizing, as those colors are not inherited by the mod.
If @Ildar_Gabdullin reads this, maybe we need a separate post for the new family of mods? Both as card-mod, and here, as card-mod theming mods?
suppose its good to do so soon, because otherwise the posts will get scattered
update
adding height, and a bit more detailed padding does the job for now (for the bar and title, not yet for the embedded entities).
- type: heading
heading: Speciale Scenes
heading_style: title
card_mod:
style: |
ha-card.type-heading {
background: var(--background-color-off);
--ha-heading-card-title-color: var(--text-color-off) !important;
--ha-heading-card-title-font-size: 20px !important;
--ha-heading-card-title-font-weight: 400;
height: 50px;
padding: 12px 0 12px 8px;
}
So next up is getting this into a class, and set it to the headings that dont need entities):
ha-card.class-section-heading .container {
background: var(--background-color-off);
--ha-heading-card-title-color: var(--text-color-off) !important;
--ha-heading-card-title-font-size: 20px !important;
--ha-heading-card-title-font-weight: 400;
height: 50px;
padding: 12px 0 12px 8px;
}
which again is close, but not yet thereā¦ huh, why dont the height and padding get applied? am I targeting the wrong element?:
- type: heading
heading: Speciale Scenes
heading_style: title
card_mod:
class: class-section-heading
# style: |
# ha-card.type-heading {
# background: var(--background-color-off);
# --ha-heading-card-title-color: var(--text-color-off) !important;
# --ha-heading-card-title-font-size: 20px !important;
# --ha-heading-card-title-font-weight: 400;
# height: 50px;
# padding: 12px 0 12px 8px;
# }
well, they did get applied, but somehow the calculation is different, because it targets a dfferent element apparently. This works:
ha-card.class-section-heading .container {
background: red;
--ha-heading-card-title-color: var(--text-color-off) !important;
--ha-heading-card-title-font-size: 20px !important;
--ha-heading-card-title-font-weight: 400;
height: 24px;
padding: 12px 8px 12px 12px;
}
and Ive set the background to red in this test to be able to see the right padding, which I also set as an extra guard to fit the embedded entities:
It;s an exact match now, and I hope Ive got the first functional card-mod theming class in my config
now we know how to mod the colors, we can also template themā¦ a whole new world of options lies ahead
1 Like
Is there any way, to style all hui-section containers with a theme?
I tested it with a few modified examples, but none of them worked.
My last try:
room_theme:
card-mod-theme: room_theme
card-mod-view-yaml: |
hui-section$: |
#root {
border: 1px solid rgb(0, 0, 0) !important;
}