Bricks Builder Editor Tweaks

Updated on 11 Aug 2022

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

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 {
	fill: #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%;
}

Facebook topic.

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

Forum topic.

Instant access to 390+ Bricks code tutorials with BricksLabs Pro

19 comments

  • 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;
    }

  • 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...

  • How do you get the different colors for sections, container, etc. in the builder? In my builder they are all blue...

    • A
      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.

  • 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?

  • 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

    • A

      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;
    }

  • 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.

  • 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?

  • Thanks for those - I added the lot. Visibility trumps pretty much everything in UX design as I get older and less trendy!

  • Thanks a lot for those tweaks. I especially like the highlight of the active element in the structure!

Leave a Reply to Karthikeyan Ramnath (Cancel Reply)