Your web home for how to's for web beginners. A jargon-free zone dedicated to helping your web knowledge grow.

Help For Web Beginners

Press CTRL + D to
Bookmark this Page

MySpace - Scrollbars

This Code Has Been Tested

Many MySpace profile designs include colorizing the scrollbars. Before I wrote this how-to, I double checked to make sure that MySpace does not require different coding from what would be used on a normal webpage. After checking several MySpace "pimp" - type sites and doing a bit of testing, I realized that scrollbar colors are indeed defined differently on MySpace. Sadly, the MySpace pimp sites I looked at suggested using code that does not work.

Scrollbar Color Commands Don't Always Work

Keep in mind that MicroSoft's Internet Explorer is the only web browser that recognizes the code required to colorize scrollbars - that means that anyone using a different browser will not see your colored scrollbar. The good news is that the web browsers that do not recognize colored scrollbars will simply display the default gray-colored scrollbars.

Parts of a Scrollbar

Setting the colors of your scrollbar, requires a bit of understanding of the scrollbar parts. In order to make this a bit easier, the following screenshot is from my profile page. I used somewhat garish colors to better display the different parts of a scrollbar.

The code that follows is what I used in the Hero's section (though it could go anywhere) of my MySpace profile to generate the oh-so brightly colored scrollbar shown below.

picture of colored scrollbars

black (000000) = scrollbar-track-color

yellow (FFFF66) = scrollbar-face-color

pink (FF3366) = scrollbar-3dlight-color

white (FFFFFF) = scrollbar-highlight-color(next to the pink)

turquoise (00FFFF) = scrollbar-darkshadow-color

dark blue/green (006699) = scrollbar-shadow-color

orange (FF6600) = scrollbar-arrow-color

To recreate this exact scrollbar (yuck, why would you do that) use the code follows. If you want to use different colors (I truly hope you do), use the chart above to determine which color codes to change. Don't forget that MySpace does not include a pund sign (#) with colors like most web pages do.

body {
scrollbar-track-color: 000000;
scrollbar-face-color: FFFF66;
scrollbar-3dlight-color: FF3366;
scrollbar-highlight-color: FFFFFF;
scrollbar-darkshadow-color: 00FFFF;
scrollbar-shadow-color: 006699;
scrollbar-arrow-color: ff6600;

Be sure to check out Help For Web Beginners other HTML & CSS Tutorials.

About the Author is a website dedicated to providing free, easy to understand, online How To's for true web beginners. While the materials are not free or available for reprints, they are offered freely for individual use. Please use the contact page to let Michele know if this tutorial has been helpful or if there are any other beginner web programming related tutorials you would like to see.