Helping ordinary people create extraordinary websites!

Define Page Scrollbar Styles

By Ades Tynyshev
2005-05-31

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.



Tutorial pages:
  • Define Page Scrollbar Styles
 3 Votes

You might also want to check these out:


Leave a Comment on "Define Page Scrollbar Styles"
You must be logged in to post a comment.

Link to This Tutorial Page!
GET OUR NEWSLETTERS