Need help splitting lovelace files

@crazytok wrote:

Im trying to split my lovelace file but I dont get it.

I have a problem. I think its much more difficult to edit this yaml files than using RAW editor in Lovelace.

I have a code in the raw editor that works just fine, but just copy and paste dont work!

For example, Im trying to make a 3x3 columns and rows. But it dont work now in yaml mode, look at my code below:

File: 00-menu.yaml (in /ui-lovelace/)

title: Menu
panel: false
badges: []
id: menu

# MENU


cards:
  - cards:
      - entity: switch.lyxlage
        icon: 'mdi:lightbulb-on-outline'
        show_name: false
        style: |
          ha-card {
            border: solid 1px var(--primary-color);
            background: rgb(47,126,253,0.0);
            box-shadow: none;
            margin: 0%;

          }    
        styles:
          card:
            - height: 100px
            - width: 100px
        tap_action:
          action: navigate
          navigation_path: /lovelace/1
        type: 'custom:button-card'
      - entity: switch.lyxlage
        icon: 'mdi:security'
        show_name: false
        style: |
          ha-card {
            border: solid 1px var(--primary-color);
            background: rgb(47,126,253,0.0);
            box-shadow: none;
            margin: 0%;
          }           
        styles:
          card:
            - height: 100px
            - width: 100px
        tap_action:
          action: navigate
          navigation_path: /lovelace/2
        type: 'custom:button-card'
      - entity: switch.lyxlage
        icon: 'mdi:weather-partly-cloudy'
        show_name: false
        style: |
          ha-card {
            border: solid 1px var(--primary-color);
            background: rgb(47,126,253,0.0);
            box-shadow: none;
            margin: 0%;
          }                      
        styles:
          card:
            - height: 100px
            - width: 100px
        tap_action:
          action: navigate
          navigation_path: /lovelace/3
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - entity: switch.lyxlage
        icon: 'mdi:lightbulb-on-outline'
        show_name: false
        style: |
          ha-card {
            border: solid 1px var(--primary-color);
            background: rgb(47,126,253,0.0);
            box-shadow: none;
            margin: 0%;

          }    
        styles:
          card:
            - height: 100px
            - width: 100px
        tap_action:
          action: navigate
          navigation_path: /lovelace/1
        type: 'custom:button-card'
      - entity: switch.lyxlage
        icon: 'mdi:lightbulb-on-outline'
        show_name: false
        style: |
          ha-card {
            border: solid 1px var(--primary-color);
            background: rgb(47,126,253,0.0);
            box-shadow: none;
            margin: 0%;

          }    
        styles:
          card:
            - height: 100px
            - width: 100px
        tap_action:
          action: navigate
          navigation_path: /lovelace/1
        type: 'custom:button-card'
      - entity: switch.lyxlage
        icon: 'mdi:lightbulb-on-outline'
        show_name: false
        style: |
          ha-card {
            border: solid 1px var(--primary-color);
            background: rgb(47,126,253,0.0);
            box-shadow: none;
            margin: 0%;

          }    
        styles:
          card:
            - height: 100px
            - width: 100px
        tap_action:
          action: navigate
          navigation_path: /lovelace/1
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - entity: switch.lyxlage
        icon: 'mdi:lightbulb-on-outline'
        show_name: false
        style: |
          ha-card {
            border: solid 1px var(--primary-color);
            background: rgb(47,126,253,0.0);
            box-shadow: none;
            margin: 0%;

          }    
        styles:
          card:
            - height: 100px
            - width: 100px
        tap_action:
          action: navigate
          navigation_path: /lovelace/1
        type: 'custom:button-card'
    type: vertical-stack
type: vertical-stack


    
 

This is what I get:

Skärmklipp.PNG.jpg1842×972 291 KB

Why is my last button on the right, and not below the others!? I have tried 100 different settings and its impossible.

Also, when using “panel: true” I get this, where are my other buttons!?? : ??

Skärmklipp1.PNG.jpg1845×972 269 KB

And my ui-lovelace.yaml looks like this:

background: center / cover no-repeat url("/local/images/bg/bg2.jpg")
cch:
  swipe: true
  swipe_animate: swipe
  voice: hide
resources:
  - resources: null
  - type: module
    url: /local/mini-media-player-bundle.js?v=1.4.2
  - type: module
    url: /community_plugin/mini-graph-card/mini-graph-card-bundle.js
  - type: js
    url: /local/monster-card.js?v=2
  - type: module
    url: /community_plugin/button-card/button-card.js
  - type: module
    url: /community_plugin/decluttering-card/decluttering-card.js
  - type: module
    url: /community_plugin/lovelace-card-mod/card-mod.js
  - type: module
    url: >-
      https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js
  - type: module
    url: /community_plugin/atomic_calendar/atomic_calendar.js
  - type: js
    url: /community_plugin/lovelace-grocy-chores-card/grocy-chores-card.js
  - type: module
    url: /community_plugin/bignumber-card/bignumber-card.js
  - type: js
    url: /community_plugin/vertical-stack-in-card/vertical-stack-in-card.js
  - type: js
    url: /community_plugin/lovelace-home-feed-card/lovelace-home-feed-card.js
  - type: js
    url: /customcards/github/thomasloven/card-tools.js?track=true
  - type: js
    url: /customcards/github/thomasloven/layout-card.js?track=true
  - type: module
    url: /community_plugin/compact-custom-header/compact-custom-header.js
  - type: module
    url: /community_plugin/garbage-collection-card/garbage-collection-card.js
  - type: module
    url: /local/timer-card.js
  - type: module
    url: /community_plugin/banner-card/banner-card.js
  - type: js
    url: /community_plugin/lovelace-home-feed-card/lovelace-home-feed-card.js
  - type: js
    url: /local/list-card.js?v=0
title: Home
views: 
    - !include /config/ui-lovelace/00-menu.yaml
    - !include /config/ui-lovelace/01-home.yaml
    - !include /config/ui-lovelace/02-lights.yaml
 

Please someone help me!!

Posts: 1

Participants: 1

Read full topic