Just a quick follow up - I tested card-loader as you suggested and the end result was even worse than I expected. When I add card-loader to my decluttering-card template, the aforementioned gap would always show up. No amount of refreshing, cache purging, or private browsing would make the gap disappear. I also tested card-loader directly in the card declaration itself but the cards wouldn’t load at all, often times showing the Red Card of Fail and stating “Still waiting on decluttering-card” or Still waiting on conditional card’.
Ok I don’t know what wrong with my config this is what I trying to duplicate.
- type: custom:banner-card
background: "#1F8A3C"
heading: "\U0001F6CB Green House"
link: /lovelace/0
entities:
- entity: automation.green_house
name: Green House Water
value: mdi:water
action:
######### timer ########
# entities[].action: automation.green_house
- entity: input_number.sprinkler_timer_slider_1
name: Timer
an this what I got…
- url: /community_plugin/decluttering-card/decluttering-card.js
type: module
decluttering_templates:
test: # This is the name of a template
card:
type: custom:banner-card
background: "#1F8A3C"
link: /lovelace/0
value: mdi:water
action:
heading: '[[heading]]'
entities:
- entity: 'automation.[[enity_1]]'
name: '[[enity_1_name]]'
- entity: 'input_number.sprinkler_timer_slider_[[enity_2]]'
name: Timer
and
- type: custom:decluttering-card
template: test
variables:
- heading: green house
- enity_1: green_house
- entiy_1_name: green house
- enity_2: 1
Thanks 
You have a typo here. It should be enity_1_name.
And put quotes around the '1'
probably not of practical necessity (we can call variables any name we want) but shouldn’t you use entity_xxx_xx, instead of enity_xxx_xx throughout. Seems a typo being propagated…
i fix and made the code better for me to read and I got it work but the icon not show just an on.
decluttering_templates:
sprinkler: # This is the name of a template
card:
type: custom:banner-card
background: "#1F8A3C"
link: /lovelace/0
value: mdi:water
heading: '[[heading]]'
entities:
- entity: '[[sprinkler]]'
name: '[[sprinkler_name]]'
- entity: '[[sprinkler_timer_slider]]'
name: Timer
- type: custom:decluttering-card
template: sprinkler
variables:
- heading: green house
- sprinkler: automation.green_house
- sprinkler_name: Green House
- sprinkler_timer_slider: input_number.sprinkler_timer_slider_1
Your config is wrong for banner-card.
value: mdi:water should be with the entity, not at the top level.
oh was just looking at that sorry
one more
card:
type: custom:banner-card
background: "#1F8A3C"
link: /lovelace/0
heading: '"\U0001F6CB [[heading]]"'
have I miss something trying to get the little house next to green house
I don’t know if the emoji code is correct but can strart by deleting the outer single quotes from your heading and see what happens.
it work
heading: "\U0001F6CB [[heading]]"
thanks you
p.s do we need outer single quotes on any of them???
Yes, when the first characters are [[ and last are ]]
ok got ya
so I would do this
- entity: '[[sprinkler]]'
name: '[[sprinkler_name]]'
to
- entity: automation.[[sprinkler]]
name: '[[sprinkler_name]]'
I don’t know if this belongs here or in the button card? and there is a lot of code in this post so please bear with me. It is two versions of the same thing. One works using the button card the other doesn’t using the de-cluttering templates. (I stole the idea from someone else a long time ago but can’t remember who).
So…
This works to give a nice header with a ‘settings’ button at the side:
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
label: "-- Hall --"
show_name: false
show_icon: false
show_label: true
styles:
card:
- height: 50px
# - background: linear-gradient(to right, rgba(255,255,20,0.45) 0%,rgba(255,255,20,0.3) 60%,rgba(255,255,20,0) 85%)
- background: linear-gradient(to right, var(--paper-card-background-color) 0%, rgba(255,255,255,0.55) 70%, rgba(255,255,255,0) 90%)
- --ha-card-box-shadow: 'none'
label:
- justify-self: start
- padding-left: 10px
- font-size: 18pt
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 2px
- type: custom:button-card
icon: mdi:settings
show_name: false
tap_action:
action: call-service
service: homeassistant.turn_on
service_data:
entity_id: entity
styles:
card:
- border-radius: 50%
- height: 40px
- width: 40px
- background: rgba(255,255,255,0.45)
- top: 5px
icon:
- color: gray
- width: 35px
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 2px
- type: custom:banner-card
background: "#EDE7B0"
heading: "\U0001F6CB Hall"
link: /lovelace/0
entities:
- entity: group.hall_lights
name: Lights
- entity: binary_sensor.front_door
name: Door
- entity: sensor.hall_temperature
name: Temperature
But this doesn’t work, using the de-cluttering templates:
First the view itself,
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: simple_header
variables:
- label: -- Hall --
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 2px
- type: custom:decluttering-card
template: simple_header_options_button
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 2px
then the de-cluttering templates,
#==================
#=== Simple Header
#==================
simple_header:
card:
type: custom:button-card
label: '[[label]]'
show_label: true
aspect_ratio: 9/1
# color_type: label-card
styles:
card:
- height: 50px
- background: linear-gradient(to right, var(--paper-card-background-color) 0%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0) 90%)
- --ha-card-box-shadow: 'none'
# - background-color: var(--paper-card-background-color)
label:
- justify-self: start
- padding-left: 20px
- font-size: 24px
#=================================
#=== Simple Header Options Button
#=================================
simple_header_options_button:
default:
icon: mdi:settings
lock: false
lock_color: var(--primary-text-color)
tap_action: more-info
card:
type: custom:button-card
icon: '[[icon]]'
show_name: false
tap_action:
action: '[[tap_action]]'
lock: '[[lock]]'
styles:
card:
- border-radius: 50%
- height: 50px
- width: 50px
- background: rgba(255,255,255,0.45)
lock:
- color: '[[lock_color]]'
icon:
- color: gray
- width: 35px
For bonus points, why does the options button have a lock when the default is ‘false’?
So, there are multiple things here:
- the lock thingy seems like a bug with booleans on decluttering-card
it should work, but apparently not… Could you open a bug on github please? - the second problem is that button-card’s fixed width feature (specifying
width: 50px) is a hack and it doesn’t work inside a decluttering card, it only works if thebutton-card's direct father is ahorizontal-stack(when using decluttering-card, the father is adecluttering-cardcard and its father is ahorizontal-stackcard) .
What I’d suggest is to put everything inside 1 decluttering-template which would then work:
simple_header_with_button:
default:
icon: mdi:settings
lock: false
lock_color: var(--primary-text-color)
tap_action: more-info
card:
type: horizontal-stack
cards:
- type: custom:button-card
label: '[[label]]'
show_label: true
aspect_ratio: 9/1
# color_type: label-card
styles:
card:
- height: 50px
- background: linear-gradient(to right, var(--paper-card-background-color) 0%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0) 90%)
- --ha-card-box-shadow: 'none'
# - background-color: var(--paper-card-background-color)
label:
- justify-self: start
- padding-left: 20px
- font-size: 24px
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 2px
- type: custom:button-card
icon: '[[icon]]'
show_name: false
tap_action:
action: '[[tap_action]]'
lock: '[[lock]]'
styles:
card:
- border-radius: 50%
- height: 50px
- width: 50px
- background: rgba(255,255,255,0.45)
lock:
- color: '[[lock_color]]'
icon:
- color: gray
- width: 35px
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 2px
And you’d use it like this:
- type: custom:decluttering-card
template: simple_header_with_button
variables:
- label: -- Hall --
Wait, what!!! Decluttering card can template more than one card in one template??
That is exactly what I wanted to do but just didn’t try it.
My fault… But thank you!
I will open an bug for booleans
It can template all the things 
1 Like
Another question…
Can this card be used as an element in picture-elements because I can’t make it work?
The error I get is a simple, “Error in card configuration.”
Here is my view:
title: home
icon: 'mdi:home'
panel: true
cards:
- type: custom:layout-card
layout: horizontal
column_num: 1
max_columns: 1
max_width: [100%]
cards:
#=== TOP PANEL
- type: horizontal-stack
cards:
- type: picture-elements
image: /local/top_panel.svg
elements:
Some working elements in here...
#=== CENTRE PANEL
- type: horizontal-stack
cards:
- type: picture-elements
image: /local/centre_panel.svg
elements:
Some working elements in here...
...then DECLUTTERING CARD, not working
- type: custom:decluttering-card
template: hall_panel_conditional
variables:
- state: Good Service
- type: state-label
- entity: sensor.bakerloo
- prefix: 'Bakerloo - '
- top: 65%
- left: 60%
- font-size: 22px
Here is my decluttering template
hall_panel_conditional:
default:
type: state-label
color: '"#A1A1A1"'
font-family: Quicksand
font-size: 22px
font-weight: normal
pointer-events: none
card:
type: conditional
conditions:
- entity: '[[entity]]'
state: '[[state]]'
elements:
- type: '[[type]]'
entity: '[[entity]]'
prefix: '[[prefix]]'
style:
top: '[[top]]'
left: '[[left]]'
color: '[[color]]'
font-family: '[[font-family]]'
font-size: '[[font-size]]'
font-weight: '[[font-weight]]'
pointer-events: '[[pointer-events]]'
No this doesn’t work unfortunately 
That’s a real shame. Picture elements cards get huge!
I’m attempting to create a template from the sample button code available with the ESXI Custom Component. By itself, the button code works fine. However, when I drop the code into decluttering-templates: and replace the hostname field with a variable name located inside of the IF statements, the button doesn’t actually render.
The variable I suspect is problematic is '[[vm_hostname]]'.
Is this the expected behavior or am I doing something wrong?
dc_esxi_vm_status_card:
card:
type: custom:button-card
entity: sensor.esxi_stats_vms
name: '[[name]]'
template: esxi_stats_vm
styles:
icon:
- color: >
[[[
if ( states['sensor.esxi_stats_vms'].attributes.'[[vm_hostname]]'.status == "green")
return "green";
if ( states['sensor.esxi_stats_vms'].attributes.'[[vm_hostname]]'.status == "warning" )
return "yellow";
return "red";
]]]
custom_fields:
uptime: >
[[[
return `<ha-icon
icon="mdi:arrow-up"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span><span style="color: var(--text-color-sensor);">
${states['sensor.esxi_stats_vms'].attributes.'[[vm_hostname]]'.uptime_hours}</span></span>`
]]]
cpu: >
[[[
return `<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">
${states['sensor.esxi_stats_vms'].attributes.'[[vm_hostname]]'.cpu_count}</span></span>`
]]]
ram: >
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>Mem: <span style="color: var(--text-color-sensor);">
${states['sensor.esxi_stats_vms'].attributes.'[[vm_hostname]]'.memory_allocated_mb} MB</span></span>`
]]]
state: >
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>State: <span style="color: var(--text-color-sensor);">
${states['sensor.esxi_stats_vms'].attributes.'[[vm_hostname]]'.state}</span></span>`
]]]
1 Like