Now we've got top and bottom buttons on our scrollbars, so let's make them look just the way we want. We can do this by writing our own CSS to style the scrollbars.

If you've spent any time at all debugging CSS, then you already know about the tools available to you in your favorite browser to do so. Just in case you haven't, I highly recommend you take a look at the Firebug extension for Firefox, or the developer tools built into Opera, Chrome, Safari, and IE9. A quick Google search for 'your browser developer tools tutorial' should yield plenty of results where you can learn how to take advantage of what these tools have to offer.

If you're using an older version of IE, then take a look at the Debug Bar program available as an extension to IE that will be helpful for troubleshooting problems with CSS. It is free for personal use.

I tend to use Google Chrome when I'm developing new pages. To access the developer tools in Chrome, click the wrench icon at the far right of the toolbar, then select Tools | Developer Tools. Here's an example of the CSS information I can get by using the built-in tools:

On the left, you can see the DOM for my document — all the HTML elements that make up the document tree. I can interact with it — each node can be expanded or collapsed to show or hide the elements that are nested inside. In this case, the highlighted element is the container for our jScrollPane scrollbar.

On the right, I can see the CSS that applies to the element I've selected on the left. I can also see which file that particular CSS appears in, and on what line. In this case, most of the CSS that's styling my scrollbar container can be found on line 20 of the jquery.jscrollpane.css file.

Digging into the DOM and CSS this way is a quick and easy way to figure out which lines of CSS we need to modify to get the appearance that we want.

We have a couple of options for customizing the CSS for the scrollbars. Either we can modify the jquery.jscrollpane.css file directly, or we can copy those styles to our own stylesheet and make the changes there. It's a matter of personal preference, but if you opt to modify the jquery.jscrollpane.css file directly, as I'm going to do here, then I highly recommend you to make a separate copy of it to keep so that you can refer to it or easily restore it without having to re-download it again.