Issue styling Card Header

[Jab2870]

My Home Assistant version: 2024.3.0

My lovelace configuration method (GUI or yaml): Mixture of both

What I am doing: Trying to style card-header

What I expected to happen: header to go green

What happened instead: Nothing

Minimal steps to reproduce:

The following is mostly taken from one of the test cases in the repo, although for a different card type

type: custom:hourly-weather
entity: weather.pirateweather
icons: true
show_precipitation_amounts: true
show_precipitation_probability: true
card_mod:
  style: |
    ha-card {
      color: red;
    }
    .card-header {
      color: green;
    }

I would expect the card-header here to be green.

Confirmation here that the card is using the standard "card-header" class which I would have thought the css selector would be selecting.

Error messages from the browser console: none relevant

---

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]

although for a different card type

And you believe that the code for card_X should work for card_Y...

[Jab2870]

although for a different card type

And you believe that the code for card_X should work for card_Y...

Obviously not in all cases, no, although I had assumed that the card-header, an element that is used consistently across the majority of cards would be. Especially given the card-header is styled in most (maybe all) of the themes documented.

[ildar170975]

In many cards a header is inside shadowRoot.

Especially given the card-header is styled in most (maybe all) of the themes documented.

Styling by changing a theme css variable is not same as styling by an explicitly defined DOM path & css attributes. Css vars may be defined on a ha-card level & sometimes it is quite sufficient.

[Jab2870]

thanks for your points.

For what it is worth, I thought it might be to do with the shadow root so tried using the $ like so:

 style:
    .: |
      ha-card {
        color: red;
      }
    "ha-card $": |
      .card-header{
        color: blue;
      }

However, in order to avoid turning a bug report into a support ticket, is there somewhere you could point me towards in order to get help?

[ildar170975]

To access shadowRoot inside ha-card, try this:

card_mod: 
  style:
    .: |
      ha-card {
       ...
      }
    $: |
      .card-header {
        ...
      }

in order to avoid turning a bug report into a support ticket, is there somewhere you could point me towards in order to get help?

The "issues" in this repo is mainly for bugs & FRs. For questions I suggest to use HA community (https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744).