Custom classes are not applied to custom:mod-card cards

[teeuwen]

My Home Assistant version: 2023.10.5

My lovelace configuration method (GUI or yaml): yaml

What I am doing: Trying to add a custom class to a custom:layout-card card.

What I expected to happen: The custom class is added to the card, after type-custom-mod-card.

What happened instead: Only type-custom-mod-card is added to the ha-card element. Probably because it overwrites the custom class.

It is important to mention that the custom class does get added to other types of cards, just not to custom:mod-card.

Minimal steps to reproduce:

Theme:

example_theme:
  card-mod-theme: example_theme
  card-mod-card-yaml: |
    .: |
      .custom_class {
        background: red;
      }

Card:

type: custom:mod-card
card: 
  type: vertical-stack
  cards:
    - type: entity
      entity: sensor.time
card_mod:
  class: custom_class

The above does not give the card a red background as expected because the class is not applied to the mod-card.

Error messages from the browser console: None

---

By putting an X in the boxes ([]) below, I indicate that I:

• [X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [X] Have made sure I am using the latest version of the plugin.

• [X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[ildar170975]

Have to confirm. Class is not added to mod-card.

type: custom:mod-card
card:
  type: grid
  cards:
    - type: button
      entity: sun.sun
    - type: entity
      entity: sun.sun
      card_mod:
        class: my_class_2
    - type: entity
      entity: sun.sun
    - type: button
      entity: sun.sun
      card_mod:
        class: my_class_2
card_mod:
  class: my_class_1

  card-mod-card-yaml: |
    .: |
      ha-card.my_class_1 {
        background-color: red !important;
      }
      ha-card.my_class_2 {
        background-color: lightgreen !important;
      }

[chrislange]

I'm having the exact same issue but it appears that it sometimes works and sometimes doesn't.

Upon first loading HA the custom styles are applied:

If I refresh the page they're gone:

The card_mod config I'm using on the entity is below:

- type: entity
    entity: sensor.living_room_sensor_temperature
    state_color: false
    card_mod:
      class: title-right-info
      style: |
        ha-card {
          box-shadow: 0px 0px 0px 0px #ffffff!important;
          border:0px!important;
          background-color:transparent!important;
          color:grey!important;
          display:block!important;
          margin:-50px 0 0 0!important;
          float:right!important;
        }
        .name, .icon {
          display:none!important;
        }

[ildar170975]

Are you sure that your case is related to this issue? We are talking about applying a class to mod-card. What type of card are you talking about? There is no “type” specified in your code, and you have not posted a theme class code. Please check again. It is not good to report unrelated things here.

[damru]

I can confirm the issue as well.

• Theme config:

  AllureV2:
  card-mod-theme: AllureV2
  [...]
  card-mod-card-yaml: |
  .: |
    .navbar {
      backdrop-filter: blur(5px);
      background-color: rgba(var(--contrast1-rgb), 0.8);
      border-radius: var(--ha-card-border-radius) var(--ha-card-border-radius) 0 0;
      box-shadow: var(--c_box-shadow);
      margin: auto;
      max-width: calc(100vw - var(--c_spacing));
      padding: var(--c_spacing) 0;
      width: fit-content;
    }

• Card config

  view_layout:
  grid-area: navbar
  type: custom:mod-card
  card:
  type: custom:decluttering-card
  template: navbar
  variables:
  - active_tab: home
  - active_tab_index: 1
  card_mod:
  class: navbar
  style:
  .: |
    :host {
      bottom: 0 !important;
      position: sticky !important;
      z-index: 1;
    }
  decluttering-card $ layout-card $ grid-layout $: |
    hui-horizontal-stack-card {
      --horizontal-stack-card-gap: 0;
      overflow-x: auto;
    }

• HTML: