how oddā¦
if I use this decluttering template:
card:
type: custom:auto-entities
card:
type: entities
# title: '[[area_name]]'
show_header_toggle: false
entities:
- type: custom:hui-element
card_type: area
card_mod:
style:
div#container: |
hui-image {
box-shadow: none;
margin: -16px -16px 0x -16px;
}
area: '[[area_id]]'
filter:
template: >
{{'[[area_id]]'|area_entities}}
# sort:
# method: domain
with the bottom sort, the Area card gets added at the bottom, and I can simply mod the margins.
{
box-shadow: none;
margin: 0px -16px -16x -16px;
}
and the Area card is spread to touch the card bordered perfectly.
However, if I use the above config, drop the sort, and let the Area card be listed atop (what I want) I can not mod the marginsā¦
tried to do this:
card_mod:
style:
div#container: |
hui-image {
box-shadow: none;
margin: -16px -16px 0x -16px;
}
which I think is what inspector tells me to do, but no effect at all.
using
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -16px -16px 0x -16px;
}
at least takes out the box-shadow, so Ill leave that in . Now how to spread the image to use -16px 16px 0px -16px?
ofc, I can make Ildar happy and use stack-in-card (and re-instate the sort!) :
card:
type: custom:stack-in-card
cards:
- type: area
# card_mod:
# style: |
# ha-card {
# box-shadow: none;
# margin: -16px -16px 0x -16px;
# }
area: '[[area_id]]'
- type: custom:auto-entities
card:
type: entities
# title: '[[area_name]]'
show_header_toggle: false
filter:
template: >
{{'[[area_id]]'|area_entities}}
sort:
method: domain
reverse: true
but thats a bit besides the challenge 
Also that wont work when I uses them in folds:
this is the best overall config, only wish I could margin the items in the foldsā¦the div#items doesnt do anythingā¦
entities:
- type: custom:decluttering-card
template: areas
variables:
- area_name: Keuken
- area_id: kitchen
- type: custom:decluttering-card
template: areas
variables:
- area_name: Library
- area_id: library
with:
card:
type: custom:fold-entity-row
head:
type: section
label: '[[area_name]]'
# card_mod:
# style: |
# div#items {
# margin: 0px -16px 0px -16px;
# }
padding: 0
entities:
- type: custom:hui-element
card_type: area
card_mod:
style: |
ha-card {
box-shadow: none;
}
area: '[[area_id]]'
- type: custom:auto-entities
card:
type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
}
show_header_toggle: false
filter:
template: >
{{'[[area_id]]'|area_entities}}
sort:
method: domain
reverse: true
