Is it possible to pass a template within an variable? For example
icon = if (entity = on) icon 1, else icon 2? Or do I need to have two variables icon_on and icon_off or something like that?
Is it possible to nest decluttering cards?
Decluttered vertical stack containing other decluttered cards.
If possible, how do I do it?
This not working for me 
Hi,
Quick question: is it possible to style (with card_mod) a custom:more-info-card in a decluttering_template ?
Something like this:
decluttering_templates:
modofmoreinfo:
card:
type: custom:more-info-card
entity: light.4e0e3d_light
title: displayname
card_mod:
style: |
ha-dialog {
--popup-border-radius: 12px 0px !important;
--ha-card-header-font-size: 24px !important;
text-align: center !important;
}
The card is showing, but the styling is not working (not injected).
Just wondering if someone has managed this, couldn’t find anything in topics.
You might have to inject the card-mod code at the decluttering-card level instead of the custom:more-info level. Happened to me with a few cards throughout my setup.
You mean shifting the card_mod code a few indents to the left? I’ll try and check.
Thanks.
Not that easy. Check if the more-xxx card contains ha-card. Probably you will need to put the content of the template inside mod-card.
There is an ha-card part.
and with the code
decluttering_templates:
modofmoreinfo:
card:
type: custom:more-info-card
entity: light.z03_tiffany_lamp_buiten_achter_light
title: displayname
card_mod:
style:
.: |
ha-card {
--card-background-color: rgba( 0, 204, 255, 1);
--dialog-background-color: rgba( 255, 204, 0, 1);
text-align: center !important;
}
you get the blue color as shown in the picture.
But the following code doesn’t work, while h1 is only just in the $ of ha-card:
decluttering_templates:
modofmoreinfo:
card:
type: custom:more-info-card
entity: light.z03_tiffany_lamp_buiten_achter_light
title: displayname
card_mod:
style:
ha-card$: |
h1 :host ::slotted(.card-header)
{
line-height: 148px !important;
color: red;
font-weight: 700 !important;
}
If I inject it by hand, it’s working.
I tried “h1 :host ::slotted(.card-header)” in several ways w/o success.
What am I doing wrong?
there is no such thing as “ha-card$”.
Try just “$”.
if you use the browser_mod popup, you should use its header title instead of the content card. I have a similar one for lights. Try this way.
tpl_popup_light:
template:
- tpl_popup_base
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: >
[[[
return !entity || entity.attributes.friendly_name;
]]]
style: !include ../../shared/snippets/style_popup_transparent.yaml
card_mod:
style:
#popup header
.: |
@media (max-width: 450px), (max-height: 500px) {
ha-dialog>ha-dialog-header {
display: block;
background-color: var(--tablet-popup-header-color) !important;
}
}
content:
type: custom:more-info-card
entity: >
[[[ return entity.entity_id; ]]]
title: ' '
card_mod:
style: |
state-card-content {
display: none !important;
}
ha-card {
border: none !important;
}
1 Like
You are absolutely right! It’s working now. Thank you very much!
1 Like
Thank you so much! The popup card is the next one on my list (the more-info one is working) and it looks like your example is exactly what I need with the big vertical slider.
Did you ever get a solution to this exact use case here? I’m trying to make the default name be the friendly_name, as I only want to have to enter a variable in my config if I want to override the default name, and also finding that this is not working. I saw somewhere else in the thread that for some reason, templates aren’t supported for the default values.
I think that’s right: not always can templating be used for default values. That’s why I use this:
decluttering_templates:
mod_coverinfo:
default:
- entityx: entityx
- margind: >-
{{ 'margin-top: calc(var(--header-height, 0) + 42px)' if
is_state('switch.show_ha_more_info_card_margin', 'on')}}
- bgcolor: >-
{{ 'background-color: rgba(204, 204, 204, 0.3)' if
is_state('switch.show_ha_more_info_aided_color', 'on')}}
card:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: >-
{{ ['[[entityx]]'] | map('state_attr', 'friendly_name') | join()
}}
alignment: center
And it’s called like this:
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:decluttering-card
template: mod_coverinfo
variables:
- entityx: number.kxx_testen_commando
title: |
[[[
return !entity || entity.attributes.friendly_name;
]]]
Hope this helps.
The one thing I still can not work out is, how to get the ‘friendly_name’ as a title for the ‘browser_mod.popup’ service (see example above). I tried with several variations like the one in the example and also with variations of
{{ ['number.kxx_testen_commando'] | map('state_attr', 'friendly_name') | join }}
And maybe this isn’t possible at all.
Hi all,
Newbie question.
I have a bunch of dashboards and many of them use my same customized mini-media-player and a boatload of card-mod entries.
Seems that declutter is what I need.
I’m stuck at a basic step - I don’t have a lovelace-ui.yaml file.
I use both the GUI and the raw editor and would like to continue to do so.
Where do I define the templates so they are usable across all dashboards?
Do I create a lovelace-ui.yaml in config? If I do, will it screw up the GUI + raw editor approach?
Thanks in advance.
Oh FWIW, I installed declutter using HACS and it seems that the resources are defined correctly.
What you’re looking for is not possible unfortunately. You either use storage mode (what you have now) and copy your decluttering templates to each dashboard using the raw editor, or you move to yaml mode which then enables you to use the !include command. That would mean that you’d have one (or many) yaml file dedicated to your decluttering templates which you then include to your dashboards using said command. This only works in yaml mode, though.
hello everyone
You can define default values in each template.
Is there a way to share default values among all templates ?
i.e you define default values once in one .yaml file (or somewere) and you reference these defaults values in each template to avoid repeating these default values in each template.
Thanks fo the great work
yaml-anchors
hello all,
im trying to get this card to work, but as soon as i try to use decluttering_templates.yaml, it wont find the templates.
i have placed it:
config
└── ui_lovelace_minimalist
├── custom_cards
└── dashboard
└── ui-lovelace.yaml
|___ decluttering_templates.yaml
the in the ui-lovelace.yaml:
---
button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"
decluttering_templates: !include decluttering_templates.yaml
title: "UI Lovelace Minimalist"
theme: "minimalist-desktop"
background: "var(--background-image)"
views:
- title: "Home"
path: home
icon: mdi:home
cards:
in the decluttering_templates.yaml i have used the examples:
decluttering_templates:
my_first_template: # This is the name of a template
default:
- icon: fire
card:
type: custom:button-card
name: '[[name]]'
icon: 'mdi:[[icon]]'
then for the card in the ui-lovelace:
- type: custom:decluttering-card
template: my_first_template
variables:
- name: Test Button
- icon: arrow-up
i tried sevral time clearing cache, reload minimalist, restart HA.
but on my dashboard it keeps telling me:
The template “my_first_template” doesen’t exist in decluttering_templates