When i use a custom layout, the default admin theme messes up on configure blocks page, save button disappears and some other stuff happens.

Accepted answer

It's something to do with your CSS file. 

If I comment it all out, then the manage blocks page works as expected.

If I comment out .layout definition then it almost works but header is a bit squashed.

Have a look at this layout in contrib and how it uses the class for the layout in each definition so 

https://github.com/backdrop-contrib/bamboo/blob/1.x-1.x/bamboo.css

You probably need ".layout--toz " in front of each (note the space)

Except the admin-bar one would become " .admin-bar body .layout--toz .layout" 

I think you will also need to add some qualifiers like:

".page" AND/OR ".node-type-page" depending where you are using it.

The height definitions in your CSS are being applied on the admin page because there are no classes limiting to pages.

 

Comments

Are you targeting your custom layout at admin pages?

By custom layout do you mean a layout page (where the path is defined by the layout), a layout override (with a path of 'node/%') and then visibility rules to override content matching that rule, or have you created a custom layout template?

It could be if the latter, that you have an open tag somewhere that hasn't been closed off; most code editors will spot this for you.

If an override, perhaps you haven't filtered quite right.

Have you overridden the default admin layout? You probably want to limit the scope of overrides until you're confident that they work for all the cases. 

Custom layouts normally take their block set from the default layout, not the default admin layout, so you might need to take note of the blocks in that layout and ensure they all appear in your new layout.

disabled the front page layout,

changed the default page layout to my custom one which has no errors and didnt touch the admin layout.

tried to customise blocks and the whole page is messed up.

Please can you go to:

admin/config/development/configuration/single/export

(Admin menu > Configuration > Development > Configuration Manager > Single Import/Export > Export)

Select Layouts and then select your custom layout. Please then copy and paste to here.

Set the style of the copied and paste block to "Code Block JSON".

