TEKNIDERMY - ISSUE 7: November/December 2001

Scrollbar Skinner
This cool tool lets you create those custom scrollbars VISUALLY!!
No CSS experience required...a Tek exclusive.
by kenray

Since the appearance of MSIE 5.5, web designers have had the option of coding colors for the scrollbar in each webpage. We've all seen it, Shellcity, DeviantArt, Wincustomize, and on and on. IF you are using 5.5 or up, you are seeing "scrollbar skinning" become a standard web design element.

And this is great. As a designer, those icky gray boxes in the scrollbar were a drag on one's beautiful webpage. It is great to be able to make the track, arrows and slider fit your design.

but... (and there's always a but, isn't there?)

Writing the CSS code for the scrollbars is a bummer. There's just no other way to put it. Any artist will visualize what they would like to see in the scrollbar, but that vision usually winds up being a string of text that looks like this:

Icky. And if you want to see what that really looks like, you gotta save the page and load it up in a browser. Not the worst thing in the world, but definitely not that conducive to the Creative Experience...

A few weeks ago, I downloaded a program called "CDWebCreator" from the website of a French freeware author named Gui Obser. CDWebCreator is a program that lets you hot-wire an autorun CD (y'know, multimedia discs) on the fly. Part of that program is a "scrollbar skinner", which I immediately put to good use on an almost-daily basis.

Knowing that other designers might like this "visual-design option" as much as I did, I contacted GUI, and asked him if he would consider making a stand-alone version of the "scrollbar skinner", and if he would mind sharing it with the community.

GUI is a fantastic guy, and within a few days, the program was created...

A Quick Look At "Scrollbar Skinner"

(click the image to download this great freeware program)

This program is a simple and intuitive as it can be. All your functions are present on the program surface.

The preview image on the left is a real-time result of the choices you make in the color selectors. Click on the palette icon next to "Arrow Color" and you will be presented with the system palette. Choose a color, and viola, the result appears in the preview window, and in the CSS code on the right.

If you want to see a full page preview, just hit the preview button on the program surface bottom right.

Choose "Save web page" to keep that result for your further web-designing needs, or just copy the CSS code out of the preview window on the right...simple.

You can save and load previous palettes if you choose.

Our thanks to the program's creator, Guillaume Obser