If there is one word you would associate with WordPress, it would be “customizability”. That’s what all the core features, plugins and themes are for – to shape the look and behavior of your website and tailor it to your desires and needs. So you can do cool things like customize the website colors, add different elements like price lists and use whatever you need to make the website appear and play the role you have in mind for that.
Of course, there are some customizable elements that people tend to overlook. One of them is the scroll bar, which moves as you scroll a page in your browser, allowing you to navigate longer pages faster. If you want your website visitors to at least be treated with a scrollbar that matches your website’s color scheme, you can do it.
In this article, we will show you:
If you are considering adding a custom scrollbar to your WordPress website, the two main options you will have are choosing a plugin or customizing the scrollbar using CSS. Both of these options have pros and cons that may influence your choice.
If you use the plugin to add a custom scrollbar, you will create a permanent change as long as the plugin is installed. It’s as simple as installing a plugin and playing around with the settings until you find the one that works best for you.
The downside of using the plugin is that it can slow down your website. Even if it’s just milliseconds, they tend to pile up when you use enough of these small and seemingly unimportant plugins.
That said, you won’t have speed issues when using CSS.. You won’t need to install anything – you’ll be able to make all changes via the view client at Appearance > Customize > Additional CSS. It’s not that hard to learn the code either. The customizer will show you the changes in real time which is a great bonus.
But the problem with this method is that you risk losing your customizations with a theme update. Therefore, it is generally recommended to use a child theme when making such changes.
There are several free plugins you can use to add a custom scrollbar to your WordPress website. we will use Slider Shaper The plugin allows you to set up to four colors on your scrollbar. get over your head Plugins > Add NewSearch for “scroll shaper” and then go ahead and install and enable it on your website.
After installing the plugin, navigate to: Settings > Slider Styler To access the add-on options. The top two are the scrollbar width and the scrollbar track padding. The first of the two will change how wide your scrollbar is in pixels. Second, it will change the padding around the scrollbar thumb.
The next four options allow you to set different colors for the slider. The scrollbar track background color is the scrollbar track color and does not change. But that’s the color of the thumb. “Background color” is the color of the thumb when inactive. When you hover over the thumb, it will change its color to “hover background color”. When you press the thumb to scroll the page, its color will change to “active background color”.
The last option lets you set the scrollbar thumb border radius. Effectively, this allows you to round the corners of the thumb.
Don’t forget to save the settings after selecting the options and you will see the change on your website.
While the options offered by the plugin are somewhat modest, they can be more than enough to create a scrollbar that matches your website’s color scheme.
Your second option would be to use custom CSS to change how the scrollbar looks. As we mentioned earlier, you will need to navigate to: Appearance > Customize > Additional CSS to make any changes.
The way to use custom CSS to replace the scrollbar is to use pseudo-elements to customize certain parts of the scrollbar. You can customize:
So when you want to create a custom scrollbar, you can use these pseudo-elements as follows:
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #f6f6f4;
}
::-webkit-scrollbar-thumb {
background: #86af49;
}
::-webkit-scrollbar-thumb:hover {
Background: #E5cdbc
}
This will change the default gray scrollbar to a better match for this particular theme.
Note that you can add shadows, change the radius of elements, and do additional things to make your custom scrollbar truly special. You will need more advanced CSS knowledge to take full advantage of this method of customizing the scrollbar. However, if you have enough time and are willing to learn by trial and error, you are bound to find some interesting combinations.
Let’s wrap it up!
Scrollbar – a useful element that is often overlooked when it comes to customizing the look of your website. If this is a mistake you are aiming to fix, there are two ways to do it – either with a plugin or by adding some custom CSS. Both have their pros and cons, so it may be prudent to check which browsers your target audience uses the most before making a selection. After that, it’s enough to fiddle with options or code until you get satisfactory results.
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
