iPox Remix has been updated for Firefox 3.

iPox Remix is a set of tutorials on creating your own Firefox theme.  You are provided with a starter theme that contains all the necessary files and images to get you going.  It also contains a set of tutorials to help you customize the files and create your own theme.

Unfortunately I don’t have a tutorial for converting themes from Firefox 2 to 3.  I did it manually and re-coded everything.  It’s what worked best for me.

A few weeks ago I took control over my email.  Not only did I clean out my inboxes, but I also converted everything over to Gmail.  Why would I do this?

1. Always online and availabe to me.
2. Doesn’t take up space on my webserver.
3. The labeling system is fantastic.  I didn’t really know this until I really started using it.
4. Integrated nicely with Mail.app or other email applications like Thunderbird and Outlook.
5. I can send and receive email from multiple accounts via one Gmail account.
6. iPhone ready.
7. Email is up even if website is down.

iPox Remix has generated a lot of interest in themes, but there are many unanswered questions out there. Here are a few that have come across my email.

1. How do I use a different image/skin for the menu bar and the bar with the address box?
The main menu bar with File, Edit, View ect. can be themed with this code:
#toolbar-menubar {
background:red;
}
#main-menubar {
background:none;
}

The URL bar can be themed with this code:
#nav-bar{
background:red;
}

Today’s question comes off the iPox Remix request line:
How do I make the font on the bookmark toolbar change color when I hover over it?

Since Firefox runs mainly on CSS, this is a pretty easy edit. Just go into /browser/browser.css and look for the following chunk of code:

toolbarbutton.bookmark-item:hover,
toolbarbutton.bookmark-item:hover:active,
toolbarbutton.bookmark-item[open="true"] {
background: url(chrome://browser/skin/bookmarks/bookmark-highlight.png) !important;
color: #fff;
padding: 2px 4px;
}

Where you see color: #fff this states that it’s using white as the rollover (aka hover) color. Change that to another color and you’re good to go. Colors can be in HEX format or you can type in an actual color like red or blue.

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).

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.

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 32×32px and small are 24×24px.

If you followed the Thunderbird Labels modification I put up a few days back, you may have found out that it didn’t work for custom labels/tags. Yes, I knew that, but wanted to start off with the basic labels. Here is a quick tutorial on how to get your custom ones up and running.

What you’ll need to do is add the following lines of code to your CSS file. The code below accounts for one label/tag color, which, in this example, happens to be orange. You can see where the orange color is represented by the orange HEX colors. The lighter orange HEX number is for the background of the un-selected, labeled message.

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.

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.

For starters, open the iPox Remix Assets folder. Inside you’ll see nine items. Select all items and zip them up. On a Mac, you can just right click and make an archive. On PC, you should be able to right click and send to compressed folder.