Adding color to your webpage scrollbar adds a little flavor to your page. It also gives you the power to match the scrollbar with your website’s design colors! Now there are different parts to the scrollbar so please take a look at the diagram below:

scrollbar_step1.gif

Now that you have an understanding of the different parts of a scrollbar it’s time to add the necessary code to colorize them! Place the following code between the <head> </head> tags on your page:

<style type=”text/css”>
body {
scrollbar-3dlight-color: ;
scrollbar-arrow-color: ;
scrollbar-DarkShadow-Color: ;
scrollbar-Face-Color: ;
scrollbar-Highlight-Color: ;
scrollbar-Shadow-Color: ;
scrollbar-Track-Color: ;
}
</style>

You can use either a hex value or the name for the color of your choice. Just type either the hex value or name next to each part of the scrollbar. For example, if you want the arrow color to be white it would be:

scrollbar-arrow-color: white; (name)
scrollbar-arrow-color: #FFFFFF; (hex value)

NOTE: Scrollbar colors do not work on all browsers.

Any suggestions, ideas? Feel free to comment on this article!

Back to Top

Advertisements