Anchoring maybe?

Configuration Frontend
1

Hi all,

Sorry if this is covered somewhere but I haven’t found a working solution. I have used declutter cards with great affect but using stack-in cards and entity cards I am making different pages for individual bulb management.

switches

I have tidied the switches up using the following code:

              entities:
              - entity: light.k_01
                name: K1
                card_mod:
                  style:
                    hui-generic-entity-row:
                      $: |
                        state-badge {
                        display: none;
                        }
                        .info {
                        margin-left: 0 !important;
                        }
                        ha-card {
                        border: 0px;
                        }

The issue is I have to repeat the style section for every switch and I wanted to be able to apply it with an anchor or other to save on 100s lines of code. Everytime I try and build an anchor and save, HA seems to replace the anchor with the target, If I can get it work at all, as most the time it just removes the &… Additionally I have to make 10 different cards with varying numbers of entities, which rules out the benefit of declutter cards. I was hoping for something like this:

- entity: light.k_01
                name: K1
                card_mod: *entityStyle

entityStyle: &entityStyle
  hui-generic-entity-row:
    $: |
      state-badge {
        display: none;
      }
      .info {
        margin-left: 0 !important;
      }
      ha-card {
        width: 100%;
      }

But I cant get it to work.

Apologise for any problems/confusion in this post, it is my first time posting. Thank you for the help in advance.

2

This happens in a storage mode of a dashboard since a content is converted from yaml to json and vice versa. Anchors should only be used in yaml mode.
If you prefer the storage mode - then you should put reusable card-mod code into decluttering cards (if possible).

3

Thank you for the information.

How do you switch to yaml mode? I wrote the adjustments in yaml i didnt realise there was other settings.

4

There is no “switch”.
Dashboards in yaml-mode are initially written in yaml.
Ofc you can migrate a storage-mode-dashboard to a yaml-mode one, this a a manual operation (create yaml files, copy-paste a content from “raw yaml config” of a dashboarfd, etc). There are other threads about yaml-based dashboards, and there are docs (cannot give a link though).

5

FYI you’re also delcaring the anchor wrong. So if you do switch to yaml mode, the declaration needs to be before you use it. Secondly, you need to declare it the first place you use it.

e.g.

              entities:
              - entity: light.k_01
                name: K1
                <<: &switch_style
                  card_mod:
                    style:
                      hui-generic-entity-row:
                        $: |
                          state-badge {
                          display: none;
                          }
                          .info {
                          margin-left: 0 !important;
                          }
                          ha-card {
                          border: 0px;
                          }

Then to use it later on…

              - entity: light.k_02
                name: K2
                <<: *switch_style

But to clarify, this will only work in yaml dashboards. You will not be able to use the UI, at all.

6

OR you can declare an anchor in a top of a yaml file & then use it (better in a case when the 1st appearance may be removed / commented):

package_some_reusable_code: &ref_some_reusable_code
  icon: ...
  card_mod: 
    style:
      ...

# below your code for a view
title: ...
path: ...
cards:
  - ...
    <<: *ref_some_reusable_code
7

That only works in the frontend, it’s not guaranteed to always work either.

8

this was a frontend example.
For a “config yaml” I use smth like this

homeassistant:
  customize:
    package.node_anchors:
      anchor_something: &ref_something "{{states('sun.sun')}}"

template:
  - sensor:
      - name: ...
        state: *ref_something

with no guarantee that this will be kept supported.

9

This is great info. I am happy with yaml only work i have a few cards that have no gui.

10

What I posted above is guarenteed to always work because it’s built into yaml. Which is why I provided that as the option.

11

Understood, but sometimes it is more convenient to move reusable parts to a separate place of a file - as I said some parts may be commented / excluded etc…

12

Add this to your configuration.yaml

lovelace:
  mode: yaml

If you are comfortably with YAML mode, then you should look into Lovelace_gen also.
It can do some wild things that will make situations like this much easier.

13

This happens in a storage mode of a dashboard since a content is converted from yaml to json and vice versa.

I have managed to make the suggestions work by editing the raw config file. I have saved it and all is good, when I look through gui side it replaces it with the target but the raw config still has the anchors.

Does the yaml to json conversion happen for the gui side of things and this works or is what I am doing pointless unless it is done in yaml mode?

14

Now save this raw yaml, close, open again )))

15

Sorry I have another question, I notice the anchors only seem to work when a line doesn’t have its second pair (e.g. card mod below)

switches
switches693×373 5.83 KB

Are you able to achieve the same when it does?

Below is some code I use alot, name, hash and icon change but can the rest all be templated/anchored?:

        cards:
          - name: Halls
            hash: '#pu_h'
            icon: mdi:texture-box
            type: custom:bubble-card
            card_type: pop-up
            button_type: name
            scrolling_effect: false
            styles: |
              .bubble-button-background {
              background-color: transparent !important;
              }
              #header-container {
              background-color: transparent;
              div {
              background-color: transparent;
              }
              }
              .bubble-icon {
              color: #FFFFFF !important;
              }
16

Now save this raw yaml, close, open again )))

I see what you mean

17

Unclear, could you explain?

And this is also unclear(((

18

So where it says
card mod: you can insert the &…

Where you have something after the : this function doesnt work e.g.

type: custom:bubble-card &…

19

Probably this will make things clear:
http://thomasloven.com/blog/2018/08/YAML-For-Nonprogrammers/

20

Anchors can work for anything in that structure, you just have to know how they work.

        cards:
        - <<: &halls
            name: Halls
            hash: '#pu_h'
            icon: mdi:texture-box
            type: custom:bubble-card
            card_type: pop-up
            button_type: name
            scrolling_effect: false
            styles: |
              .bubble-button-background {
              background-color: transparent !important;
              }
              #header-container {
              background-color: transparent;
              div {
              background-color: transparent;
              }
              }
              .bubble-icon {
              color: #FFFFFF !important;
              }