Define Page Scrollbar Styles

by: Ades Tynyshev

Define Page Scrollbar Styles
Well it does not look that good, but that is just for the differentiation of the areas of the scrollbar. Once you know which area is defined with which code you can modify it as you like. Actually the code is quite self explanatory. Anyway let's have a look.

<STYLE TYPE="text/css">

BODY
{
scrollbar-face-color: green;
scrollbar-shadow-color: blue;
scrollbar-highlight-color: black;
scrollbar-3dlight-color: red;
scrollbar-darkshadow-color: brown;
scrollbar-track-color: yellow;
scrollbar-arrow-color: white;
}
</STYLE>

To change the style of the page scrollbar you need to insert the above code between your <head></head> tages in the page. Color names such as green, blue...etc can be replaced with the hexa decimal codes such as #000000.

The following image shows which codes define which part of the scrollbar. I guess it does not need further explanation, since everything is clear already. Go ahead and make your page look nicer.



This is what I have used for my pages, feel free to use it if you want.


<STYLE TYPE="text/css">

BODY
{
scrollbar-face-color: #EAEAEA;
scrollbar-shadow-color: #EAEAEA;
scrollbar-highlight-color: #EAEAEA;
scrollbar-3dlight-color: #EAEAEA;
scrollbar-darkshadow-color: #697074;
scrollbar-track-color: #F7F7F7;
scrollbar-arrow-color: #666666;
}
</STYLE>


Don't see the effect? If you have a doctype specified at the top of your page then you might want to remove it. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <---- REMOVE RED LINE FROM YOUR SOURCE CODE.

Article published Tuesday, 31st May 2005
© 2008 NetVisits, Inc. All rights reserved.