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/
2 comments
eins walter
Thanks.
But I think JS code to copy is missing.
Sridhar Katakam
Updated.