Scrollbars
Written by Jen

I often get asked how to change the scrollbar colors for layouts, but more often, how do I know what is what when I'm changing the scrollbar colors. It's actually not hard once you get the areas memorized, the rest is just the color scheme.

To start, here's a maginified version of a short scrollbar with the areas labelled and color-coded:

Then keep referring to the above image when you look at the code below:

<style type="text/css"> body{ scrollbar-arrow-color: green; scrollbar-track-color: purple; scrollbar-face-color: red; scrollbar-highlight-color:blue; scrollbar-3dlight-color: orange; scrollbar-darkshadow-color: black; scrollbar-shadow-color: brown:} </style>

The first thing to note is the body tag in this CSS code. This means that only the page scrollbars are affected and not anything else that scrolls. So if you have a div blog, a textarea or anything else that requires a scrollbar, you may wish to insert those tags next to the body tag to make the scrollbar colors the same.

The above code can easily be turned into a scrollbar with hex color codes, all you have to do is to find the appropriate hex color codes to insert after the colon.

Color Scheme Tips
This is the second thing people ask me immediately after they understand how to change the colors. Here's a few I picked up over my years of experimenting.

3D Scrollbars - This is the one people get stuck on the most. First choose a face color, then go a tone lighter. That will be your highlight color. Go back to your face color and go a shade darker. That will be your darkshadow and 3dlight color. Finally, your face color will also be your shadow color. And your arrow and track color can be anything that fits with the color scheme.

Flat Scrollbars - This kind of scrollbar means that you set your highlight and shadow color to be the same as your face color, or your highlight and shadow color to be the same as your 3dlight and darkshadow color. That way, there will be lighter or darker colors to give the effect of a 3D scrollbar.

Do remember that colored scrollbars only work on Internet Explorer 5.5 and above. They don't work on Firefox, but if you're coding a web layout for your site, it's best to have scrollbar colors for visitors who use IE.

~Jen