🖱 Scrollbar Customizer - New Plugin for Bubble

Hey Bubblers!

I would like to introduce to you today a new free plugin I’ve just released on the Bubble plugin marketplace, called Customisable Scrollbars. The plugin allows you to change the look and feel of page & repeating group scrollbars, all you need to do is specify the colors in the plugin fields. Enjoy!

If you have any suggestions on how to improve the plugin, please feel free to tell me!

16 Likes

Thank you @marcusandrews this is something I could really do with. But, I’m still relatively new and I can’t work out how to use it. I’ve installed the plugin. I see no Page HTML code in the Page Inspector. I see no new elements. I see no new options on an RG in the inspector. Any hints or a demo editor & live app?

You just need to specify the colours you want in the plugin settings.

Thank. I just pasted some hex codes in and it worked perfectly. Thanks for sharing.

Glad it worked!

I can’t seem to figure out how to use it. I’ve added hex codes and tested every possible way.

It is not working for me now either.

Did notice this earlier today, and am working on it. As a temporary remedy, please use this HTML in the header of your application:

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 5px;
background-color: _*_Scrollbar Track Color_*_;
}
::-webkit-scrollbar
{
width: 5px;
background-color: _*_Scrollbar Color_*_;
}
::-webkit-scrollbar-thumb
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: _*_Scrollbar Thumb Color_*_;
}
  ::selection {
  background: _*_Scrollbar Track Color_*_;
  color:#FFF;
  text-shadow:none;
:: moz-selection 
   background: _*_Scrollbar Track Color_*_;
  color:#FFF;
  text-shadow:none;

Please replace the API Key bits with your hex codes.

2 Likes

Was the reason for it stopping working something that bubble have changed or something you changed? I ask because there seems to be lots of little incidents when people are using Page HTML headers since the rebrand.

Yeah, I haven’t really touched anything since release so I think this is the way Bubble is rendering page HTML.

@marcusandrews things are worse than we thought … your plugin now causes selected text (when double-clicked) in an input field to be hidden in some cases see Text disappearing when selected

Looking into this right now, will update when I find a fix.

UPDATE: 22/8/2018

  • Deleted some duplicate code that was making the plugin not work properly
  • General bug fixes

If you experience any more issues, please email marcusandrews2018@gmail.com or post in this thread.

Version 5.0.0

New update to the plugin that comes with much-needed bug fixes & customisation options

Added:

  • More customisation options: new options to change width, hover color, shadow color and more

Improved:

  • Bug fixes to the plugin that would cause it to make selected text disappear (thanks to @patricia )

If you do experience any more bugs or have any suggestions email me on: marcusandrews2018@gmail.com.

Thanks you all!

3 Likes

:+1: :heart:

Hey Marcus, Thank you for your time developing this.

I can not find the plugin in the bubble plugins directory, did you take it out?

Cheers!

Nope, it’s still there - https://bubble.io/plugin/custom-scrollbar-plugin-1523620582159x214454119804698620

Hi @marcusandrews

I don’t see either the plugin. Unless using a different name?

your link shows the plugin:

but this is what I see in the plugins list:

Had to publish this as a new plugin - https://bubble.io/plugin/scrollbar-customizer-1542537231741x609068991519391700

1 Like

@marcusandrews Amazing plugin!. Just one thing: for some reason Customisable Scrollbars doesn’t work when in put a Repeating group inside a Focus group.