Customizing the WordPress Scrollbar
I see very few WordPress 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.
| US $4.95 End Date: Wednesday Aug-20-2008 10:31:05 PDT Buy It Now for only: US $4.95 Buy it now | Add to watch list |
Tags: WordPress











Finally! I’ve been trying to figure out how to change the scrollbar color in WordPress forever! I’ve used that code before on my other pages, but I couldn’t figure out where to put it on WordPress (I tried, body{}, content{}, the header.php, everything!). Thanks!!!