🔹 Card-mod - Super-charge your themes!

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

[TimoJ]

It happens also in safe mode. Even restart options popup appears slowly/animated.

[Ildar_Gabdullin]

I also found only this md-dialog-box related PR but not sure if it is related…

[Mariusthvdb (Marius)]

yeah its here alright: frontend/src/components/ha-md-dialog.ts at 365b7129767cbc5278fe16eeed71689be771ae42 · home-assistant/frontend · GitHub

[TimoJ]

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.

[Ildar_Gabdullin]

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)

[Mariusthvdb (Marius)]

at least I have my squared boxes back

    md-dialog-container-shape-start-start: var(--ha-card-border-radius)
    md-dialog-container-shape-start-end: var(--ha-card-border-radius)
    md-dialog-container-shape-end-start: var(--ha-card-border-radius)
    md-dialog-container-shape-end-end: var(--ha-card-border-radius)

no other overall variable, had to set all corners…

the silly animation is still there though

[psyspy]

Hello! I am trying to increase the icon size of the built-in weather card (forecast) using card mod. I am a newbie with CSS. I went to the design inspector in Firefox and inspected the first icon on the card. Here’s the screenshot:

If I change the width and height of .forecast-image-icon to 64px in the design inspector, it works as intended. All the forecast icons get bigger. I have another card for weekly forecast. It’s icons get bigger too, which is fine. I think I updated the .forecast-image-icon class attributes globally.

Anyways, I tried this with the card mod:

show_current: false
show_forecast: true
type: weather-forecast
entity: weather.blah
forecast_type: hourly
theme: Animated Weather Icons Filled
card_mod:
  style: |
    ha-card div.forecast-image-icon 
    {
      width: 64px;
      height: 64px;
    }

It didn’t work. I can’t post more pictures since I am a new user. Let me post them in a new post. I appreciate any help.

[psyspy]

Here’s the image after my card mod changes:

Not what I expected.