Left Structure Panel in Bricks Editor

Eric shared some CSS code in the Bricks Facebook group to move the structure panel in between the element panel and canvas here.

I think it makes more sense to move the structure panel all the way to the left to maintain the hierarchy of all elements and then see/edit the properties for the selected element.

This layout reduces hand fatigue considerably by avoiding moving the mouse all the way to the right and back to the left multiple times, especially when working on large displays.

Note

The issue is it breaks some AT layouts, such as the tooltips on the element shortcuts, or the AT modals that are shown in sidebars. A full left structure panel integration would require some decent amount of code change.
Maxime Beguin

Below are the steps to achieve this layout in the Bricks builder editor with WPCodeBox when using Advanced Themer:

Step 1

Add a new CSS snippet in WPCB.

When done, it should look like this:

CSS:

/* Move structure panel to left */
body #bricks-structure {
    order: -1;
    padding-left: 52px; /* to make room for AT shortcuts panel (40 + 12) */
    width: 360px !important; /* delete this line if you want resizable structure panel */
}

/* Move AT shortcuts panel to the left */
#bricks-structure[data-has-shortcuts-sidebar="true"] .brxce-panel-shortcut__wrapper {
    left: 0;
}

/* Avoid stretching labels inside the Structure Panel */

#bricks-structure .structure-item .actions {
    display: none;
}

#bricks-structure .structure-item:hover .actions {
    display: flex;
}

/* Make the structure panel content take up full width */
body #bricks-structure[data-has-shortcuts-sidebar="true"] #bricks-panel-header,
body #bricks-structure[data-has-shortcuts-sidebar="true"] main.panel-content {
    grid-column: 1/3;
}

/* Make element context menu appear on top */
#bricks-builder-context-menu {
    z-index: 2003 !important;
}

If you prefer the structure panel to be resizable delete 360px width for body #bricks-structure.

PHP condition:

<?php 
bricks_is_builder_main();

Step 2

Regarding the width of the element panel, since the elements shortcut panel takes up 40px width you may want to increase its width.

Add this JS snippet:

document.addEventListener("DOMContentLoaded", (e) => {
    ADMINBRXC.vueState.panelWidth = 360
});

Condition:

<?php 

bricks_is_builder();

Thanks to Maxime for some code.
https://advancedthemer.com/avoid-stretching-labels-inside-the-structure-panel/

Get access to all 537 Bricks code tutorials with BricksLabs Pro

2 comments

Leave your comment

 

Related Tutorials..

Using WPCodeBox for Bricks-specific snippets

Using WPCodeBox for Bricks-specific snippets

Updated on 9 May 2024 WPCodeBox is an excellent code snippets plugin if you are looking for an alternative to the child theme or a…
Categories:
Tags:
How to Change Bricks Preloader Background Color

How to Change Bricks Preloader Background Color

Working on a dark-themed site like our friend Storm and getting blinded by the light background of Bricks' preloader screen of the editor? Here's how…
Categories:
Collapse All button for Elements in Bricks Editor

Collapse All button for Elements in Bricks Editor

Bricks' editor shows the various buttons to add elements in the left side grouped into different categories. While it is possible to collapse them all…
Categories: