Lovelace: Decluttering Card

FYI, I tried installing this via HACS. Apparently, it retrieves an incorrect file. It gives the “Custom element doesn’t exist” error.
When I replaced that file with the correct (dist) version, it worked.

No idea what happened for you… I only installed it a week ago via HACS and it’s fine. HACS is just pulling the same file as manually…

If it’s any help, the file HACS loaded for me began with:

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function e(e, t, r, n) {

The one that worked begins with:

var e = {},
    t = /d{1,4}|M{1,4}|YY(?:YY)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,
    n = "[^\\s]+",
    o = /\[([^]*?)\]/gm,
    r = function () {};function i(e, t) {
  for (var n = [], o = 0, r = e.length; o < r; o++) n.push(e[o].substr(0, t));return n;
}

Where can I get the correct decluttering-card.js file? I got the same problem as you and all the link above are not found now.

Same place as usual: Releases · custom-cards/decluttering-card · GitHub

HACS pulls the file from the releases. If it doesn’t work for you, you have another issue unrelated to decluttering-card.

I still got the same error as Russell above: “Custom element doesn’t exist: decluterring-card”. I really have no idea how to solve this. I checked HACS installation and lovelace resources. Everything looks right but the error still. Russell mentioned that there’s another version of declutteriing-card.js file that works! I really want to get this working as my lovelace ui file is a bit messy now.

There is only one version of decluttering-card (link above), and it works for everyone, so the problem is probably on your side :wink:

What does your lovelace resource list look like?

Having the same issue here.

Did a fresh install of HassIO+HACS (vmware based) just to try it and still the same.

Errormessage when checking the config: Component error: decluttering_templates - Integration ‘decluttering_templates’ not found.

Resouce pointing at “/hacsfiles/decluttering-card/decluttering-card.js?hacstag=188686483063” as a module.

Just a simple row with “decluttering_templates:” in configuration.yaml
(and without that row there are no errors at all but of course the function is non-existing)

Figured it out… :slight_smile:

The decluttering_templates-tag needs to be within a lovelace yaml-file, did have it at root level and that doesn’t work at all…

Good find (and of course, you’re right. That’s where mine is.)

I need a help with some unusual case.
My YAML skills are not enough…

Let’s assume I need a vertical stack of cards:

  • Entities card
  • Glance card.

This is a simplified decluttering template:

my_stack:
  card:
    type: vertical-stack
    cards: '[[CARDS]]'

How to use:

type: custom:decluttering-card
template: my_stack
variables:
  - CARDS:
      - type: entities
        entities:
          - sun.sun
          - sun.sun
      - type: glance
        entities:
          - sun.sun
          - sun.sun

It works fine.

Now lets change the task a bit - the stack already has some cards and I need to add more cards as variables.
Let’s assume that the stack already has that Entity card, now I need to use the template with the added Glance card:

type: custom:decluttering-card
template: my_stack
variables:
  - CARDS:
      - type: glance
        entities:
          - sun.sun
          - sun.sun

Now I do not know how to specify the template.
I tried this with no success:

my_stack:
  card:
    type: vertical-stack
    cards:
      - type: entities
        entities:
          - sun.sun
          - sun.sun
      - <<: '[[CARDS]]'

Actually I need only ONE card to be added as a variable, may be this can make a decision easier or at least possible.

Found how to add one card as a variable (or more cards with more variables, 1 card = 1 variable):

  my_stack:
    card:
      type: vertical-stack
      cards:
        - type: entities
          entities:
            - sun.sun
            - sun.sun
        - '[[CARD_1]]'
        - '[[CARD_2]]'

How to use:

type: custom:decluttering-card
template: my_stack
variables:
  - CARD_1:
      type: glance
      entities:
        - sun.sun
        - sun.sun
  - CARD_2:
      type: glance
      entities:
        - person.ildar
        - person.ildar

image

Now I wonder how to add a set of cards via ONE variable…

3 Likes

Can someone lend a hand on how to configure this icon colour sensor template?

decluttering_templates:
  nasdrive_stats:
    card:
      type: custom:button-card
      entity: '[[entity_nasdrivetemp]]'
      name: '[[name]]'
      icon: mdi:[[icon]]
      aspect_ratio: 1/1
      styles:
        card:
          - background-color: '#55555544'
          - border-radius: 10%
          - padding: 10%
          - color: ivory
          - font-size: 10px
          - text-shadow: 0px 0px 5px black
          - text-transform: capitalize
        grid:
          - grid-template-areas: '"i temp" "n n" "state state" "smart smart" "graph graph"'
          - grid-template-columns: 1fr 1fr
          - grid-template-rows: 1fr min-content min-content min-content min-content
        name:
          - font-weight: bold
          - font-size: 15px
          - color: white
          - align-self: top
          - justify-self: start
          - padding-bottom: 4px
        img_cell:
          - justify-content: start
          - align-items: start
          - margin: none
        icon:
          - width: 45%
          - margin-top: '-10%'
          - margin-bottom: '-12%'
          - color: |
              [[[ 
                if (entity.state > 50) return "red";
                if (entity.state >= 30) return "orange";
                else return "lime";
              ]]]
        custom_fields:
          temp:
            - align-self: start
            - justify-self: end
            - '--icon-color-sensor': lime
          state:
            - padding-bottom: 2px
            - align-self: middle
            - justify-self: start
            - '--icon-color-sensor': |
                [[[
                  if (states["[[entity_nasdrivestate]]"].state == "Normal") return "lime";
                  if (states["[[entity_nasdrivestate]]"].state == "Not_use") return "orange";
                  else return "red";
                ]]]
          smart:

The [[entity_nasdrivestate]] variable supplied contains the entity name for a sensor other than the main entity for the card This obviously doesn;t work right now - it actually sets the sensor value…

I don’t think you can have a custom field named “state” as there is already something called state which shows the state of the main entity. (I use stat instead.)
Also, those custom field are meant to return text (or markup text) for display in the grid position(s) occupied by that field. For example:

        stat: |
          [[[
            var status = '[[thing_name_off]]';
            if (entity.state == "on") status = '[[thing_name_on]]';
            return `<span>${status}</span>`
          ]]]

If you want to effect the color of the markup text displayed, you can do something like this which displays an icon in a state-based color and state text following in white.

        m0: |
          [[[
            if ('[[m0_show]]' == 'true') {
              var icon = '[[m0_icon_off]]';
              var icon_color = '[[m0_icon_color_off]]';
              var status = '[[m0_status_off]]';
              if (states['[[m0_entity]]'].state == '[[m0_on_state]]') {
                icon = '[[m0_icon_on]]';
                status = '[[m0_status_on]]';
                icon_color = '[[m0_icon_color_on]]';
              }
              return `<ha-icon icon=${icon}
              style="width: 14px; height: 14px; color: ${icon_color};">
              </ha-icon><span style="color: white";> ${status}</span>`
            }
            return ``
          ]]]

Thanks, yes I’d already realised not a good idea to use “state” and changed that.

I already have the text and icon displayed - I simply need a template to chaneg the icon color dependent on the state of another entity the name of which is contained in [[entity_nasdrivestate]].

I’ve tried your suggestion and still no joy - it sets the sate but not the icon colour:

        stat: |
          [[[
            if (states['[[entity_nasdrivestate]]'].state == 'Normal') {
              var staticon = "lime";
            }
            else {
               var staticon = 'red';
            }
            return `<ha-icon
            icon="mdi:power-standby"
            style="width: 16px; height: 16px; color: $(staticon);">
            </ha-icon> <span>Status: <span style="color: white;">${states['[[entity_nasdrivestate]]'].state}</span></span>`
          ]]]

Try this:

        stat: |
          [[[
           var staticon = "red";
            if (states['[[entity_nasdrivestate]]'].state == 'Normal') {
              staticon = "lime";
            }
            return `<ha-icon
            icon="mdi:power-standby"
            style="width: 16px; height: 16px; color: $(staticon);">
            </ha-icon> <span>Status: <span style="color: white;">${states['[[entity_nasdrivestate]]'].state}</span></span>`
          ]]]

Also, is the state capitalized? (eg: “Normal”). Case matters in those tests.

1 Like

Thanks, got it in the end, and your comment about capitalization was useful - I forgot that it was capitalized by my style previosuly, not the actual state.

Hi Everyone,
After spending many hours trying to decide how to go ahead with the design of my Lovelace views, I decided to use the attached screen. However, working with UI and long lines of code resulted in the 1st and 2nd while when trying to use the decluttering card it always leaves the large space and dosen’t look like the long code version.

What am I doing wrong? or did I go blind from all the concentration on this piece?!! I would appreciate any advice I can get.

decluttering_templates:
  section_name:
    default:
      - <name>: <section name>
    card:
      type: custom:button-card
      name: '[[name]]'
      styles:
        name:
          - text-transform: uppercase
          - letter-spacing: 0.5em
          - font-familly: cursive
          - justify-self: start
          - padding: 0px 5px
  switch_btn:
    card:
      type: custom:button-card
      entity: '[[entity]]'
      show_name: false
      show_entity_picture: true
      show_state: false
      show_icon: false
      show-border: true
      size: 60%
      styles:
        card:
          - height: 90px
          - width: 90px
          - border-radius: 20px
        entity_picture:
          - justify-self: start
          - width: 65px
          - border-radius: 5px
      state:
        - value: 'on'
          operator: '=='
          styles:
            entity_picture:
              - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
              - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
              - transition: all 2s ease
              - border-radius: 5px
  water_level:
    card:
      type: custom:button-card
      entity: '[[entity]]'
      show_entity_picture: true
      show_name: false
      size: 25%
      styles:
        card:
          - height: 180px
          - width: 100px
          - border-radius: 15px
          - margin: 5px 5px
        entity_picture:
          - justify-self: start
          - width: 80px
          - border-radius: 5px
          - transition: all 2s ease
      state:
        - value: 5
          operator: '=='
          entity_picture: /local/my-icons/water 5.png
          styles:
            entity_picture:
              - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
              - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
        - value: 4
          operator: '=='
          entity_picture: /local/my-icons/water 4.png
          styles:
            entity_picture:
              - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(39, 127, 194)
              - box-shadow: 0 0 0.95rem 0.2rem rgb(39, 127, 194)
        - value: 3
          operator: '=='
          entity_picture: /local/my-icons/water 3.png
          styles:
            entity_picture:
              - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(85, 186, 71)
              - box-shadow: 0 0 0.95rem 0.2rem rgb(85, 186, 71)
        - value: 2
          operator: '=='
          entity_picture: /local/my-icons/water 2.png
          styles:
            entity_picture:
              - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(246,135,41)
              - box-shadow: 0 0 0.95rem 0.2rem rgb(246,135,41)
        - value: 1
          operator: '=='
          entity_picture: /local/my-icons/water 1.png
          styles:
            entity_picture:
              - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(237,28,35)
              - box-shadow: 0 0 0.95rem 0.2rem rgb(237,28,35)
              - animation: blink 2s ease infinite
title: Sober Home
views:
  - title: Pool
    path: pool
    icon: mdi:swim
    badges: []
    cards:
      - type: custom:stack-in-card
        keep:
          background: true
          border_radius: true
          box_shadow: false
        mode: vertical
        cards:
          - type: vertical-stack
            cards:
              - type: custom:button-card
                name: Pool
                styles:
                  name:
                    - text-transform: uppercase
                    - letter-spacing: 0.5em
                    - font-familly: cursive
                    - justify-self: start
                    - padding: 0px 5px
              - type: horizontal-stack
                cards:
                  - type: custom:button-card
                    entity: sensor.pool_tank_level_number
                    show_entity_picture: true
                    show_name: false
                    size: 25%
                    styles:
                      card:
                        - height: 180px
                        - width: 90px
                        - border-radius: 15px
                        - margin: 5px 5px
                      entity_picture:
                        - justify-self: start
                        - width: 80px
                        - border-radius: 5px
                    state:
                      - value: 5
                        operator: '=='
                        entity_picture: /local/my-icons/water 5.png
                        styles:
                          entity_picture:
                            - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                            - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                            - transition: all 2s ease
                      - value: 4
                        operator: '=='
                        entity_picture: /local/my-icons/water 4.png
                        styles:
                          entity_picture:
                            - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(39, 127, 194)
                            - box-shadow: 0 0 0.95rem 0.2rem rgb(39, 127, 194)
                            - transition: all 2s ease
                      - value: 3
                        operator: '=='
                        entity_picture: /local/my-icons/water 3.png
                        styles:
                          entity_picture:
                            - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(85, 186, 71)
                            - box-shadow: 0 0 0.95rem 0.2rem rgb(85, 186, 71)
                            - transition: all 2s ease
                      - value: 2
                        operator: '=='
                        entity_picture: /local/my-icons/water 2.png
                        styles:
                          entity_picture:
                            - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(246,135,41)
                            - box-shadow: 0 0 0.95rem 0.2rem rgb(246,135,41)
                            - transition: all 2s ease
                      - value: 1
                        operator: '=='
                        entity_picture: /local/my-icons/water 1.png
                        styles:
                          entity_picture:
                            - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(237,28,35)
                            - box-shadow: 0 0 0.95rem 0.2rem rgb(237,28,35)
                            - transition: all 2s ease
                            - animation: blink 2s ease infinite
                  - type: vertical-stack
                    cards:
                      - type: horizontal-stack
                        cards:
                          - type: custom:button-card
                            entity: switch.pool_tank_valve
                            show_name: false
                            show_entity_picture: true
                            show_state: false
                            show_icon: false
                            show-border: true
                            size: 60%
                            styles:
                              card:
                                - height: 90px
                                - width: 90px
                                - border-radius: 20px
                              entity_picture:
                                - justify-self: start
                                - width: 65px
                                - border-radius: 5px
                            state:
                              - value: 'on'
                                operator: '=='
                                styles:
                                  entity_picture:
                                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                    - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                    - transition: all 2s ease
                                    - border-radius: 5px
                          - type: custom:button-card
                            entity: switch.pool_filter_pump
                            show_name: false
                            show_entity_picture: true
                            show_state: false
                            show_icon: false
                            size: 60%
                            styles:
                              card:
                                - height: 90px
                                - width: 90px
                                - border-radius: 20px
                              entity_picture:
                                - justify-self: start
                                - width: 65px
                                - border-radius: 5px
                            state:
                              - value: 'on'
                                operator: '=='
                                styles:
                                  entity_picture:
                                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                    - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                    - transition: all 2s ease
                                    - border-radius: 5px
                          - type: custom:button-card
                            entity: switch.pool_stairs_jet_1_pump
                            show_name: false
                            show_entity_picture: true
                            show_state: false
                            show_icon: false
                            size: 60%
                            styles:
                              card:
                                - height: 90px
                                - width: 90px
                                - border-radius: 20px
                              entity_picture:
                                - justify-self: start
                                - width: 65px
                                - border-radius: 5px
                            state:
                              - value: 'on'
                                operator: '=='
                                styles:
                                  entity_picture:
                                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                    - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                    - transition: all 2s ease
                                    - border-radius: 5px
                      - type: horizontal-stack
                        cards:
                          - type: custom:button-card
                            entity: switch.pool_heating_pump
                            show_name: false
                            show_entity_picture: true
                            show_state: false
                            show_icon: false
                            size: 60%
                            styles:
                              card:
                                - height: 90px
                                - width: 90px
                                - border-radius: 20px
                              entity_picture:
                                - justify-self: start
                                - width: 65px
                                - border-radius: 5px
                            state:
                              - value: 'on'
                                operator: '=='
                                styles:
                                  entity_picture:
                                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                    - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                    - transition: all 2s ease
                                    - border-radius: 5px
                          - type: custom:button-card
                            entity: switch.pool_waterfall_pump
                            show_name: false
                            show_entity_picture: true
                            show_state: false
                            show_icon: false
                            size: 60%
                            styles:
                              card:
                                - height: 90px
                                - width: 90px
                                - border-radius: 20px
                              entity_picture:
                                - justify-self: start
                                - width: 65px
                                - border-radius: 5px
                            state:
                              - value: 'on'
                                operator: '=='
                                styles:
                                  entity_picture:
                                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                    - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                    - transition: all 2s ease
                                    - border-radius: 5px
                          - type: custom:button-card
                            entity: switch.pool_jet_2_pump
                            show_name: false
                            show_entity_picture: true
                            show_state: false
                            show_icon: false
                            size: 60%
                            styles:
                              card:
                                - height: 90px
                                - width: 90px
                                - border-radius: 20px
                              entity_picture:
                                - justify-self: start
                                - width: 65px
                                - border-radius: 5px
                            state:
                              - value: 'on'
                                operator: '=='
                                styles:
                                  entity_picture:
                                    - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                    - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                    - transition: all 2s ease
                                    - border-radius: 5px
      - type: grid
        cards:
          - type: horizontal-stack
            cards:
              - type: vertical-stack
                cards:
                  - type: custom:button-card
                    name: Pool
                    styles:
                      name:
                        - text-transform: uppercase
                        - letter-spacing: 0.5em
                        - font-familly: cursive
                        - justify-self: start
                        - padding: 0px 5px
                  - type: horizontal-stack
                    cards:
                      - type: custom:button-card
                        entity: sensor.pool_tank_level_number
                        show_entity_picture: true
                        show_name: false
                        size: 25%
                        styles:
                          card:
                            - height: 180px
                            - width: 90px
                            - border-radius: 15px
                            - margin: 5px 5px
                          entity_picture:
                            - justify-self: start
                            - width: 80px
                            - border-radius: 5px
                        state:
                          - value: 5
                            operator: '=='
                            entity_picture: /local/my-icons/water 5.png
                            styles:
                              entity_picture:
                                - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                - transition: all 2s ease
                          - value: 4
                            operator: '=='
                            entity_picture: /local/my-icons/water 4.png
                            styles:
                              entity_picture:
                                - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(39, 127, 194)
                                - box-shadow: 0 0 0.95rem 0.2rem rgb(39, 127, 194)
                                - transition: all 2s ease
                          - value: 3
                            operator: '=='
                            entity_picture: /local/my-icons/water 3.png
                            styles:
                              entity_picture:
                                - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(85, 186, 71)
                                - box-shadow: 0 0 0.95rem 0.2rem rgb(85, 186, 71)
                                - transition: all 2s ease
                          - value: 2
                            operator: '=='
                            entity_picture: /local/my-icons/water 2.png
                            styles:
                              entity_picture:
                                - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(246,135,41)
                                - box-shadow: 0 0 0.95rem 0.2rem rgb(246,135,41)
                                - transition: all 2s ease
                          - value: 1
                            operator: '=='
                            entity_picture: /local/my-icons/water 1.png
                            styles:
                              entity_picture:
                                - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(237,28,35)
                                - box-shadow: 0 0 0.95rem 0.2rem rgb(237,28,35)
                                - transition: all 2s ease
                                - animation: blink 2s ease infinite
                      - type: vertical-stack
                        cards:
                          - type: horizontal-stack
                            cards:
                              - type: custom:button-card
                                entity: switch.pool_tank_valve
                                show_name: false
                                show_entity_picture: true
                                show_state: false
                                show_icon: false
                                show-border: true
                                size: 60%
                                styles:
                                  card:
                                    - height: 90px
                                    - width: 90px
                                    - border-radius: 20px
                                  entity_picture:
                                    - justify-self: start
                                    - width: 65px
                                    - border-radius: 5px
                                state:
                                  - value: 'on'
                                    operator: '=='
                                    styles:
                                      entity_picture:
                                        - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                        - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                        - transition: all 2s ease
                                        - border-radius: 5px
                              - type: custom:button-card
                                entity: switch.pool_filter_pump
                                show_name: false
                                show_entity_picture: true
                                show_state: false
                                show_icon: false
                                size: 60%
                                styles:
                                  card:
                                    - height: 90px
                                    - width: 90px
                                    - border-radius: 20px
                                  entity_picture:
                                    - justify-self: start
                                    - width: 65px
                                    - border-radius: 5px
                                state:
                                  - value: 'on'
                                    operator: '=='
                                    styles:
                                      entity_picture:
                                        - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                        - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                        - transition: all 2s ease
                                        - border-radius: 5px
                              - type: custom:button-card
                                entity: switch.pool_stairs_jet_1_pump
                                show_name: false
                                show_entity_picture: true
                                show_state: false
                                show_icon: false
                                size: 60%
                                styles:
                                  card:
                                    - height: 90px
                                    - width: 90px
                                    - border-radius: 20px
                                  entity_picture:
                                    - justify-self: start
                                    - width: 65px
                                    - border-radius: 5px
                                state:
                                  - value: 'on'
                                    operator: '=='
                                    styles:
                                      entity_picture:
                                        - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                        - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                        - transition: all 2s ease
                                        - border-radius: 5px
                          - type: horizontal-stack
                            cards:
                              - type: custom:button-card
                                entity: switch.pool_heating_pump
                                show_name: false
                                show_entity_picture: true
                                show_state: false
                                show_icon: false
                                size: 60%
                                styles:
                                  card:
                                    - height: 90px
                                    - width: 90px
                                    - border-radius: 20px
                                  entity_picture:
                                    - justify-self: start
                                    - width: 65px
                                    - border-radius: 5px
                                state:
                                  - value: 'on'
                                    operator: '=='
                                    styles:
                                      entity_picture:
                                        - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                        - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                        - transition: all 2s ease
                                        - border-radius: 5px
                              - type: custom:button-card
                                entity: switch.pool_waterfall_pump
                                show_name: false
                                show_entity_picture: true
                                show_state: false
                                show_icon: false
                                size: 60%
                                styles:
                                  card:
                                    - height: 90px
                                    - width: 90px
                                    - border-radius: 20px
                                  entity_picture:
                                    - justify-self: start
                                    - width: 65px
                                    - border-radius: 5px
                                state:
                                  - value: 'on'
                                    operator: '=='
                                    styles:
                                      entity_picture:
                                        - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                        - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                        - transition: all 2s ease
                                        - border-radius: 5px
                              - type: custom:button-card
                                entity: switch.pool_jet_2_pump
                                show_name: false
                                show_entity_picture: true
                                show_state: false
                                show_icon: false
                                size: 60%
                                styles:
                                  card:
                                    - height: 90px
                                    - width: 90px
                                    - border-radius: 20px
                                  entity_picture:
                                    - justify-self: start
                                    - width: 65px
                                    - border-radius: 5px
                                state:
                                  - value: 'on'
                                    operator: '=='
                                    styles:
                                      entity_picture:
                                        - '-webkit-box-shadow': 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                        - box-shadow: 0 0 0.95rem 0.2rem rgb(5, 113, 185)
                                        - transition: all 2s ease
                                        - border-radius: 5px
        columns: 1
        square: false
      - type: grid
        columns: 1
        square: false
        cards:
          - type: horizontal-stack
            cards:
              - type: vertical-stack
                cards:
                  - type: custom:decluttering-card
                    template: section_name
                    variables:
                      - name: Pool
                  - type: horizontal-stack
                    cards:
                      - type: vertical-stack
                        cards:
                          - type: custom:decluttering-card
                            template: water_level
                            variables:
                              - entity: sensor.pool_tank_level_number
                      - type: vertical-stack
                        cards:
                          - type: horizontal-stack
                            cards:
                              - type: custom:decluttering-card
                                template: switch_btn
                                variables:
                                  - entity: switch.pool_tank_valve
                              - type: custom:decluttering-card
                                template: switch_btn
                                variables:
                                  - entity: switch.pool_filter_pump
                              - type: custom:decluttering-card
                                template: switch_btn
                                variables:
                                  - entity: switch.pool_stairs_jet_1_pump
                          - type: horizontal-stack
                            cards:
                              - type: custom:decluttering-card
                                template: switch_btn
                                variables:
                                  - entity: switch.pool_heating_pump
                              - type: custom:decluttering-card
                                template: switch_btn
                                variables:
                                  - entity: switch.pool_waterfall_pump
                              - type: custom:decluttering-card
                                template: switch_btn
                                variables:
                                  - entity: switch.pool_jet_2_pump

Also, I noticed that whenever I try to raw edit my views, I get the white lines of code starting at random places, but when I add an empty line before the white lines, they get the color back!! any reason for this behavior? attached a screenshot as well.

Thanks in advance


can anyone please tell me why am I getting this error. I am just using example templates. What am I doing wrong here?