Sorry I donāt understand what you mean with ācombineā.
About āhui-grid-cardā and ā$ā; when you make a custom:mod-card you should always edit the card this way:
type: custom:mod-card
card:
type: example
card_mod:
style:
Now you have the style section, but when using grid, vertical stacks and so on, the ha-card will only style the āouter cardā. For example, if its a vertical stack, it will style the whole vertical stack but no every single card in it.
But you can get access to cards inside with few little tricks (itās written in the documentation but it is a little bit confusing, I spent 2 days only figuring how to make it work). Thatās the same method to get access to things inside a card, for example to get access to the icon div of a button card.
This is the method:
Use inspect element to get to these informations
This is a custom:mod-card with a horizontal-stack in it, think it as a directory, we are, by default, inside < mod-card> directory thatās why you can access ha-card and type:
style: |
ha-card { code }
but now we want to get access to other things inside right? So first of all we want to keep our access to the directory to style ha-card and we do like this:
style:
.: |
ha-card {code}
That means that it will select the current default directory ( < mod-card> ) and style the divs you want inside that directory.
Letās expand hui-horizontal-stack-card
Now as we said: hui-horizontal-stack-card is inside the default directory, so we can access it via CSS selectors like this:
ha-card hui-horizontal-stack-card {code}
But inside hui-horizontal-stack-card we have our cards that we want to access, the ones we want to edit. What happens now is that our cards are inside whatās called #shadow-root and that means that our CSS selector canāt get inside that, and thatās where $: comes in hand.
Now we got to enter inside the #shadow-root directory, we do that this way:
style:
.: |
ha-card {code}
hui-horizontal-stack-card:
$: |
#root { code }
That means, by starting in our default directory ( < mod-card> ) we have to get inside hui-horizontal-stack-card ā inside a #shadow-root ( $ ) ā and then we can finally access the div with id=ārootā
And thatās where our cards are, we can easily select them with CSS because there are no #shadow-root blocking our selector, so:
style:
.: |
ha-card {code}
hui-horizontal-stack-card:
$: |
#root hui-every_type_of_card_inside_the_stack { code }
And thatās it, when you want to edit ha-card you can do the normal way, when you need to access something deeper just use CSS selector, when you want to access something inside #shadow-root you have to get the right path, when you encounter a block do block_name:
When you encounter a #shadow-root use $:
Chain those the right way inside style section and you can edit everything of your cards.