class isn't applied to card

Mariusthvdb commented 2 years ago

My Home Assistant version: dev20220217

My lovelace configuration method (GUI or yaml): Yaml

What I am doing:

trying to follow the docs https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#classes and set a 2 classes for the header in my cards. I hope to replace

  card-mod-card: |
    .card-header {
      font-weight: 300;
      letter-spacing: 0px;
      /*background: radial-gradient(var(--primary-color),var(--card-background-color));*/
    }
# End of code

above code has been working fine, in addition to what I add to all cards:

card_mod:
  style: |
    .card-header {
      background-color: var(--background-color-off);
      color: var(--text-color-off);
      padding-top: 0px;
      padding-bottom: 0px;
      margin: 0px 0px 16px 0px;
    }

I realize the docs misses the card_mod: before the class, as the other issue in this repo found out, and several posts in the community also use. thats why I have added that below:

What I expected to happen:

have the classes be applied What happened instead:

exactly nothing....

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
  card-mod-card: |

    .card-header(.class-header-margin) {
      font-weight: 300;
      letter-spacing: 0px;
      background-color: var(--background-color-off);
      color: var(--text-color-off);
      padding-top: 0px;
      padding-bottom: 0px;
      margin: 0px 0px 16px 0px;
    }

    .card-header(.class-header-no-margin) {
      font-weight: 300;
      letter-spacing: 0px;
      background-color: var(--background-color-off);
      color: var(--text-color-off);
      padding-top: 0px;
      padding-bottom: 0px;
    }

And card config:

type: entities
title: Lovelace settings
show_header_toggle: false
card_mod:
  class: class-header-no-margin

Error messages from the browser console: No error

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 commented 2 years ago

Answered here: https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/1051?u=ildar_gabdullin

Mariusthvdb commented 2 years ago

this is working now:

# set 2 classes for card-headers, with and without margin (used for starting entities
# cards with fold-entity-rows)
    card-mod-card-yaml: |
      .: |
        ha-card.class-header-margin .card-header {
          background-color: var(--background-color-off);
          color: var(--text-color-off);
          padding-top: 0px;
          padding-bottom: 0px;
          margin: 0px 0px 16px 0px;
        }

        ha-card.class-header-no-margin .card-header {
          background-color: var(--background-color-off);
          color: var(--text-color-off);
          padding-top: 0px;
          padding-bottom: 0px;
        }

        /* and set an extra mod for all cards without the classes by default */
        ha-card .card-header {
          font-weight: 300;
          letter-spacing: 0px;
          /*background: radial-gradient(var(--primary-color),var(--card-background-color));*/
        }

allowing to do:

type: entities
title: Z-wave devices
card_mod:
  class: class-header-no-margin
  style: |
    .card-content {
      margin-top: 0px;
      max-height: 500px;
      overflow-y: scroll;
    }

and setting a default to any card without either classes.

closing as this is now resolved. Thanks @ildar170975

thomasloven / lovelace-card-mod

class isn't applied to card #179

Error messages from the browser console: No error