Coloured browser scrollbars tutorial

Coloured Scrollbars for IE 5.5+

Note: the CSS used to colour IE scrollbars is not standard. CSS documents that contain this code will not validate against CSS specifications!

Coloured Scrollbars: Simple, effective way to get away from standard IE boring core colouration!

How do I do it?

If you use an external style sheet and link to the stylesheet in your html pages, simply place the following in the body { } area of your style sheet. The following attributes can be defined using hex codes as below or by using colour names, e.g. white, black, indigo and so on.

Example:
body {
scrollbar-base-color:#000000;
scrollbar-face-color:#FFFFFF;
scrollbar-arrow-color:#000000;
scrollbar-shadow-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
scrollbar-highlight-color:#cccccc;
scrollbar-darkshadow-Color:#4682b4;
}

If you hard code styles into your pages simply place the above attributes in between <style> and </style> in the <head> and </head> tags, towards the top of your html page.

Example:
<head>
<style>
body {
scrollbar-base-color:#000000;
scrollbar-face-color:white;
scrollbar-arrow-color:black;
scrollbar-shadow-color:white;
scrollbar-track-color:black;
scrollbar-highlight-color:silver;
scrollbar-darkshadow-Color:steelblue;
}
</style>
</head>

The attributes shown can be used or omitted as required, none are necessary, the browser will just use the default if a value is not specified.

So what does each bit do?

face-color: This colours the majority of the scrollbar with the specified colour.

base-color: This applies to the outline of the scrollbar and the arrow boxes

track-color: This colours the background of the scrollbar as you track down.

highlight-color: This will colour the top and left edges of the scrollbar

arrow-color: This colours the clickable arrow

shadow-color: This will colour the bottom and right hand part of the scrollable areas.

darkshadow-color: very similar to shadow color, this will show up the coloured area slightly more than the shadow-color.

These scrollbars will also apply to <textarea> scrollbars and any scrollbars in use on <frame> or <iframe> tags.

Want to test it out? Launch scrollbar colour tester (new window)

Well, that wraps up coloured scrollbars - so go create some!

Remember, if you get stuck or need to ask any questions, register with the forums and tell us about it!

Partners

Advertise here!

Ads

Reseller Web Hosting