corner corner

Find The Best Local

The Best is Here

Home Surfers Biz Owners Site Owners Web Designers

Scroll Bar Colors

A cutesy NVA thing you might want to do is color the scroll bars on your web site. The browser scroll bar is generally a combination of white, gray and black. You could change the colors of this by applying some CSS to the body element. You can also apply scroll bar changes to other elements such as frames, iframes, divisions, etc. Unfortunately you can not apply scroll bar chromatics to the object tag.

Of course you should know that frames and iframes, even though useful in some situations, should not be used on new web sites. However divisions are necessary to position sections of your page.

In order to change the colors of the scroll bar, create a division and assign it a class name such as scroller1.

Set the width of the division and set the overflow to scroll. Then insert some content that is larger than the dimensions of the division. In this example I am simple inserting a paragraph with a width and height greater than the outer division.

Finally add the following code to your div element in your style block.

div#scroller4 { 
scrollbar-3dlight-color:#cccccc;  
scrollbar-arrow-color:#000033; 
scrollbar-base-color:#997755; 
scrollbar-darkshadow-color:#666666; 
scrollbar-face-color:#ffddbb; 
scrollbar-highlight-color:#664422; 
scrollbar-shadow-color:#999999} 

Once you have the code in place 
you can adjust the  hex values to get the 
scroll bar to match your color scheme.  

While this is a cool thing to do you should question whether it is necessary. Most visitors will not even notice that you went to the bother of doing this.