Lovelace: Decluttering Card

Reverted card-mod to 3.4.4 and the following decluttering template works now:

decluttering_templates:
  decluttering_test:
    card:
      type: custom:vertical-stack-in-card
      cards:
        - type: custom:mod-card
          card_mod:
            style:
              hui-horizontal-stack-card $: |
                div#root hui-card > * {
                  display: flex;
                  flex-direction: column;
                  --ha-card-border-width: 0px !important;
                  margin-bottom: 5px !important;
                  margin-top: -5px !important;
                }
                div#root > :first-child > * {
                  margin-left: 4px !important;
                }
                div#root > :last-child > * {
                  margin-right: 4px !important;
                }
              .: |
                hui-horizontal-stack-card {
                  --horizontal-stack-card-gap: 2px;
                }
                ha-card {
                  box-shadow: var(--ha-card-box-shadow);
                  border: var(--ha-card-border-color,var(--divider-color,#e0e0e0)) solid var(--ha-card-border-width,1px);
                  background: var(--ha-card-background,var(--card-background-color,#fff));
                }
          card:
            type: horizontal-stack
            cards:
              - type: entity
                entity: sun.sun
              - type: entity
                entity: sun.sun
              - type: entity
                entity: sun.sun
              - type: entity
                entity: sun.sun
              - type: entity
                entity: sun.sun

Because you’re using the mod-card wrong.

I just got started using decluttering card and it’s working great. However, is it possible to use in a “sections” dashboard where the width of a card is specified? It’s a super-long sankey-card, so not posting the whole yaml, but I have the following embedded in the yaml for the decluttering template, but it’s not impacting the custom-decluttering card when deployed in a sections view. The same yaml when placed directly in a typical card works as intended. Thank you!

      grid_options:
        columns: 24
        rows: auto

Sorry - I think everyone can ignore this. I realized if I specify the grid options yaml in the custom-decluttering card (not the decluttering template), it works fine. Probably as it was intended!

Take a look at this, if you agree give it a thumbs up

1 Like

This has been discussed before, but I have seen some conflicting answers (or I have misinterpreted them). I have a card_mod that defines some variables. It uses variables to simplify the code of the card_mod, there is really no need to have them be variables. I can’t get this to work as a decluttering template, although the card works great as a standalone. The card_mod variable syntax is different than the decluttering card, so my hope was that there would be no confusion with the decluttering card.

mushroom_bar_card_template:
    card:
      type: custom:bar-card
      entities:
        - entity: sensor.climate_govee_sensor_temperature
          icon: mdi:bed-empty
          positions:
            icon: outside
            indicator: 'off'
            minmax: 'off'
            name: 'off'
            value: 'off'
          min: 50
          max: 80
          target: 71
          height: 15
      severity:
        - color: '#4b5d80'
          from: 40
          to: 69
        - color: '#4b8078'
          from: 69
          to: 75
        - color: '#9e5c4b'
          from: 75
          to: 95
      card_mod:
        style: >
          {% set entity = { 
            "state": states('sensor.climate_govee_sensor_temperature') | int(9999999999),
            "name": "Guest Room Temperature",
            "unit": "F"
            }
          %} {% set severity = { 
            "blue": 0,
            "green": 69,
            "orange": 75
            }
          %} {% set colors = { 
            "blue": "75,93,128",
            "green": "75,128,120",
            "orange": "158,92,75"
            }
          %}

          ha-card .card-content {
            padding: 12px!important;
            cursor: pointer;
          }

          ha-card {
            transition-duration: 0.05s;
          }

          ha-card:hover {
            {% if entity.state == 9999999999 %}
              background-color: rgba(200,200,200, 0.02);
            {% elif entity.state < severity.orange %}
              background-color: rgba({{colors.green}}, 0.02);
            {% elif entity.state < severity.green %}
              background-color: rgba({{colors.blue}}, 0.02);
            {%- else -%}
              background-color: rgba({{colors.orange}}, 0.02);
            {%- endif %}
          }

          bar-card-background {
            margin-left: 13px !important;
          }

          bar-card-backgroundbar, bar-card-currentbar, bar-card-contentbar, 
          bar-card-targetbar {
            border-radius: 8px;
          }

          bar-card-currentbar, bar-card-backgroundbar, bar-card-contentbar,
          bar-card-targetbar, bar-card-animationbar {
            {% if entity.state == 9999999999 %}
              left: 1.5em !important;
              width: calc(100% - 1.5em);
            {% else %}
              {% set state_width = 1 + (entity.state|string|count + entity.unit|count) * 0.4 %}
              left: {{state_width}}em !important;
              width: calc(100% - {{state_width}}em);
            {%- endif %}
          } 

          bar-card-markerbar {
            display: none;
          } 

          bar-card-background::before {
            content: "{{ entity.name }}";
            display: flex;
            font-family: Roboto, sans-serif;
            font-size: 14px;
            font-weight: 500;
            height: 20px;
            letter-spacing: 0.1px;
            line-height: 20px;
            margin-bottom: 6px;
          }

          bar-card-background::after {
            {% if entity.state == 9999999999 %}
              content: "N/A"
            {%- else %}
              content: "{{ entity.state }}{{ entity.unit}}";
            {%- endif %}
            font-family: Roboto, Noto, sans-serif;
            font-size: 12px;
            font-weight: 400;
            height: 16px;
            letter-spacing: 0.4px;
            line-height: 16px;
            display: inline-block;
            position: absolute;
            margin-top: -4px;
            width: fit-content;
          }

          bar-card-iconbar {
            {% if entity.state == 9999999999 %}
              color: rgba(200,200,200, 1);
              background-color: rgba(200,200,200, 0.2);
            {% elif entity.state < severity.green %}
              color: rgba({{colors.blue}}, 1);
              background-color: rgba({{colors.blue}}, 0.2);
            {% elif entity.state < severity.orange %}
              color: rgba({{colors.green}}, 1);
              background-color: rgba({{colors.green}}, 0.2);
            {%- else -%}
              color: rgba({{colors.orange}}, 1);
              background-color: rgba({{colors.orange}}, 0.2);
            {%- endif %}
            border-radius: 50%;
          }

@Ildar_Gabdullin

- type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% if false -%}
                {{states('zone.home')}}
              {%- else -%}
                {{states('sun.sun')}}
              {%- endif %}

Hi Ildar,
great tutorial.
I can’t test and didn’t read this hole thread, maybe there was found a solution…
Maybe this would work:

- type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% if false -%}
                {{- states('zone.home')}}
              {%- else -%}
                {{- states('sun.sun')}}
              {%- endif %}

so long
Pc