Main Content

Customize Firefox’s Scrollbar

One nice element that can really bring a Firefox theme together is a themed scrollbar. Lucky for you, this is already read to go in iPox Remix.

Simply open the global folder and inside you’ll find scrollbar.css and a scrollbars folder. The scrollbar folder contains all the pieces. I don’t believe the hover states are used but I put them in anyways. All pieces are pretty much self explanatory. Just open them up and edit the images. For the most part, scrollbar.css doesn’t need to be edited at all. However, if you feel you need to make modifications to the scrollbars, outside of the imagery, then this is where you’d do it.

If you already have a Fireox theme and want to add custom scrollbars then it’s a bit tricker to do. I think all you’ll also to modify xulscrollbars.css but then again, I’m not positive. It’s been a while since I went though all the steps to work in custom scrollbars.

Customizing the scrollbars can really bring a theme together and is something that I don’t feel a lot of developers do. iPox Remix custom scrollbars should be Mac, PC and Linux friendly too.

This is just one installment into the iPox Remix set of tutorials that will help you learn how to create your own Firefox theme. Visit the main iPox Remix page for more details.

2 Responses

  1. Brian says:

    Currently when I load the theme the scrollbars don’t have the end caps on the them. I am trying to make a custom scrollbar for a theme I developed, however, since I can’t get the end of the bar to display it doesn’t look good. Have you found a way to solve this at all?

  2. Thomas says:

    I use to have it all figured out before Firefox 3.5 but haven’t had time to look to far into it lately. My best advice would be to look at other themes and see how they are doing it.

Leave a Reply