Welcome to My Blog!

This is Boxer Template Demo Site
Follow Me

Customize Scrollbar Style In WordPress Using CSS



By  Unknown     23:39     

How To Customize Scrollbar Style In WordPress Using CSS?

With CSS you can beautify your entire site, do you remember or not that once we have posted about adding details to your wordpress site. Here it is changing the font family, color, font style, font size and changing the default text selection color in wordpress, all that is based on CSS.

Have you ever seen some websites using custom scrollbar? 

To match their site looks, design and color they will customize the scrollbar. Adding custom scrollbar to your site is very simple, all you have to do is apply few lines of CSS.

Customize Scrollbar Style In WordPress Using CSS

Here let’s see how to change or customize scrollbar style in wordpress using CSS as well as with a plugin.

::-webkit-scrollbar {
                                   width: 14px;
}

::-webkit-scrollbar-track {
                                   background-color: #b46868;
                                   border-radius: 9px;
}

::-webkit-scrollbar-thumb {
                                   background-color: #6c8927;
                                   border-radius: 9px;
}

If you look at our blog scrollbar then you will come to know that it is a default one. Each and every browser has its own styles and so applying CSS also varies greatly. The above 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 achieve this you can better go on for a plugin.

Also Check Out Below Guideline

Add Border, Frame And Shadow Effects To WordPress Site


How To Customize Scrollbar Style In WordPress?

There is a free plugin called Dewdrop custom scrollbar that will help you in customizing the scrollbar and moreover you can achieve stylish responsive scrollbar for your site. Just install and activate it and after activation go to settings >> Dewdrop scrollbar options were you will have bunch of settings.

Customize Scrollbar Style In WordPress Using CSS

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.

Custom Scrollbar WordPress

Here is another plugin called Custom Scrollbar WordPress which is more elegant than the free plugin.

Custom ScrollBar WordPress 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. 

I hope your wordpress site now got an elegant look with custom scrollbar. Please share it to your friends and subscribe to our blog for latest updates.

About Unknown

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod diam at commodo sagittis. Nam id molestie velit. Nunc id nisl tristique, dapibus tellus quis, dictum metus. Pellentesque id imperdiet est.

4 comments:

  1. I located one reliable example of this fact through this blog website. I am mosting likely to use such information now. Web design company Perth

    ReplyDelete
  2. I had liked Dewdrop until I tried it in my current site in development. Dewdrop changed my site's width and the menu arrangement, which is very annoying. Also, not only Dewdrop but other stylers ELIMINATE the little arrow bottom-right, which happens to be very useful, and makes it a lot harder to control the scrolling process, in particular while trying to work on a web site. I'd like to find a scroller styler that just changes the colors, and doesn't remove that nice little bottom-right arrow.

    ReplyDelete


Contact Form

Name

Email *

Message *

Translate

Fashion