Updated on 19 June 2024
This article is a compilation of some possible editor tweaks that make working with the Bricks builder better. “Better” is of course subjective and not all these are useful to everyone.
Custom CSS for the editor interface can be entered in Bricks → Settings → Builder → Builder Mode: Custom → Save Settings → Builder Mode (Custom) text area.
The following were tested in Bricks 1.5 with the dark (default) editor theme.
Table of Contents
- Make highlight of the active element in the structure more prominent
- Sticky structure panel header
- Make “View on frontend” button always appear
- Make + button more prominent
- Make active STYLE panel more prominent
- Make controls separators more prominent
- Make active class prominent
- Move element actions under the element
- Larger input area for Margin and Padding inputs
- Move the structure panel to the left side
- Make the “Has Setting” indicator more prominent
- Increase the opacity of element states svgs in the Structure panel
- Reorder pinned elements
- Increase font-size of control labels for readability
Make highlight of the active element in the structure more prominent
Before
After
CSS:
/* --- Make highlight of the active element in structure more prominent --- */
#bricks-structure .element.active>.structure-item {
background-color: var(--builder-color-accent);
}
#bricks-structure .element.active>.structure-item input,
#bricks-structure .element.active>.structure-item>.title input,
#bricks-structure .element.active>.structure-item>.title i,
#bricks-structure .element.active .structure-item .more {
color: #000;
}
#bricks-structure .element.active>.structure-item input::-moz-selection { /* Code for Firefox */
color: #fff;
background: #1a99e0;
}
#bricks-structure .element.active>.structure-item input::selection {
color: #fff;
background: #1a99e0;
}
#bricks-structure .element.active > .structure-item:hover .actions .action .bricks-svg-wrapper path {
color: #111;
}Sticky structure panel header
#bricks-structure #bricks-panel-header {
position: sticky;
top: 0;
background-color: var(--builder-bg);
}Make “View on frontend” button always appear
At the moment accessing the “View on frontend” needs a click on “Preview mode” button first.
We can reduce this by adding:
/* --- Make "View on frontend" button always appear */
#bricks-toolbar li.new-tab {
display: flex !important;
}
Credit for idea: Yan Kiara.
Make + button more prominent
Before:
After:
/* --- Make + button more prominent */
#bricks-toolbar .logo {
background-color: #818689;
}
#bricks-toolbar .logo:hover {
background-color: var(--builder-color-accent);
}
#bricks-toolbar li.elements {
background-color: var(--builder-color-accent);
opacity: 1;
}
#bricks-toolbar li.elements:hover {
background-color: #edca5b;
}
#bricks-toolbar li.elements .bricks-svg-wrapper .bricks-svg {
color: var(--builder-border-color);
}Credit for idea:
Make active STYLE panel more prominent
Before
After
/* --- Make active STYLE panel more prominent */
.bricks-panel-controls .control-group.open .control-group-title {
background-color: var(--builder-color-accent);
color: #000;
font-weight: 600;
letter-spacing: 2px;
}
.control-group.open {
background-color: #161614;
}Credit: James Lively
Make controls separators more prominent
Before
After
/* --- Make controls separators more prominent */
.bricks-panel-controls .control-groups .control-separator {
background-color: var(--builder-bg-accent);
margin: 0;
padding: 10px 20px;
}
.bricks-panel-controls .control-separator label {
letter-spacing: 2px;
font-weight: 500;
font-size: 11px;
padding: 0;
}
.bricks-panel-controls .control-separator .control-inner {
gap: 0;
}
.bricks-panel-controls .control {
margin-bottom: 8px;
}
[data-control=separator]:before {
display: none;
}Make active class prominent
Before
After
/* --- Make active class prominent */
#bricks-panel-element-classes .active-class.active input {
background-color: var(--wp--preset--color--light-green-cyan);
color: #000;
}Move element actions under the element
Not needed for 1.5 beta and above.
Before
After
Add the following at Bricks → Settings → Custom code:
/* --- Move element actions under the element --- */
.brx-body.iframe .bricks-element-actions {
top: 100%;
}Larger input area for Margin and Padding inputs
Before
After
div[data-controlKey="_margin"] ul.dimensions,
div[data-controlKey="_padding"] ul.dimensions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}Credit: Keviin Cosmos.
Move the structure panel to the left side
#bricks-preview.show-structure {
margin-right: unset;
margin-left: 300px;
}
#bricks-structure {
right: unset;
left: 300px;
}
#bricks-panel {
z-index: 1000;
}Credit: Keviin Cosmos.
Make the “Has Setting” indicator more prominent
Before
After
CSS:
/* --- Prominent Has Setting Indicators --- */
.bricks-panel-controls .has-setting {
left: -11px;
width: 3px;
background-color: var(--builder-color-accent);
transition: background-color 0.1s;
transform: none;
}
.bricks-panel-controls .control-group-title .has-setting {
left: 9px;
}
.bricks-panel-controls .has-setting:hover {
background-color: transparent;
}
.bricks-panel-controls .has-setting .indicator {
display: none;
}Credit: Doug Rider.
Increase the opacity of element states svgs in the Structure panel
Before
After
/* --- Turn off 0.5 opacity of element states svgs --- */
#bricks-structure .structure-item .element-states svg {
opacity: 1;
}Reorder pinned elements
If you would like to reorder pinned elements, here’s some sample CSS you could use.
/* --- Reorder pinned elements */
.bricks-add-element[data-element-name="section"] {
order: 1;
}
.bricks-add-element[data-element-name="container"] {
order: 2;
}
.bricks-add-element[data-element-name="div"] {
order: 3;
}
.bricks-add-element[data-element-name="heading"] {
order: 4;
}
.bricks-add-element[data-element-name="text-basic"] {
order: 5;
}
.bricks-add-element[data-element-name="code"] {
order: 6;
}
.bricks-add-element[data-element-name="image"] {
order: 7;
}
.bricks-add-element[data-element-name="post-title"] {
order: 8;
}
.bricks-add-element[data-element-name="button"] {
order: 9;
}
.bricks-add-element[data-element-name="template"] {
order: 10;
}
.bricks-add-element[data-element-name="shortcode"] {
order: 11;
}
.bricks-add-element[data-element-name="posts"] {
order: 12;
}Increase font-size of control labels for readability
I find the default font size of controls a tad tiny and the contrast in some areas not so great due to low opacity of certain elements.
The following CSS improves the readability a bit.
/* --- Improve readability --- */
[data-builder-mode=custom] {
--builder-placeholder-opacity: .75;
--builder-color-description: #ddd;
}
#bricks-panel-elements-categories .category-title {
font-size: 16px;
letter-spacing: 1px;
}
#bricks-panel-search {
font-size: 16px !important;
}
.bricks-add-element .element-label,
.bricks-structure-list input[type="text"],
#panel-element-classes .bricks-control-popup ul li .name,
.bricks-panel,
.bricks-panel-controls .control-group-title,
.bricks-panel-controls .control .description {
font-size: 15px;
}
#panel-element-classes .active-class input,
#panel-element-classes .active-class .symbol,
[data-balloon]:after {
font-size: 14px;
}
[data-control=editor] .wp-editor-tools button {
font-size: 13px;
}Before
After
23 comments
Philipp
Thank you for this tweaks! Really useful and help a lot... And especially thank you for updating still the site!!
Joe Fletcher
There are new icons inside the structure items that get messed up with the CSS above. So I changed it from fill: #111 to color: black.
/* Icons - Active structure item */
#bricks-structure .element.active > .structure-item:hover .actions .action .bricks-svg-wrapper path {
color: black;
}
Sridhar Katakam
Thanks Joe. Updated the tutorial.
kostas
is there any tutorial of how to add extra functionality in bricks builder panel? Lets say an extra button for dark and light toggle in top bar of the builder?
marko
can we add less straining info panel color, and admin panel item background of different color?
.bricks-panel-controls .control-group.open {
background-color: rgba(0, 125, 255, .05);
}
and
[data-control="info"] {
background-color: rgba(0, 0, 255, .1);
outline: 1px solid cyan;
}
xavier
Hello,
Can anyone help me with the following: I have issue with custom css panel, everytime I enter to write- the panel will collapse does not stay expanded so is very difficult to write when the panel is collapse...
Can anyone let me know how to fix the issue? to make it expanded always and to not collapse...?
Please send your answer to my email,
Thank you very much...
Pipo
How do you get the different colors for sections, container, etc. in the builder? In my builder they are all blue...
David Browne
This was from an older version of Bricks where the borders would change depending on different elements. It's implemented differently now, the color is always the same as it's always the same border just moving around.
Zoltán
I like these customization options, I managed to make the editing interface more transparent. Thanks for the presentation.
Mario
Better view of a locked class:
.active-class.active:has(.locked) {
border: 1px solid #ffd64f!important;
}
Karthikeyan Ramnath
Can you tag this as setup/guide as it makes sense to be grouped with the other article tagged as setup/guide pls
Shawn C Standiford
Hi,
One of my bigger struggles is hovering over that little arrow on the left panel (settings, elements, etc) to close it. Unless I'm missing something, that little fussy arrow is the only way to close the panel. How would I fix it so the arrow is at least larger and easier to click on with a mouse?
Brandon McNeill
Regarding the modification "Move the structure panel to the left side" - I notice that accessing a Code Block causes the Bricks Panel to expand to the right (overlapping the Structure Panel). When it does this - it pushes a 300px left margin on the Preview pane - causing a large whitespace between the left pane and the preview pane. Anyone know how to possibly correct this?
Matt Eastwood
Hey Sridhar, thanks for these tweaks, they're quite useful. Only one thing: if a style panel has settings, it has a yellow dot next to it that becomes invisible if the style panel's title is highlighted. I propose the following small extra rule:
.bricks-panel-controls .control-group.open .control-group-title .has-setting .indicator {
background-color: #161614;
}
Screenshot:
https://paste.pics/HUOD3
Daniel Fawcett
Do we know what has been updated on 19/07/22?
Just noticed this is updated but not sure what is new. Can we have a changelog or similar ?
Karthikeyan Ramnath
I think the class bricks-element-actions has been replaced by bricks-highlight-element
Sridhar Katakam
I tested that CSS in v1.4.0.2.
Thomas wrote in Facebook that this won't be necessary because it's going to be taken care of v1.5 which is due next week.
Sharif Payenda
For RTL languages in order to move structure panel, change right to left and left to right. something like this:
#bricks-preview.show-structure {
margin-left: unset;
margin-right: 300px;
}
#bricks-structure {
left: unset;
right: 300px;
}
#bricks-panel {
z-index: 1000;
}
Andy von Busse
Being of the "older" type, I appreciate the code for letter size, as well as the active element. This helps a LOT for visibility and use.
John
Sridhar,
Thank you AGAIN for your gracious and relevant contributions to the community.
Where do you recommend as the best place to put these modifications?
Sridhar Katakam
Hi John,
Check this para near the top of this article: https://d.pr/i/gZLtm9.
Joe Connor
Thanks for those - I added the lot. Visibility trumps pretty much everything in UX design as I get older and less trendy!
Jo
Thanks a lot for those tweaks. I especially like the highlight of the active element in the structure!