Sorry, I don’t understand. Could you restate?
I want to style the hui-grid-card, e.g. the background and the border, and not only the content in the grids of the grid card.
Use mod-card, and shadow-root inside of hui-grid-card.
1 Like
Is this the only way?
I read:
** IMPORTANT: *** mod-card is a workaround for the very few cases where normal usage of card-mod does not work. I cannot stress this enough (apparently). If you every find yourself typing type: custom:mod-card, stop, go back, read this readme all the way through again, and realized that in approximately 10 out of 10 cases, you should NOT use mod-card.
and thought, that it should be perhaps possible here without mod-card as well.
The cases aren’t few anymore, they used to be though.
When you hover over ha-markdown-element does it take up the full width? What about when you hover over ha-markdown?
No.
Yes.
Great. Working. But I do not get the h1/title of the grid customized. Any idea to catch this item as well?
type: 'custom:mod-card'
style: |
ha-card {
background: var( --ha-card-background, var(--card-background-color, white) );
border-radius: var(--ha-card-border-radius, 4px);
box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) );
}
h1 {
color: red !important;
}
card:
type: grid
title: Klimaanlagen
2 Likes
Here is entities card. For simplification I removed other entities.
To me i
type: entities
title: Kitchen
entities:
- entity: light.kitchen_worktop
type: 'custom:multiple-entity-row'
state_header: Main
toggle: true
state_color: true
style:
ha-entity-toggle$: |
ha-switch {
padding: 0px !important;
}
entities:
- entity: light.kitchen_worktop_left
name: Left
toggle: true
- entity: light.kitchen_worktop_right
name: Right
toggle: true
Indeed the common ancestor is div.entities_row. It can be accessed from card-level style. but how to traverse all those shadow roots down?
thank you
I did that… but tbh it was written blindly. I would like to understand this syntax and what is going on.
For example what does .: mean or what pipe operator does.
style:
.: |
"ha-entity-toggle":
$: |
ha-switch {
padding: 0px !important;
}
I suppose there are several ways to achieve the same which makes it even harder to find relevant example
Do it two times.
style:
ha-entity-toggle:nth-of-type(1)$: |
ha-switch {
padding: 0px !important;
}
ha-entity-toggle:nth-of-type(2)$: |
ha-switch {
padding: 0px !important;
}
shadow-root as well.
style:
.: |
ha-card {
background: var( --ha-card-background, var(--card-background-color, white) );
border-radius: var(--ha-card-border-radius, 4px);
box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) );
}
hui-grid-card$: |
h1 {
color: red !important;
}
1 Like
thanx, but the way I wrote it works too. But still don’t know why
Hm, ha-card was working without .:
type: 'custom:mod-card'
debug_cardmod: true
style: |
ha-card {
background: var( --ha-card-background, var(--card-background-color, white) );
border-radius: var(--ha-card-border-radius, 4px);
box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) );
}
hui-grid-card$: >
h1 {
color: red !important;
}
but not with as in your example with .:
Nor the hui-grid-card$: element to get it red.
I think I need more working examples like yours (if working at the end of the day) than available here to get used to it. Or a working debug_cardmod: true. Whereever I add this, nothing happens in the console. Where, when and how will anything shown there and then or should be?
This was removed, as indicated by the documentation label of this issue:
Thank you. Only read the documentation and found and still find this there. But good to know. Then I can stop figuring out this.
But without this, most proably I will not get the h1 stuff solved, because your suggestion is not working.
Does this look possible if ha-markdown is the full width?
Shadow-root into ha-markdown (read the docs) and apply width: 100% to ha-markdown-element.
1 Like
I’ve asked already but seems it has been overlooked.
Can you point me to places when I can learn syntax used by card mod from?
I can list some of things I’m using although don’t know why:
When to use | vs >
What is .: operator
how to set multiple independent styles especially if one deserves to use yaml dictionary for shadow root while other don’t. Seems that .: operator has something to do with this.
I din’t found those information in card-mod docs. I suppose some might be yaml operators. But I haven’t found mentioned .: anywhere.
I succeeded with code below. But it was like IQ test: create a code by deducting from scattered pieces all over the forum.
style:
multiple-entity-row:
$:
ha-entity-toggle:
$: |
ha-switch {
padding-top: 0;
}
.: |
state-badge {
line-height: 20px;
height: 30px;
}
.: |
ha-icon {margin-top: 5px}
before:
after:
1 Like