{
    "_config_name": "layout.layout.default",
    "path": "",
    "name": "default",
    "title": "Default Layout",
    "description": null,
    "renderer_name": "standard",
    "module": "layout",
    "weight": 0,
    "storage": 2,
    "layout_template": "toz",
    "disabled": false,
    "settings": {
        "title": "",
        "title_display": "default",
        "title_block": null
    },
    "positions": {
        "header_top": [
            "ac5db9b9-559f-4374-a7f0-f60d6c53b54b"
        ],
        "search_box": [
            "a7463d14-5cd2-4a95-a738-79e41b66553f"
        ],
        "header": [
            "84c43df4-1165-4faf-8700-c362a7153c0b",
            "13b2f325-af26-40bb-8c61-97fe1d93f19f"
        ],
        "top": [
            "09f11b4e-877e-45ab-9000-a4c6254faa04",
            "a549d0bc-51f7-46b0-9b41-653788410dd4"
        ],
        "content": [
            "default"
        ],
        "sidebar": [
            "526a1e17-9fd5-47bd-8e04-808d172d50b9"
        ],
        "sidebar2": [],
        "bottom": [
            "f28e26e3-3efe-46e6-b542-edbaa47a0fb5"
        ],
        "footer": [
            "cd4d033d-3f67-4191-8655-85ee758877c0"
        ],
        "title": []
    },
    "contexts": [],
    "relationships": [],
    "content": {
        "ac5db9b9-559f-4374-a7f0-f60d6c53b54b": {
            "plugin": "node:syndicate",
            "data": {
                "status": 1,
                "module": "node",
                "delta": "syndicate",
                "settings": {
                    "title_display": "none",
                    "title": "",
                    "style": "default",
                    "block_settings": {
                        "syndicate_settings": "promoted"
                    },
                    "contexts": [],
                    "admin_label": "",
                    "admin_description": ""
                },
                "uuid": "ac5db9b9-559f-4374-a7f0-f60d6c53b54b",
                "style": {
                    "plugin": "default",
                    "data": {
                        "settings": {
                            "classes": ""
                        }
                    }
                }
            }
        },
        "a7463d14-5cd2-4a95-a738-79e41b66553f": {
            "plugin": "search:form",
            "data": {
                "status": 1,
                "module": "search",
                "delta": "form",
                "settings": {
                    "title_display": "none",
                    "title": "",
                    "style": "default",
                    "block_settings": {
                        "search": {
                            "label": "",
                            "label_hide": 1,
                            "placeholder": "",
                            "button_text": "Search"
                        }
                    },
                    "contexts": [],
                    "admin_label": "",
                    "admin_description": ""
                },
                "uuid": "a7463d14-5cd2-4a95-a738-79e41b66553f",
                "style": {
                    "plugin": "default",
                    "data": {
                        "settings": {
                            "classes": ""
                        }
                    }
                }
            }
        },
        "84c43df4-1165-4faf-8700-c362a7153c0b": {
            "plugin": "system:header",
            "data": {
                "status": 1,
                "module": "system",
                "delta": "header",
                "settings": {
                    "title_display": "default",
                    "title": "",
                    "style": "default",
                    "block_settings": {
                        "menu": "user-menu",
                        "logo": 1,
                        "site_name": 1,
                        "site_slogan": 1
                    },
                    "contexts": []
                },
                "uuid": "84c43df4-1165-4faf-8700-c362a7153c0b",
                "style": {
                    "plugin": "default",
                    "data": {
                        "settings": {
                            "classes": ""
                        }
                    }
                }
            }
        },
        "13b2f325-af26-40bb-8c61-97fe1d93f19f": {
            "plugin": "system:main-menu",
            "data": {
                "status": 1,
                "module": "system",
                "delta": "main-menu",
                "settings": {
                    "title_display": "none",
                    "title": "",
                    "style": "default",
                    "block_settings": {
                        "style": "dropdown",
                        "level": 1,
                        "depth": 0
                    },
                    "contexts": []
                },
                "uuid": "13b2f325-af26-40bb-8c61-97fe1d93f19f",
                "style": {
                    "plugin": "default",
                    "data": {
                        "settings": {
                            "classes": ""
                        }
                    }
                }
            }
        },
        "09f11b4e-877e-45ab-9000-a4c6254faa04": {
            "plugin": "system:breadcrumb",
            "data": {
                "status": 1,
                "module": "system",
                "delta": "breadcrumb",
                "settings": {
                    "title_display": "default",
                    "title": "",
                    "style": "default",
                    "block_settings": [],
                    "contexts": []
                },
                "uuid": "09f11b4e-877e-45ab-9000-a4c6254faa04",
                "style": {
                    "plugin": "default",
                    "data": {
                        "settings": {
                            "classes": ""
                        }
                    }
                }
            }
        },
        "a549d0bc-51f7-46b0-9b41-653788410dd4": {
            "plugin": "system:page_components:title_combo",
            "data": {
                "status": 1,
                "module": "system",
                "delta": "page_components",
                "settings": {
                    "title_display": "default",
                    "title": "",
                    "style": "default",
                    "block_settings": [],
                    "contexts": [],
                    "title_tag": "h1",
                    "title_classes": "page-title",
                    "tab-type": "both",
                    "tab_type": "both"
                },
                "uuid": "a549d0bc-51f7-46b0-9b41-653788410dd4",
                "style": {
                    "plugin": "default",
                    "data": {
                        "settings": {
                            "classes": ""
                        }
                    }
                }
            }
        },
        "default": {
            "plugin": "system:main",
            "data": {
                "status": 1,
                "module": "system",
                "delta": "main",
                "settings": {
                    "title_display": "default",
                    "title": "",
                    "style": "default",
                    "block_settings": [],
                    "contexts": []
                },
                "uuid": "default",
                "style": {
                    "plugin": "default",
                    "data": {
                        "settings": {
                            "classes": ""
                        }
                    }
                }
            }
        },
        "526a1e17-9fd5-47bd-8e04-808d172d50b9": {
            "plugin": "node:recent",
            "data": {
                "status": 1,
                "module": "node",
                "delta": "recent",
                "settings": {
                    "title_display": "default",
                    "title": "",
                    "style": "default",
                    "block_settings": {
                        "node_count": "10"
                    },
                    "contexts": [],
                    "admin_label": "",
                    "admin_description": ""
                },
                "uuid": "526a1e17-9fd5-47bd-8e04-808d172d50b9",
                "style": {
                    "plugin": "default",
                    "data": {
                        "settings": {
                            "classes": ""
                        }
                    }
                },
                "conditions": [
                    {
                        "plugin": "front",
                        "data": {
                            "settings": {
                                "negate": true,
                                "load_condition_nojs": "Load condition"
                            }
                        }
                    }
                ]
            }
        },
        "f28e26e3-3efe-46e6-b542-edbaa47a0fb5": {
            "plugin": "views:promoted_cards-block",
            "data": {
                "status": 1,
                "module": "views",
                "delta": "promoted_cards-block",
                "settings": {
                    "link_to_view": 0,
                    "more_link": false,
                    "use_pager": false,
                    "pager_id": 0,
                    "items_per_page": "3",
                    "offset": 0,
                    "path": null,
                    "fields_override": null,
                    "title_display": "default",
                    "title": "",
                    "style": "default",
                    "block_settings": [],
                    "contexts": [],
                    "allowed": [],
                    "path_override": false,
                    "exposed": [],
                    "admin_label": "",
                    "admin_description": ""
                },
                "uuid": "f28e26e3-3efe-46e6-b542-edbaa47a0fb5",
                "style": {
                    "plugin": "default",
                    "data": {
                        "settings": {
                            "classes": ""
                        }
                    }
                },
                "conditions": [
                    {
                        "plugin": "front",
                        "data": {
                            "settings": {
                                "negate": false,
                                "load_condition_nojs": "Load condition"
                            }
                        }
                    }
                ]
            }
        },
        "cd4d033d-3f67-4191-8655-85ee758877c0": {
            "plugin": "system:powered-by",
            "data": {
                "status": 1,
                "module": "system",
                "delta": "powered-by",
                "settings": {
                    "title_display": "default",
                    "title": "",
                    "style": "default",
                    "block_settings": [],
                    "contexts": []
                },
                "uuid": "cd4d033d-3f67-4191-8655-85ee758877c0",
                "style": {
                    "plugin": "default",
                    "data": {
                        "settings": {
                            "classes": ""
                        }
                    }
                }
            }
        }
    }
}

