2018-12-29, 10:58 PM
For everyone who wanna replace "not good looking" scrollbars by the modern ones. This tutorial (pure CSS solution) works only for Webkit based web browsers (Chrome, Safari, Vivaldi, Opera etc.), not in Firefox or IE/Edge (for these browsers you will need to add a JS code).
This tutorial is really simple, just open global.css in your ACP (Template&Styles -> Themes -> "your theme" -> global.css) and add this block of code at the end of file:
Save and hard refresh your index page (Ctrl+F5), you should see your result of coding
This tutorial is really simple, just open global.css in your ACP (Template&Styles -> Themes -> "your theme" -> global.css) and add this block of code at the end of file:
/* Customize website's scrollbar like Mac OS - not supported in Firefox, IE or Edge */
/* Total width of scrollbar */
::-webkit-scrollbar {
background-color: #fff;
width: 16px;
}
/* Background of the scrollbar except arrow button or resizer */
::-webkit-scrollbar-track {
background-color: #fff;
}
::-webkit-scrollbar-track:hover {
background-color: #f4f4f4;
}
/* Scrollbar */
::-webkit-scrollbar-thumb {
background-color: #babac0;
border-radius: 16px;
border: 5px solid #fff;
}
::-webkit-scrollbar-thumb:hover {
background-color: #a0a0a5;
border: 4px solid #f4f4f4;
}
/* Arrow button (top and bottom of the scrollbar) */
::-webkit-scrollbar-button {
display: none;
}Save and hard refresh your index page (Ctrl+F5), you should see your result of coding