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
- | vs >: https://www.baeldung.com/yaml-multi-line
-
.:: The colon at the end is normal. Just.remains, which means current directory in OSes, which can also be used to mean āhereā. It means in this case āfunction as if I was usingstyle: |in this blockā for card-mod. - How to set multiple independent styles: Use
.:. Example:
type: picture-entity
entity: light.floor_lamp_2
image: 'https://demo.home-assistant.io/stub_config/bedroom.png'
style:
.: |
ha-card {
box-shadow: 10px 10px black;
}
hui-image$: |
img {
filter: invert(1);
}