Hi @aubergine

I imported your layout; I had to change the template as I don't have "toz" on the demo system so I changed it to "boxton".

It worked.  That suggests that the problem is with your "toz" template.

Have a good look at https://docs.backdropcms.org/documentation/developing-layouts

Check that you have a toz.info file that follows the default formats and then check that the template has no errors.  Have a look at the core layouts to get a feel for standards and patterns to follow.

My template file for toz.

<?php
/**
 * @file
 * Template for the Moscone layout.
 *
 * Variables:
 * - $title: The page title, for use in the actual HTML content.
 * - $messages: Status and error messages. Should be displayed prominently.
 * - $tabs: Tabs linking to any sub-pages beneath the current page
 *   (e.g., the view and edit tabs when displaying a node.)
 * - $action_links: Array of actions local to the page, such as 'Add menu' on
 *   the menu administration interface.
 * - $classes: Array of CSS classes to be added to the layout wrapper.
 * - $attributes: Array of additional HTML attributes to be added to the layout
 *     wrapper. Flatten using backdrop_attributes().
 * - $content: An array of content, each item in the array is keyed to one
 *   region of the layout. This layout supports the following sections:
 *   - $content['header_top']
 *   - $content['search_box']
 *   - $content['header']
 *   - $content['top']
 *   - $content['content']
 *   - $content['sidebar']
 *   - $content['sidebar2']
 *   - $content['bottom']
 *   - $content['footer']
 */
