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.

Advanced WordPress Training Videos Online Blog Website
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

BlueHost meets or exceeds all requirements for running WordPress. The latest version can be installed from their applications library in a matter of minutes.
Powered by Gregarious (42)

Tags:

Share and enjoy:
  • Digg
  • del.icio.us
  • Technorati
  • YahooMyWeb
  • Slashdot
  • Reddit
  • blogmarks
  • Furl
  • SphereIt
  • StumbleUpon
  • E-mail this story to a friend!

One Response to “ Customizing the WordPress Scrollbar ”

  1. 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!!!

Leave a Reply

Maximum 2 links per comment. Do not use BBCode.
You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <em> <strong>