Scrollbar Tutorial

Now if you have Internet Explorer you may have noticed a new trend. Changing the colour of the scrollbar seems to be the newest thing to spice up your site. The only porblem with this is if you do it wrong people with Netscape won't be able to view your site at all. I've created this tutorial to help you with this problem.

Scollbar image Here are the basic codes you will need to know:

  • scrollbar-arrow-color
  • scrollbar-3dlight-color
  • scrollbar-highlight-color
  • scrollbar-face-color
  • scrollbar-shadow-color
  • scrollbar-darkshadow-color
  • scrollbar-track-color
  • scrollbar-base-color
Be sure you place all the code between the <head> and </head> in your html. Of course you will want to change the colour codes to match your page.

Basic Style:

<style>
BODY{
scrollbar-base-color: #FF80C0;
}
</style>
Flat Style:

<style>
BODY{
scrollbar-arrow-color: #0080FF;
scrollbar-3dlight-color: #FF80C0;
scrollbar-highlight-color: #000000;
scrollbar-face-color: #FF80C0;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #FF80C0;
scrollbar-track-color: #FFB0D8;
}
</style>
Full Control: 
<style>
BODY{
scrollbar-arrow-color: #FF80C0;
scrollbar-3dlight-color: #0080FF;
scrollbar-highlight-color: #80FFFF;
scrollbar-face-color: #8080C0;
scrollbar-shadow-color: #004080;
scrollbar-darkshadow-color: #0080C0;
scrollbar-track-color: #DE9EDD;
}
</style>

You must know HTML in order to do this. If you need and help please Email Me. Remember to put scollbars in the subject so I can sort through my mail.