?>
<div class="layout--toz <?php print implode(' ', $classes); ?>"<?php print backdrop_attributes($attributes); ?>>
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
  </div>

    <?php if ($content['header_top'] || $content['search_box']): ?>
    <div class="l-header-top">
    <div class="l-header-top-inner container container-fluid">
        <?php if ($content['header_top']): ?>
            <div class="header-top-content">
                <?php print $content['header_top']; ?>
            </div>
        <?php endif; ?>
        <?php if ($content['search_box']): ?>
            <div class="search-box-content">
                <?php print $content['search_box']; ?>
            </div>
        <?php endif; ?>
    </div>
    </div>
    <?php endif; ?>

  <?php if ($content['header']): ?>
    <header class="l-header" role="banner" aria-label="<?php print t('Site header'); ?>">
      <div class="l-header-inner container container-fluid">
        <?php print $content['header']; ?>
      </div>
    </header>
  <?php endif; ?>

  <div class="l-wrapper">
    <div class="l-wrapper-inner container container-fluid">

      <?php if ($messages): ?>
        <div class="l-messages" role="status" aria-label="<?php print t('Status messages'); ?>">
          <?php print $messages; ?>
        </div>
      <?php endif; ?>

      <div class="l-page-title">
        <a id="main-content"></a>
        <?php print render($title_prefix); ?>
        <?php if ($title): ?>
          <h1 class="page-title"><?php print $title; ?></h1>
        <?php endif; ?>
        <?php print render($title_suffix); ?>
      </div>

      <?php if ($tabs): ?>
        <nav class="tabs" role="tablist" aria-label="<?php print t('Admin content navigation tabs.'); ?>">
          <?php print $tabs; ?>
        </nav>
      <?php endif; ?>

      <?php print $action_links; ?>

      <?php if (!empty($content['top'])): ?>
        <div class="l-top">
          <?php print $content['top']; ?>
        </div>
      <?php endif; ?>

      <div class="l-middle row">

        <?php if (!empty($content['sidebar2']) && (!empty($content['sidebar']))): ?>
          <main class="l-content col-md-6 col-md-push-3" role="main" aria-label="<?php print t('Main content'); ?>">
            <?php print $content['content']; ?>
          </main>

          <aside class="l-sidebar l-sidebar-first col-md-3 col-md-pull-6" role="complementary">
            <?php print $content['sidebar']; ?>
          </aside>

          <aside class="l-sidebar l-sidebar-second col-md-3" role="complementary">
            <?php print $content['sidebar2']; ?>
          </aside>
        <?php endif; ?>

        <?php if (empty($content['sidebar2']) && (!empty($content['sidebar']))): ?>
        <main class="l-content col-md-9 col-md-push-3" role="main" aria-label="<?php print t('Main content'); ?>">
          <?php print $content['content']; ?>
        </main>

        <aside class="l-sidebar l-sidebar-first col-md-3 col-md-pull-9" role="complementary">
          <?php print $content['sidebar']; ?>
        </aside>
        <?php endif; ?>

        <?php if (!empty($content['sidebar2']) && (empty($content['sidebar']))): ?>
          <main class="l-content col-md-9" role="main" aria-label="<?php print t('Main content'); ?>">
            <?php print $content['content']; ?>
          </main>

          <aside class="l-sidebar l-sidebar-second col-md-3" role="complementary">
            <?php print $content['sidebar2']; ?>
          </aside>
        <?php endif; ?>

        <?php if (empty($content['sidebar2']) && (empty($content['sidebar']))): ?>
          <main class="l-content col-md-12" role="main" aria-label="<?php print t('Main content'); ?>">
            <?php print $content['content']; ?>
          </main>
        <?php endif; ?>

      </div><!-- /.l-middle -->

      <?php if (!empty($content['bottom'])): ?>
        <div class="l-bottom">
          <?php print $content['bottom']; ?>
        </div>
      <?php endif; ?>

    </div><!-- /.l-wrapper-inner -->
  </div><!-- /.l-wrapper -->

  <?php if ($content['footer']): ?>
    <footer class="l-footer" role="contentinfo">
      <div class="l-footer-inner container container-fluid">
        <?php print $content['footer']; ?>
      </div>
    </footer>
  <?php endif; ?>
</div><!-- /.layout--moscone -->

I've added both of those to a test site and the block page has worked (albeit I got some Undefined Array warnings on my test site using PHP 8.1).  Where are you in the world? Are you able to join one of our Office Hours sessions today (Wednesday 10th May)? Then you could share your screen and someone could try and work out what is happening

See https://backdropcms.org/news/events/office-hours-3 for times in your timezone

This is how it looks for me. Pure backdrop 1.24.2 installation

Please can you share your "toz.info" file.

toz.info

type = layout
name = Toz
version = BACKDROP_VERSION
backdrop = 1.x

; Specify regions for this layout.
regions[header_top] = Header Top
regions[search_box] = Search box
regions[header]     = Header
regions[top]        = Top
regions[content]    = Content
regions[sidebar]    = First Sidebar
regions[sidebar2]   = Second Sidebar
regions[bottom]     = Bottom
regions[footer]     = Footer

; The default region automatically receives the "Main Content" block if needed.
default region = content

