Once here, go to Appearance<\/strong> – > Theme Editor<\/strong><\/p>\n NB! If you are going to add a custom scrollbar to your website by using CSS, or your intent on making any other changes in the Stylesheet.css (that is to add custom CSS), we urge you to create a child theme<\/a>. Doing so will prevent you from losing any of the changes that you\u2019ve made to the file when the theme is updated.<\/p>\n Also, keep in mind that these changes be visible only to visitors of your website that are using browsers with the WebKit rendering engine. The most famous among them are Google Chrome, Safari, and Opera.<\/p>\n To customize the scrollbar of your WordPress website, add the following CSS code at the bottom of the stylesheet.css file, that you\u2019ll start editing when entering the theme editor:<\/p>\n These are the colors of our scrollbar. To make your scrollbar more suitable for your website, change the hex values to these of your website\u2019s main colors.<\/p>\n <\/p>\n Adding a plugin to WordPress<\/a> is usually a simple and fast path to any customization that you need. Not surprisingly, such is the case with scrollbar customization.<\/p>\n We recommend you to use the Scrollbar<\/a> plugin as it is light, fast, and easy to understand.<\/p>\n Once you\u2019ve installed and activated the advanced scrollbar plugin, go to the new option in the scrollbar menu Scrollbar Wp.<\/strong><\/p>\n You\u2019ll be redirected to the options page of the plugin, which looks like this:<\/p>\n Here you can modify every aspect of your website\u2019s scrollbar. And a nice touch, that I personally love is the Auto Hide Mode <\/strong>at the bottom. By using this mode, you\u2019ll get your website just a little bit more pixels. Although this won\u2019t change the perception of your website, it certainly is a nice touch.<\/p>\n","protected":false},"excerpt":{"rendered":" If you want to distinguish your WordPress website from all the others, you\u2019ll need to take care of every little detail. One of the things that people are rarely customizing is the scrollbar of their websites. Of course, the users are comfortable with the same old scrollbar on every website, as they are using the […]<\/p>\n","protected":false},"author":3,"featured_media":42709,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"If you want to distinguish your WordPress website from all the others, you\u2019ll need to take care of every little detail. One of the things that people are rarely customizing is the scrollbar of their websites.\r\n\r\nOf course, the users are comfortable with the same old scrollbar on every website, as they are using the same browser. Still, if you customize the scrollbar of your WordPress website, the efforts won\u2019t go unnoticed.\r\n\r\nAlthough this will hardly help your website become more popular, it is still something that you need to take care of, as the visitors will surely notice it, and the custom (well-made) scrollbar will convey professionalism on your side.\r\n![\"\"](\"\/wp-content\/uploads\/2019\/08\/appearance-theme-editor.png\")
<\/p>\n\r\n\/* total width *\/\r\nbody::-webkit-scrollbar {\r\nwidth: 8px;\r\n}\r\n\/* scrollbar itself *\/\r\nbody::-webkit-scrollbar-thumb {\r\nbackground-color: #d24b49;\r\nborder-radius: 30px;\r\nborder: 0px solid #fff;\r\n}\r\n\/* changes the color of the scrollbar on hover *\/\r\nbody::-webkit-scrollbar-thumb:hover {\r\nbackground-color: #ad343e;\r\n}\r\n<\/span>\r\n<\/code><\/pre>\nHow to Add Custom Scrollbar to WordPress with a Plugin<\/h2>\n
![\"\"](\"\/wp-content\/uploads\/2019\/08\/scrollbar.png\")
<\/p>\n![\"\"](\"\/wp-content\/uploads\/2019\/08\/Scrollbar-plugin-options-868x1024.png\")
<\/p>\nIssues That Might Occur While Customizing the Scrollbar<\/h2>\r\nAs of now, CSS does not come with a ruleset that would let us customize the scrollbar. Yet, there are some so-called pseudo-elements, which will do just fine.\r\n\r\nWhat is more, when you are editing the CSS of a website, especially the pseudo-elements, bear in mind that you need to test your website on various devices and browsers, as the different browsers render the code differently.\r\n\r\nSometimes, Chrome might show something that Safari won\u2019t show (or will show differently).\r\n\r\nThus, either check whether the visitors of your website are using predominantly a specific technology (say Desktop device and Chrome as a browser), and optimize for them, or try and optimize for everyone. The latter is, of course, recommended.\r\n\r\nNow, let\u2019s find out how to add a custom scrollbar to WordPress\r\n
Add Custom Scrollbar Without Plugin<\/h2>\r\nTo customize the scrollbar of your website, without using a plugin, you\u2019ll have to go to the admin panel of your WordPress<\/a>.\r\n\r\nOnce here, go to Appearance<\/strong> - > Theme Editor<\/strong>\r\n\r\n
\r\n\r\nNB! If you are going to add a custom scrollbar to your website by using CSS, or your intent on making any other changes in the Stylesheet.css (that is to add custom CSS), we urge you to create a child theme<\/a>. Doing so will prevent you from losing any of the changes that you\u2019ve made to the file when the theme is updated.\r\n\r\nAlso, keep in mind that these changes be visible only for visitors of your website that are using browsers with the WebKit rendering engine. The most famous among them are Google Chrome, Safari, Opera.\r\n\r\nTo customize the scrollbar of your WordPress website, add the following CSS code at the bottom of the stylesheet.css file, that you\u2019ll start editing when entering the theme editor:\r\n\r\n\/* total width *\/\r\nbody::-webkit-scrollbar {\r\nwidth: 8px;\r\n}\r\n\/* scrollbar itself *\/\r\nbody::-webkit-scrollbar-thumb {\r\nbackground-color: #d24b49;\r\nborder-radius: 30px;\r\nborder: 0px solid #fff;\r\n}\r\n\/* changes the color of the scrollbar on hover *\/\r\nbody::-webkit-scrollbar-thumb:hover {\r\nbackground-color: #ad343e;\r\n}\r\n<\/span>\r\n<\/code><\/pre>\r\nThese are the colors of our scrollbar. To make your scrollbar more suitable for your website, change the hex values to these of your website\u2019s main colors.\r\nHow to Add Custom Scrollbar to WordPress with a Plugin<\/h2>\r\nAdding a plugin to WordPress<\/a> is usually a simple and fast path to any customization that you need. Not surprisingly, such is the case with the scrollbar customization.\r\n\r\nWe recommend you to use the Scrollbar<\/a> plugin as it is light, fast, and easy to understand.\r\n\r\n
\r\n\r\nOnce you\u2019ve installed and activated the advanced scrollbar plugin, go to the new option in the scrollbar menu Scrollbar Wp.<\/strong>\r\n\r\nYou\u2019ll be redirected to the options page of the plugin, which looks like this:\r\n\r\n\r\n\r\nHere you can modify every aspect of your website\u2019s scrollbar. And a nice touch, that I personally love is the Auto Hide Mode <\/strong>at the bottom. By using this mode, you\u2019ll get your website just a little bit more pixels. Although this won\u2019t change the perception of your website, it certainly is a nice touch.","_et_gb_content_width":"","footnotes":""},"categories":[85],"tags":[],"class_list":["post-42701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customization"],"yoast_head":"\n