Closed junalmeida closed 2 years ago
$
is a card-mod specific selector used to step into a shadow root.
I realize this is not clear enough from the readme and will fix that.
ha-card.type-picture-glance hui-image $ img
will select the img
element, but CSS doesn't understand this.
You'll need to do it stepwise as described in the DOM navigation section of the readme. https://github.com/thomasloven/lovelace-card-mod#dom-navigation
@thomasloven how to use the dom nav section in a theme, since theme does not support card-mod-card-yaml
?
It is not clear to me yet how to do it.
What makes you think that?
Because I tried and it didn't work, and on the docs it says: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#special-theme-variables
Card-mod themes gives you access to three more things to style via card-mod-
and card-mod- -yaml. Those are view, root and more-info.
There is no card-mod-card-yaml
, right?
I can see how that's confusing. But that relates only to the variables which are only usable in a theme.
The sections above that say:
https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#basic-card-mod-theme
To apply the basic functionality of card-mod globally, you can use the
card-mod-<thing>
variables, where<thing>
iscard
,row
,glance
orbadge
.
and https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#navigating-the-shadowdom
To do this, you need to specify the variable
card-mod-<thing>-yaml
,...
I'll try to rewrite the wiki to make this clearer.
Ok thank you, I will try to redo my style here. Congrats for the nice lib.
@thomasloven
I could accomplish what I need with the following in a theme:
card-mod-card-yaml: |
"hui-image":
$: |
div img {
border: solid 1px red;
// removed for brevity
}
".": |
ha-card.type-picture-glance .box {
border: solid 1px blue;
// removed for brevity
}
However I believe the hui-image
shadow root applies to all cards that have images. I'd like to apply it only to type-picture-glance
. Do you have a suggestion? Thank you!
ha-card.type-picture-glance hui-image:
?
I'm looking for customizing cards in HA via a theme (so all cards will have my changes applied).
I currently have:
Which works, I can successfully style the
hui-image
element, but what I'm really trying to reach is the<img>
under the shadow-root ofhui-image
. I can't find a cascade way to reach that.