Stockvault.net Tutorials » CSS Tutorials

Scrollbar colours

By Björgvin Guðmundsson

Introduction

Well, you see them on every homepage, standard gray and boring or colorful and matching the site's layout. In fact it's not that hard getting the scrollbars to match your site graphic and color scheme.

Step A: Explanation

I will start by explaining how to apply colors to the scrollbars. (Note: This only works with internet explorer 5.5+ and Netscape 6+).

Here is a picture of a scrollbar explaining what each part is named.

Step B: The source code

What you do is make a style which you add to your page source, between the <header> and the <body> tags.

After you have done that, you replace the #000000 with the color number of your choise.
(Experiment on different colors and try to make it match your site).

Step C: Hiding the scrollbar when it's not needed

Now, if you want your scrollbar not to be visible until it's really needed, all you have to do is to add a few more words into your style.

Good luck and happy scrollbar editing!
You can find more CSS tutorials at tutorialvault.net

Scrollbar colours

Introduction

Step A: Explanation

Step B: The source code

Step C: Hiding the scrollbar when it's not needed

Photoshop Tutorials

Dreamweaver & CSS Tutorials

Partner Sites

Advertisment