Browse By

How to customize scrollbar style : Custom Scrollbar in WordPress

Custom Scrollbar CSS WordPress : Style Scrollbar Using CSS & Plugins

Hello There,With CSS you can beautify your entire blog,Have you ever seen some WordPress blog using custom scrollbar? To match their blog looks, design and color they will customize the scrollbar. Adding custom scroll bar to your blog is very simple, all you have to do is apply few lines of CSS. Here let’s see how to change or customize scrollbar style in WordPress using CSS as well as with a WordPress plugin.

Custom Scrollbar in WordPress

How To Customize Or Change Scrollbar Style With CSS Code Method :

If you look at our blog scrollbar then you will come to know that it is a not default one we customize our scrollbar using plugins. Each and every browser has its own styles and so applying CSS also varies greatly. The below CSS code works on webkit based web browsers such as Chrome, Safari etc, but not on other popular browsers like Firefox and Internet Explorer. Due to such compatibility issues you have to write CSS code supporting each browser. This will not be the right solution if you really want to customize the scrollbar. So to reach this you can better go on for a plugin method.

::-webkit-scrollbar {
 width: 15px;}
 ::-webkit-scrollbar-track {
 background-color: #00000;
 border-radius: 10px;}
 ::-webkit-scrollbar-thumb {
 background-color: #ecf400;
 border-radius: 10px;
 }

For Add CSS Code Go To Appearance=>Editor [Refer Images] ,Then Go To Style.css File And Find And Replace Color Code and other properties for scrollbar as per your requirements.

WordPress Code Editor WordPress CSS Code Editor Style.css

How To Customize Or Change Scrollbar Style With WordPress Plugins Method :

In WordPress there is a free plugins known as Dewdrop custom scrollbar that will help you in customizing the scrollbar and moreover you can do stylish responsive scrollbar for wordpress site. Just install and activate it and after activation go to Settings >> Dewdrop scrollbar options were you will have bunch of settings.[Refer Image]

Dewdrop Custom Scrollbar WP Setting

Dewdrop Custom Scrollbar WordPress Plugin

First you will have the option to change the scrollbar color which you can select depending upon your site color. Next you can select the width of the scrollbar, height of the scrollbar, scrollbar border width, border color and border radius. Other than that you will have auto hide scrollbar option and you can also choose scrollbar speed that is you can make the scroll speed slow or fast.

Here is another plugin called custom scrollbar wordpress which is more elegant than the free plugin. The good part is it supports all major web browsers. It is easy to setup, you will get unlimited color option, responsiveness, light weight and all that you get for just 5$. After customizing the settings take a look at your website scrollbar where you can see it in action. Hope your wordpress site now got a elegant look with custom scrollbar.

Custom scrollbar wordpress

Leave a Reply

Your email address will not be published. Required fields are marked *