This edition of iPox Remix, we are talking about creating custom toolbar buttons. Good buttons can really make a theme so don’t just rush through them.

Firefox’s toolbar buttons are really just two images. One for all the large and one for all the small. Each image is made up of 14 (or 15 if you include email) individual buttons. Large buttons in iPox Remix are set at 32×32px and small are 24×24px.

Each button also has five states. From top to bottom they are:
Normal, Pressed, Disabled, Hover, Active.

From left to right, the buttons are:
Back, Forward, Stop, Reload, Home, Downloads, History, Bookmarks, Print, New Tab, New Window, Cut, Copy, Paste, Email (if available).

What you’ll want to do is re-work each button as you wish. Keeping in mind that large buttons can’t be bigger than 32px tall or wide and small can’t be more than 24px tall or wide.

In the image below, I’ve outlined each button’s area with a green line to help you see each button. The checkered background represents a transparent background in Fireworks.

Hosted on Zooomr

You can find the toolbar images inside iPox Remix Assets -> Browser -> Toolbar.png and Toolbar-small.png

When you are done creating the buttons in your graphics program, you can save them out as GIF, JPG or PNG format. I suggest PNG because it’s the best quality. I always have transparent backgrounds so I save out the images as PNG 32.

For easy updating, I’d suggest keeping the PNG format and exact name. If you don’t, you’ll need to search the /browser/browser.css file and update the name of the images to correspond with yours.

Now re-package and install your theme and you should have custom toolbar buttons.

Also, if you are digging around, you may see Toolbar-rtl-small.png and Toolbar-rtl.png. The rtl has something to do with where the icons are placed on the toolbar in regards to the URL bar. Or so I think. Honestly, I just make the rtl files the same as the non-rtl versions.

Ohh and I did notice that in the iPox Remix assets, there is a Toolbar1.png file. You can toss that out as it’s un-necessary.

Go ahead and customize your toolbars now!

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.

Tags: addon, mozilla, theme, tutorial