Fun With Scrollbars
Are you tired of the same old boring default scrollbars? Do you want your scrollbars to match the color scheme of your web site? Well, you've come to the right place. This tutorial will teach you how to change your scrollbar colors.
Step 1: The Code
Now, how do we exactly change the colors of the scrollbar? You just have to copy and paste the following code within the head tag of your HTML document:
<style type="text/css">
body {
scrollbar-3dlight-color: #FFF;
scrollbar-highlight-color: #C60;
scrollbar-face-color: #39F;
scrollbar-shadow-color: #93F;
scrollbar-track-color: #F39;
scrollbar-arrow-color: #FC3;
scrollbar-darkshadow-color: #3C3;
}
</style>
And that's the end... Well, not quite...
Step 2: Illustration
Here's an example on how your scrollbar would look like with the code above:
This illustration shows what will happen to your scrollbar given the code above (less the text, of course). Then just change the underlined text with the hexadecimal code or name of the color you want.
Step 3: Validate!
There are some people who are obssessed with validating their code that's why they'd rather stick with the dull default scrollbars than use this code. Fortunately, I'm here to teach you a way to have colored scrollbars and still keep your code valid.
How can we do it? By using the concept of JavaScript Includes. You should have read and understood that tutorial in order to do this. Anyways, we'll use the code on the first part of this tutorial with the JavaScript Includes. It should look like this:
document.write('<style type="text/css">');
document.write('body {');
document.write(' scrollbar-3dlight-color: #FFF;');
document.write(' scrollbar-highlight-color: #C60;');
document.write(' scrollbar-face-color: #39F;');
document.write(' scrollbar-shadow-color: #93F;');
document.write(' scrollbar-track-color: #F39;');
document.write(' scrollbar-arrow-color: #FC3;');
document.write(' scrollbar-darkshadow-color: #3C3;');
document.write('}');
document.write('</style>');
Save the code above as scrollbars.js. After that, add this on the head part of your HTML document:
<script src="scrollbars.js" type="text/javascript"></script>
The code I just gave should replace the code on the first part of this tutorial. Try it for yourself. Did your site validate or what?
Conclusion
Very easy, huh? Keep in mind that this only works in MS Internet Explorer 5.5 and up. Other browsers that support colored scrollbars are the later versions of Opera and Netscape.
Please keep in mind that if you put Step 1 code in your CSS file, your CSS will not validate. But, if you follow Step 3, you'll have colored scrollbars and valid code. Enjoy!
If you have any questions or if you want to discuss this tutorial, you may post at Blinding Light MB.