Customizing the WordPress Scrollbar

I see very few [tag]WordPress[/tag] blogs where the scrollbar matches the theme. The basic light blue default scrollbar clashes badly in many cases. Theme developers leave out the code. Here’s how to add it to your theme.

Just insert this code anywhere in your theme’s stylesheet. These colors are for the scroll bar used on this blog. You can custom them for your own theme.

HTML {
        scrollbar-base-color: #C0C0C0;
        scrollbar-base-color: #C0C0C0;
        scrollbar-3dlight-color: #C0C0C0;
        scrollbar-highlight-color: #C0C0C0;
        scrollbar-track-color: #EBEBEB;
        scrollbar-arrow-color: black;
        scrollbar-shadow-color: #C0C0C0;
        scrollbar-dark-shadow-color: #C0C0C0;
}

Here are a few classics:

Flat Gray

HTML {
        scrollbar-base-color: #C0C0C0;
        scrollbar-3dlight-color: #C0C0C0;
        scrollbar-highlight-color: #C0C0C0;
        scrollbar-track-color: #D3D3D3;
        scrollbar-arrow-color: black;
        scrollbar-shadow-color: #C0C0C0;
        scrollbar-dark-shadow-color: black;
}

Very Flat Gray

HTML {
        scrollbar-base-color: #C0C0C0;
        scrollbar-3dlight-color: #C0C0C0;
        scrollbar-highlight-color: #C0C0C0;
        scrollbar-track-color: #C0C0C0;
        scrollbar-arrow-color: black;
        scrollbar-shadow-color: #C0C0C0;
        scrollbar-dark-shadow-color: #C0C0C0;
}

Just changing colors willy-nilly will produce undesirable results. It’s best to use an online tool to visualize color selections before changing them in your stylesheet.

One caveat, however. This code only works in Internet Explorer; not in FireFox. I don’t know whether it works in Safari or not as I don’t have that browser installed. Perhaps a Safari user can leave a comment.