SOLVED: Bricks and left panel scroll bar

How To
1

I was born with a disability. It prevents me from operating the mouse wheel. Question: Is it possible to add a scroll bar to the left Brics panel in a relatively easy way? I would like to be able to drag it instead of scrolling.
To clarify, I want to achieve the effect as shown in the screenshot

sb
sb583Ă—922 24.2 KB

2

Hi Adam,
Welcome to the forum, and thanks for reaching out!

Yes, that’s possible in two ways:

1. Using a child theme to override the builder styles
I have adapted the default child theme for you so that another stylesheet is loaded: builder-overrides.css.

This adds the following code so that the scrollbar becomes visible. However, I had to remove the panel-resize div because otherwise the scrollbar would overlay it and it wouldn’t be very easy to use. You can change the colors and the width to your liking.

/* Enable #bricks-panel-scrollbar */
/* width */
#bricks-panel-inner::-webkit-scrollbar {
  width: 10px;
}

/* Track */
#bricks-panel-inner::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
#bricks-panel-inner::-webkit-scrollbar-thumb {
  background: indianred;
}

/* Handle on hover */
#bricks-panel-inner::-webkit-scrollbar-thumb:hover {
  background: red;
}

/* Disable panel-resizable div */
#bricks-panel-resizable {
  display: none;
  visibility: hidden;
}

You can download the adapted child theme here: Dropbox - bricks-child-scrollbar.zip - Simplify your life

2. Using a custom code plugin
Add the code above to a plugin like code snippets, wpcodebox, advanced scripts, or any other “custom code” plugin. Adding the code to Bricks » Settings » Custom code doesn’t work, as it will only affect the builder iFrame, not the surrounding builder elements itself.

Best regards,
timmse

2 Likes
3

Yay, you are awesome and blazing fast. Thank you :beer:

brave_uvU412ViNT
brave_uvU412ViNT442Ă—664 15.6 KB

1 Like
4

Could u help me again with this tune? Its stop working couple updates ago…

5

Hi @Adam,
The CSS specs for scrollbars have obviously been revised: Scrollbar styling  |  CSS and UI  |  Chrome for Developers

If you are using a current version of Chrome, Edge or Firefox, the following styles are sufficient in builder-overrides.css. I have adapted the child theme accordingly.

#bricks-panel-inner {
  scrollbar-width: auto;
  scrollbar-color: hotpink blue;
}

Best regards,
timmse

6

What a good find! I have always wanted to use a scroll bar because my large trackball mouse (for my finger problems) has a very difficult to use scroll wheel. I just downloaded the child theme zip file linked in your original response and it looks like it contains the updated css.

Thanks to @Adam for asking the question and @timmse for the solution!

7

Im really struggling as somehow the default scrollbar width is showing as none, and eveb if I add
div #bricks-panel-inner {
scrollbar-width: 15px !important;
scrollbar-color: yellow !important;
}

it gets stricked through when you inspect it! I’m adding the code in the Bricks settings, Builder, mode and even though it shows ahead of the

#bricks-panel-inner {
height: 100%;
overflow-y: scroll;
scrollbar-width: none;
}
it’s still strucked through

}