Work With Me
From web developers & project managers to UX & QA the Nerdery needs you!
iPox Remix
Submitting Your Theme to Mozilla
Once you’ve gone though and created your own, original, Firefox theme via the iPox Remix tutorials, you’re next step is to submit it to the Mozilla Addon site for the world to enjoy.
Head on over to addons.mozilla.org and register for a free account. Once that’s done, you should see a ‘Developers Tools’ link in the left sidebar. Click on it and the left sidebar will change and you’ll see a link to ‘Submit Add-on’. This is where you upload your theme file (.jar).
Customizing Toolbar Backgrounds
There are three main toolbars in Firefox, each that can have a separate background.
- 1. Navigation Bar
- 2. Bookmarks Bar
- 3. Status Bar
The main toolbar background graphic is named toolbar-background.png and located in the /global/toolbar/ folder. If you just recreate a new png file, you won’t need to edit any of the CSS code. If you want to make some modifications to how it’s displayed, you can open /global/toolbar.css and edit the toolbar elements. For the most part here, you are just concerned with the toolbar style.
Custom Firefox Toolbar Buttons
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.
Update: In iPox Remix for Firefox 3, there is one image for all buttons and not really small and large versions of all buttons. However, the same basic rules apply.
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 32x32px and small are 24x24px.
Graphics Editing for Firefox Themes
In order to create custom buttons and imagery for your Firefox theme, you’ll need some graphics skills and a program.
Myself, I use Macromedia Adobe Fireworks CS3. I really like how easy it is to use and how well it mixes vector and bitmap imagery. That’s my choice, but you can choose to use whatever you want.
Here are a few graphic application ideas.
- Photoshop (Regular or Elements)
- Fireworks
- Gimp (free)
- Illustrator
- Pixen (free)
- Inkscape (free)
- PaintShop Pro
Creating Your Themes’ Identity & Install Files
Creating your theme’s identity is probability the most important part of creating a Firefox theme. You need to ensure your theme doesn’t conflict with anyone else’s and, of course, give it a cool name.
To do this, we’ll need to modify two files inside the iPox Remix Pieces folder; install.rdf and contents.rdf. Each file should be able to be opened by a basic text editor like TextEdit (Mac) or WordPad (Windows)
Inside install.rdf we start by giving our theme it’s own UUID. This is like a fingerprint and it makes each theme unique. UUIDs are simple to get. Just visit http://www.famkruithof.net/uuid/uuidgen and they’ll give you one. Now, replace 11111111-1111-1111-1111-11111111111 with the UUID you acquired from the site above. Keep the numbers inside the {} brackets though.
iPox Remix Download Fixed
If you caught the iPox Remix announcement earlier this week, you may have noticed that download didn’t work. No one told me though. 
I did stumble across it late last night and fixed the issue.
You can successfully download the iPox Remix theme files now.
Packaging Firefox Themes
One of the first things you need to understand about Firefox themes is how to package them. It’s really simple, so be prepared to have an easy first step.
Firefox themes are just zip files, renamed to jar. So, if you can create a zip file, and rename a file, you’ll be done in no time. You may have to make a few tweaks to how XP/Vista shows files though.
Update: The file structure is now different with Firefox 3.6. See the updated file structure here.
iPox Remix – Modify or Create Your Own Theme
Announcing iPox Remix. No, it’s not a new theme, it’s the iPox source for you to customize.
iPox Remix is not only the files, it is going to also be a set of walkthroughs that help you better understand how to create a Firefox theme. They could be used to modify iPox as you wish, or it could be to use it as a base to create your own, all new, Firefox theme.
