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;
}
Hi,
Anybody able to change the font-family of new titles badges in 2024.10.0, in section view?
I was able to fix the title itself font family, but not able to get to badges.
Meaning is in theme of course.
Thanks in advance.
at the end of the day, I made 2 classes:
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: 24px;
padding: 12px 8px 12px 12px;
}
ha-card.class-section-heading-no-color .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: 24px;
padding: 12px 8px 12px 12px;
}
so I can do a generic:
type: heading
heading: Schakelaars
heading_style: title
card_mod:
class: class-section-heading
but, when I require some colorized notification in that header, I can combine the class with a local card_mod for the colors, depending on a state:
- type: heading
heading: Aanwezigheid
heading_style: title
card_mod:
class: class-section-heading-no-color
style: |
ha-card.type-heading {
{% set thuis = is_state('binary_sensor.familie_thuis','on') %}
background: {{'green' if thuis else 'dimgray'}};
--ha-heading-card-title-color:
{{'var(--active-color)' if thuis else 'black'}} !important;
}
for now this is flexibility enough.
I do still hope to be able to find the element for the individual entity in the badges in the header
Hello and pleaseā¦ is possible styling new badge?
type: entity
show_name: false
show_state: true
show_icon: true
entity: input_boolean.vacuum_automaticke_vysavani_zahajeno
color: ""
card_mod:
style:
/*code*/
HA 2024.10 has added āfrom the topā open animations to all dialog/more-info popup windows (or made them more visible/annoying than before). Is it possible to remove them or adjust animation timing with a card mod theme?
I canāt figure out what I should change.
It could be caused by a slower opening the popups. Check if this happens on a fresh HA setup or in a safe mode.
no, itās new, and though initially I liked it on the restart menu, (for me that is not inside the user side of HA), I have grown to find them truly obnoxious in all confirmation popups etc etc.
There must be some setting we can kill the animation forā¦
letās find the PR that added it
suppose its the move to ha-md-dialog
and
I really do not recall a similar PRā¦ Will check it.
(have not noticed any changes in showing popups by my eyes)
It happens also in safe mode. Even restart options popup appears slowly/animated.
I also found only this md-dialog-box related PR but not sure if it is relatedā¦
yeah its here alright: frontend/src/components/ha-md-dialog.ts at 365b7129767cbc5278fe16eeed71689be771ae42 Ā· home-assistant/frontend Ā· GitHub
1 Like
Animation also makes more info charts to appear laggy. First I thought that my database was working very slowly but itās just the animationā¦ I can also see right side scrollbar appearing and then disappearing when the popup is fully shown. It looks bad.
If this is not only about an animation but also about a general look - would be great to have 2 pictures side-by-side for comparing: old vs new.
(cannot do it myself, left & do not have access to PC)