Colored Scrollbars

Colored scrollbars have been the rage in web design for a long time. Although we admit it is not the best choice for every web site, the use of colored scrollbars certainly does compliment the right type of site. The technique to change your standard scrollbars to match your site's color scheme is shown below.

For a most effective way to use this style throughout ALL pages on your site, use an external (linked) style sheet. If you are not familiar with the different methods of CSS and how or when to use them, be sure to read our article, "External, Internal or Inline? Which Method is Best?"

If you wish to add this effect to any BasicTemplate style sheet, copy/paste the code shown into the existing body style block within your external style sheet. Be certain the body style block ends with a } as shown below.

body { scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#787878;
scrollbar-track-color:#C57432;
scrollbar-face-color:#EDA735;
scrollbar-arrow-color:#000000;}

What this code means, line per line:

scrollbar-highlight-color:#FFFFFF ... this code snippet effects the left and top highlighted areas of the scrollbars giving it a 3D effect

scrollbar-shadow-color:#787878 ... this code snippet effects the right and bottom shadow color of the scrollbars giving it a 3D effect

scrollbar-track-color:#C57432 ... this code snippet controls the track background color

scrollbar-face-color:#EDA735 ... this code snippet controls the scroll face color

scrollbar-arrow-color:#000000 ... this code snippet states the arrow colors

If you wish to have colored scrollbars only on specific pages of your site, use the internal CSS method and place the code shown below between the HEAD tags of your web page source code.

<style>
<!--
body {
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#787878;
scrollbar-track-color:#C57432;
scrollbar-face-color:#EDA735;
scrollbar-arrow-color:#000000;
}
-->
</style>