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.

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.

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.

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.

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

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.

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.