fberbert
(Fábio)
July 21, 2022, 7:06am
1
Newbie question here. I am trying to style a card-mod. The code below works for my card, changing the color of all text inside:
card_mod:
style: |
:host {
color: yellow;
}
But I want to be more specific, like this (doesn’t work):
card_mod:
style: |
.myClassName {
color: yellow;
}
h1 { ... }
h1.anotherClassName { ... }
What am I missing? I read the docs and tried some variations of “$” and so, without success. I didn’t understand.
Thank you.
Search the card-mod thread and take the link to the great examples in the first post from Ildar.
1 Like
Can someone please share that link here? I can’t find the the thread @arganto mentioned or any resources documenting the specific selector syntax that card-mod uses.
I was able to find most of the info I need in the lovelace-card-mod readme (usage section):
# card-mod 3
Allows you to apply CSS styles to various elements of the Home Assistant frontend.
## Installing
[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/hacs/integration)
Install using HACS or [see this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins).
### Performance improvements
While card-mod can be installed as a [lovelace resource](https://www.home-assistant.io/lovelace/dashboards/#resources), some functionality will benefit greatly from it being installed as a [frontend module](https://www.home-assistant.io/integrations/frontend/#extra_module_url) instead.
To do that, add the following to your `configuration.yaml` file and restart Home Assistant:
```yaml
frontend:
extra_module_url:
- /local/card-mod.js
This file has been truncated. show original
You are asking for this link ?