; Include a file for special preprocessing of this layout's variables.
; file = toz.php

; Default stylesheets for this layout
stylesheets[all][] = toz.css

; Preview
preview = toz.png

; Include the Bootstrap4 Grid System
libraries[] = bootstrap4-gs

 

toz.css

/**
 * @file
 * Component Layout CSS and some Page layout overrides
 */
.admin-bar body .layout {
    padding-top: 33px;
    margin-top: -33px;
}

.layout .l-messages {
    margin: 0 0 2rem;
}

.layout {
    box-sizing: border-box;
    height: 100vh;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.l-wrapper {
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}
.l-header,
.l-footer {
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.l-header {
    position: relative;
    width: 100%;
    height: 160px;
    clear: both;
    padding: 4px 0;
    margin: 0 0 2rem;
}

.l-header.small {
    width: 100%;
    height: 160px;
    position: fixed !important;
    margin: 0 0 2rem !important;
    box-shadow: 0 12px 12px -6px #444;
    padding: 4px 0;
    z-index: 1011;
}

.l-footer {
    position: relative;
    width: 100%;
    height: auto;
    clear: both;
    padding: 4px 0;
    margin: 2rem 0 0;
}

 

It's something to do with your CSS file. 

If I comment it all out, then the manage blocks page works as expected.

If I comment out .layout definition then it almost works but header is a bit squashed.

Have a look at this layout in contrib and how it uses the class for the layout in each definition so 

https://github.com/backdrop-contrib/bamboo/blob/1.x-1.x/bamboo.css

You probably need ".layout--toz " in front of each (note the space)

Except the admin-bar one would become " .admin-bar body .layout--toz .layout" 

I think you will also need to add some qualifiers like:

".page" AND/OR ".node-type-page" depending where you are using it.

The height definitions in your CSS are being applied on the admin page because there are no classes limiting to pages.

 

So, thats why none of the supplied layouts use css even the option is there.

This sort of beats the purpose of layouts which i dont like at all and the main reason i just cant love backdrop cms even if i want to.

I'm sorry you feel like that.

The main issue with yours is that you specify heights; most of the CSS is not going to cause a problem of the admin page.

Here you go. You may need a few tweaks:

/**

 * @file

 * Component Layout CSS and some Page layout overrides

 */

 .admin-bar body .node-type-page .layout--toz .layout {

  padding-top: 33px;

  margin-top: -33px;

}


.node-type-page .layout--toz .layout .l-messages {

  margin: 0 0 2rem;

}


.node-type-page .layout--toz .layout {

  box-sizing: border-box;

  height: 100vh;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-flex-direction: column;

  -ms-flex-direction: column;

  flex-direction: column;

}


.node-type-page .layout--toz .l-wrapper {

  -webkit-flex: 1 0 auto;

  -ms-flex: 1 0 auto;

  flex: 1 0 auto;

}

.node-type-page .layout--toz .l-header,

.node-type-page .layout--toz .l-footer {

  -webkit-flex: 0 0 auto;

  -ms-flex: 0 0 auto;

  flex: 0 0 auto;

}


.node-type-page .layout--toz .l-header {

  position: relative;

  width: 100%;

  height: 160px;

  clear: both;

  padding: 4px 0;

  margin: 0 0 2rem;

}


.node-type-page .layout--toz .l-header.small {

  width: 100%;

  height: 160px;

  position: fixed !important;

  margin: 0 0 2rem !important;

  box-shadow: 0 12px 12px -6px #444;

  padding: 4px 0;

  z-index: 1011;

}


.node-type-page .layout--toz .l-footer {

  position: relative;

  width: 100%;

  height: auto;

  clear: both;

  padding: 4px 0;

  margin: 2rem 0 0;

}

What happens if i have different node-types later? I think ill just move the css to the theme instead of using within the layout.

This was an example only. I'm trying to be helpful here.

Look at the pages you need to do it on and consider what will best work.

Perhaps use a wildcard selector

div[class^="node-type"]

Sorry if i offended, you are really helpful and i should thank you for that.

i just dont like the layouts concept since the day i met backdrop cms.

 

Funny thing is, even if i comment out the css reference from the layout info file, but keep the css file inside the layout folder, admin page still uses this css file and ignores what is written in the layout info file. This must be a bug.