🔹 Card-mod - Super-charge your themes!

[Mariusthvdb (Marius)]

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

[iamjosh]

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.

[Samedarkclouds]

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

[Mariusthvdb (Marius)]

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

[iamjosh]

Oh, I realize now you’re on 2024.10! I will need to update before I can dig into that.

[Mariusthvdb (Marius)]

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

[iamjosh]

      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;
                                        }  

[gilles.blampain]

Ho sorry !
Will do !
Thanks for the heads up

[Mariusthvdb (Marius)]

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

[iamjosh]

@Mariusthvdb

card_mod:
  style: |
    ha-card {
      background: var(--card-background-color);
    }

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

[Mariusthvdb (Marius)]

@iamjosh

type: heading
heading: Kitchen
heading_style: title
card_mod:
  style: |
    ha-card.type-heading {
      background: var(--card-background-color) !important;
    }

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

[NightWatcher (Bjoern)]

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;
      }

[Ildar_Gabdullin]

@Mariusthvdb

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?

Was already done for “normal” card-mod.
Only variables were not mentioned there.

[dmatik]

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.

[Mariusthvdb (Marius)]

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

[matata (Martin Prochazka)]

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*/

[TimoJ]

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.

[Ildar_Gabdullin]

@TimoJ

open animations to all dialog/more-info popup windows

It could be caused by a slower opening the popups. Check if this happens on a fresh HA setup or in a safe mode.

[Mariusthvdb (Marius)]

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

Migrate dialog restart to ha-md-dialog

and

Migrate dialog-box to ha-md-dialog

[Ildar_Gabdullin]

I really do not recall a similar PR… Will check it.
(have not noticed any changes in showing popups by my eyes)