How to tweak Bricks Builder editor

| July 20, 2022 (Updated July 24, 2022)

In this tutorial, we will explore how to make Bricks Builder editor a little bit more pleasant to use. We will learn how to tweak it and where to put all necessarily CSS Styles. Let’s start!

Where to put the code?

Here, we will work mostly with CSS and for this, you have more options on where to put the code. Because we will customize Bricks Builder editor, we will not use “Code Element” in Bricks, but we will need to put our code somewhere else. Let’s take a look at two of the options:

  • Code Snippet plugin
  • Bricks Builder custom CSS mode

You can use any of the options above and it should work the same. We will use code snippet plugin, but, if you will use Bricks Builder custom CSS, you will put all CSS in the “Bricks > Settings > Builder > Builder mode (Custom)”, just like the image below shows. If you need help, just let us know in the comments or contact us via contact form.

Hint: If you don’t see Builder Mode (Custom) then you must select “Custom” at “Builder Mode” option – option 4 on the image below, and then you must press “Save” button to refresh the screen.

Toolbar settings

We will take a look at the toolbar and how can we change and improve it.

Hide “Help” icon

Maybe we don’t need “Help” icon in the left corner of the toolbar and we would like to remove it because we to often click on it accidentally. We can remove it with following CSS:

#bricks-toolbar .docs{
  display:none;
}

We can see on the image above that the “Help” icon has now disappeared, but we have a small problem left and that is, that now we have too much space on the left site. We will fix this with next CSS snippet, which you can add just below the last one.

#bricks-toolbar .group-wrapper.left {
  min-width: 260px;
}

You can see in the image above that now the space on the left is back to normal. You may ask yourself why did we set min-width:240px; to 240px. This is because the default value is 300px and the width of the “Help” icon that we removed is 40px.

Here is the full code:

#bricks-toolbar .docs{
  display:none;
}

#bricks-toolbar .group-wrapper.left {
  min-width: 260px;
}

Make “Elements” button bigger

The “+” or “Elements” button in the Bricks Toolbar is one of the most used button (at least for me) and it would be nice, if we can make it bigger. To do that, we need to set width property of it to larger value and we do it so with following CSS:

#bricks-toolbar .elements{
  width:80px;
}

The “+” button is now bigger and easier to press, but now everything is more squished to the left site. To fix this, we need to also set min-width of the .group-wrapper.left to 340px. Note: If we did the previous tutorial and hide the “Help” icon, then we need to remove second part of the code or set width to default, which is 300px.

#bricks-toolbar .group-wrapper.left {
  min-width: 340px;
}

Now we can see that we have bigger “+” button and also some space on the left side. Below is the full CSS code:

/*Note: If you also hid the "Help" icon, you don't need this and you should also remove this code if you have it. */
#bricks-toolbar .group-wrapper.left {
  min-width: 340px; 
}

#bricks-toolbar .elements{
  width:80px;
}

I hope you learned something new and if you have any questions, let me know.

Leave the first comment