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.

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.

<style>
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;
}
</style>

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