To make changes to your scrollbar without using a plugin, you have to make changes to several CSS elements. We showed you how to do that by placing some code into your style.php file but if you need a faster and easier approach, Dewdrop Custom Scrollbar is the plugin you are searching for.
Instead of messing around with the code, this free plugin will make everything much simpler.
Dewdrop Custom Scrollbar
And to make everything even better, the plugin will take care of all browsers so you won’t have to add exceptions for Firefox and Internet Explorer to show the customized version of your scrollbar.
There are few options you can choose from after you install the plugin so let’s take a quick tour:
- Go to Plugins->Add New
- Search for “Dewdrop Custom Scrollbar”
- Install and activate the plugin
- Navigate to Settings->Dewdrop Custom Scrollbar to open the admin panel. Here you will have several options:
- Save changes and enjoy your new scrollbar
– Scrollbar color: simply choose a color for your scrollbar from the color picker
– Scrollbar width: select scrollbar width in pixels
– Scrollbar height: select scrollbar height in pixels
– Scrollbar border width: if you want to have a border around your scrollbar thumb, choose its width in pixels
– Scrollbar border color: select a color for the border
– Scrollbar border radius: select border radius in pixels
– Scrollbar speed: make your scrollbar faster or slower; lower number increases speed while higher number will decrease the speed
– Scrollbar Autohide Settings: choose if you want your scrollbar to hide after it loses focus
That was a fun, easy and a quick way of creating a custom scroll-bar, wasn’t it?