The new theme structure with Firefox 3 is different than Firefox 2.  I knew it would be.  And, at this time, there is nothing out there to help a theme developer know what to change or what to update.  There is a long list of ongoing theme changes, but what does that really mean?  What are the steps to upgrading a theme?

I tried to pull out the Windows default theme and code from that, however it didn’t look or work well on a Mac.  So I pulled out the Mac theme and tried it on Windows.  Amazingly that worked, so it was a step in the right direction.  However, I have no idea if it works on Linux yet and I’m afraid of future compatibility issues.

Then I looked into converting iPox’s buttons to the new toolbar format.  On the Windows side it was pretty easy.  Their theme uses nice 24×24 buttons that matched up pretty well with mine.  On the Mac side, the theme uses mostly the same buttons for big and small, but they are long and the odd shape makes it look way to spaced out with iPox’s buttons.  Additional coding is needed there, or I need to mix and match pieces of each theme.

I then threw in some of my backgrounds and it’s a decent start, but it’s got a long ways to go.

I started the process of converting iPox to Firefox 3, but I doubt I’ll do much until the release clients come out or at least the Proto Mac theme is finalized.  If you notice above, the stop button is blue.  That’s not my issue, it was mis-coded in the Proto theme and who knows what other bugs it has. Never mind, it’s not a coding issue, I just need to learn how the theme works.

Additionally, if someone knows a good way to port Firefox 2 themes to Firefox 3, I’m all ears.

I am excited for Firefox 3, but not to excited about re-working all my themes.  A part of me does like the idea of re-coding them as I hope they’d be better then ever before, but there are a lot of other things I’d like to spend my time on too.

At this time I will tell you that iPox will make it to Firefox 3; eventually.  I know there are a lot of fans out there and I won’t let you down.  I just don’t know when I’m going to do it just yet.

I was hoping for an easy transition from Firefox 2 to 3 but I’m not sure that’s going to happen.

Once the betas become release clients, then maybe I’ll start theming.  However, this looks like it could be a complete re-code.

If you’d like to dress up iPox for Halloween here’s how.

1. Make sure you have iPox installed and active.
2. Install Stylish (or Greasemonkey) and ensure that’s active too. It’s ready to go if you see the icon in the lower right corner of your browser.
3. Then head over to the UserStyles page and click the install button.

That’s it, your iPox should be ready for Halloween!

To un-install, you know when November hits, just open Stylish and un-check the iPox Halloween Costume.

The best one, if you are actually on a Mac, is probably GrApple by Aronnax. His attention to detail is amazing. Other good choices are Pinstripe (again Mac only), iSafari and iAqua, my own creation.

However, there are many many more choices out there. Mozilla Taiwan has a forum thread going with screen shots and download links for many other alternatives. Some look pretty good and some are, oddly enough, not very Mac friendly.

If you try any, let us know how well they work. I tried Castripe which turned out to be a pretty decent theme.

And, believe it or not, Mozilla may actually be creating a Safari like theme for the Mac version of Firefox 3. The mockups don’t look to bad, but it’s not quite the polished Mac look and feel that Apple makes. I’m sure they’ll iron out those details though.

So what’s your favorite Mac like Firefox theme?

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.

Judging from the HUGE success of my basic How to create a Firefox Theme post, there are a lot of folks out there that would love to create a theme. So I’m expanding upon that post to bring more in depth information and tutorials. The basic tutorial work well, but it lacks some detail and I’d like to expand upon it more.

I’m going to try and hit the main areas but it’ll take a while. If you have requests of what you’d like to learn, go ahead and let me know.

Overall, this is meant to be an easy exercise. I hope to keep things on a level that is easy to understand. And really, with the iPox Remix source, all you need to do is replace some graphics and you’ll be well on your way to creating your own version.

You can get all the details on the project and the source files necessary on the official iPox Remix page.

Thanks to BitBox for the base buttons that started this re-work and thanks to you all for making iPox such a huge success.

And this is just the beginning, in the upcoming weeks I plan on helping everyone create their own version of iPox. Or, if you really excel in my tutorials, you can create your own theme. So stay tuned for that.

Fission support was requested and I looked into it. It turns out that Fission doesn’t work well with a rounded toolbar. I played with it and added in support as much as I could. It’s not perfect, but it’s better than it was.

AddBlock Plus fixes should be in place. This was an issue where red or green text was always black.

New Tab Button on Tab Bar support was requested. It turns out that I like this extension and so I built in support for it.

And the throbber. When I unpleased the new, custom throbber a while back, lot of people complained because they didn’t like it. Yes, I know, change is difficult. Well I decided to put the old one back in as a hack. Add a bit of code and the old one will re-appear.

@import url(”chrome://global/skin/extra/old-throbber.css”);

More information on hacks on the iPox page.

Look for an all new version of iPox soon.

Not only do I have an all new theme to offer but just about everyone will get some sort of an update. Some long overdue, some just minor things.

I’ve been working on a brand new theme for a few weeks now if not longer. It’s not completed, but it’s in a good spot. So a release should be coming up sometime in March.

I also have a few pieces of news regarding iPox. Not only is there a new version, but I have an idea to make most everyone happy. Keep checking back for those announcements.

HalloFF should make a return in March as well. It’s my Halloween theme with Jack Skelingtion and it seems to have a fan base that lasts all year long.

That’s right, March will be full of Firefox themes with at least three theme releases, one of which is brand spanking new. How exciting is that?

Whenever I think of breast cancer I think of lots of pink and white. So I thought iPox was a good starting point. I took a few hours and I converted iPox from blue to pink.

PinkHope includes a Breast Cancer ribbon for the inactive loading icon and the throbber is a beating heart. Also includes pink scrollbars, bookmark bar, window background and icons. I don’t think it’s overly pink, but some might.

Now here is where I could use some help. If you are an icon designer, I’d love an original set of toolbar icons. Contact me for details on sizes and formats. Currently I’m just using the default ones, turned pink of course.

For a quick couple of hours work, this is quite a nice theme and I hope that it serves it’s purpose. PinkHope is not endorsed or affiliated with any cancer groups, it’s just my personal contribution to breast cancer awareness.

For install instructions, see the PinkHope page.

As noted earlier, all themes should now be Linux compatible.

MidnightFox also got the status bar code updated so hopefully that ugly grey one is gone.

iPox got the most updates with a new throbber and a few theme fixes throughout.

For the most part, just little tweaks, nothing major.

All updates are available via Mozilla’s Add-On site.

A huge thanks goes out to all my help including ehume, terry(Denver) (Teruel de Campo MD), Albireo and Richard Hemmer! Without you all I could never have figured it out.

All theme updates should be available on Mozilla’s Add-On site in the next day or two.

Basically, just fill in a few fields, hit submit and I’ll be notified via email. It’s that easy. It’s even got a developer comments area where I can respond to any issues.

Thanks to ZoHo for creating an easy to use, and very powerful, online application for collecting and organizing data.

What’s new in iPox 1.0
- Real Firefox 2 support.
- New status bar
- Slightly re-wokred tabs with new highlight color.
- Smaller icons to match the PC default sizes.
- Better themeing of addons, preferences, and all windows.
- Feed folder image updates
- Sidebar cleanup
- Right click menu backgrounds.
- New go button.
- Customize Toolbar sheet themed.
- New pop-up blocked icon.
- Smaller buttons
- All text fields rounded.
- New bookmark bar hover.
- Slight theme to feed page.
- All Mac loading spinner things.
- Error Page Edits
– Much More

There are also new hacks/options for those that don’t like the blue bar.

Enjoy!!

iPox has been RELEASED!!!!

There is still one Mac bug that I’m trying to work on but may not get fixed before the release. A few other things would be nice also, but nothing huge. Overall, it’s awesome!

Following up on my previous State of iPod for Firefox 2 post I thought I’d give everyone an update. Things are not going very well for iPox.

The tab bar is just not playing nice. We either have tabs and errors, or no tabs. So that’s no fun. iPox will not have the close button on each tab for a while yet and that drop down menu on the tab bar is also missing in action.

The good news is the URL bar now has 95% rounded corners. There is just some cleaning up to do and that involves getting the background back for behind the buttons. Why that has disappeared is beyond me. Another oddity in this Firefox 2 theme adventure.

One of the best and worst ideas that has come up is to start all over. That way I get all the Firefox 2 features and none of the mess that I currently have. However, that doesn’t sound like a lot of fun. I’m not sure what we are going to do there.

Since Firefox 2 is suppose to launch today, and I promised a download, I’ll let you all see the latest development. Keep in mind that this version has issues, is missing features and is a work in progress.

Download removed as iPox for Firefox 2 should be released soon.

Ok, I’ve updated the theme with a working version for PCs. This one has the toolbar and everything. If you are stuck without the toolbar, just go to Mozilla’s Add-On site and install any extension or theme. That’ll open the addon’s window and you can then choose a different theme. Sorry about that.
To install, just download iPox, open your addons window and drag the .jar file to your addons window. Then restart.

Good Luck!

People have been asking about iPox for Firefox 2 for literally months now. So here is the status. It’s in progress.

I have updated the the install files and saw the freak out when Firefox 2 got a hold of it. I’ve started working out the issues and it’s not easy. So far I’ve un-themed more than I’ve fixed. The theme changes documentation isn’t perfect and by applying all the updates, it just makes iPox worse.

By working on iPox I managed to get it so that the tabs disappear, however I was able to revert backwards and get them back. No close button on each tab or any other new tab bar features yet. But tabs work.

Other things are freaking out too. Like the URL bar. I’ve had to remove the round ends for now and I somehow have a giant favicon. The RSS icon is also not happy.

I’m keeping a list of my on-going iPox Firefox 2 fixes to make if you wanna check them out.

So when will it be done? Ummm….. Good question. I make no promises that it’ll be ready for the official Firefox 2.0 launch date. Sorry, but it’s just not that easy. Enjoy the cool new Firefox look and feel and iPox will come when it’s ready. Unless you wanna help fix the issues, just be patient.

One issue that people have is that their extensions don’t work. Then they complain to the Firefox team which does no good. What you really need to do is contact the extension developers. It’s up to them to update their extensions, not the Firefox team.

For those that can’t wait for a developer to update their extension, you can do a few tricks to update Firefox extensions yourself. It’s not to hard and works great for those extensions that you can’t live without your favorite extensions.

I helped out Glen yesterday and he turned my advice into a blog post that outlines how to update Firefox extensions for Firefox 2.0. The tutorial should work for most extensions, however the more complex the extension is, the less likely this will work.

Ohh and for those wondering, yExplore is good to go for Firefox 2.0.

One more note, if you do this with themes, like iPox, it’ll work, but look bad.  Themes are a separate entity that needs to be updated for each release of Firefox.  I’m working on iPox for Firefox 2.0 but it’s not ready yet.

HalloFF is a little bit of iPox, a little bit of MidnightFox, a little bit of Hallo and some Nightmare Before Christmas characters all thrown together, mixed up and ouput into a new theme. It hasn’t gone though a lot of testing or quaility checking, but since Halloween is so close, that’s hard to do.

Check HalloFF out and let me now what you think.

To Install:

1. Download HalloFF
2. Open Firefox’s theme’s window and drag HalloFF.jar into the themes window.
3. Right click on the theme in Firefox’s theme window and select ‘use theme’.
4. Restart Firefox.

Note: I have no auto update feature built in so you’ll have to check every now and then to see if there is a new version.

Update: 10/7 - Minor edits but realized it hate’s Sage and I don’t know why.

This is a basic ‘how to’ tutorial for creating a Firefox theme. It’s not intended to be overly detailed as it’s not really that hard. In no time at all, you could get a basic theme created for Firefox.

***Important***
Before submitting a theme to Mozilla or making public, please contact the author in order to ask them if their elements are free of rights. Firefox is Open Source, Themes are often MPL/GPL but icons and pictures belong to their respective authors! Play nice people.

For this tutorial, our theme will be called joeBob and the instructions work for Firefox 1.x for sure.

1. Find a theme that seems to be quite completed and works on Mac and PC. You’ll need a good starting point and I think it’s easier to edit other themes than start with the default ones as the PC theme doesn’t have Mac pieces and the Mac one doesn’t play will with a PC. Trust me, I found out the hard way.Get permission from the theme creator before you start playing with their theme. It’s just nice to know you have permission so that someone doesn’t accuse you of stealing their theme.
2. Now that we have a starting spot, download the theme to your computer. To do this, right click and save link as in Firefox, or use a browser like Safari or IE that doesn’t know what to do with a .jar file except download it.
3. Change the file name from theme.jar to joeBob.zip. Actually , a Firefox theme is just a bunch of compressed files. Nothing to fancy. Once you change it to .zip, un-zip it and you should now have a joeBob folder on your hard drive . If your software can un-jar files, you don’t have to rename it to a zip.
   
   When you open the joeBob folder, you’ll see some files and some folders. This is the real starting point.
   
   
4. Open up install.rdf. This is the main theme information. You’ll need to add your own version number, theme name, description, creator and homepage information.Don’t Change the area that is inside the em:targetApplicaton as this is the coded needed for Firefox. If anything, you may need to modify the MinVersion and maxVersion numbers as they relate to versions of Firefox that this theme works with. However, lets not worry about that now.
   
   
5. You will need to get your own em:id, also known as your theme’s UUID. This is the theme’s identification. If it’s not changed, it’ll endup replacing someone elses theme on install. Getting a UUID is easy. Just go to http://www.famkruithof.net/uuid/uuidgen and it’ll create one for you when the page loads. Copy this into the install.rdf file.
6. The next file to update is the contents.rdf file. Open it in a text editor and update it with your information. Example: urn:mozilla:skin:joeBob:browser. Basically, it tells Firefox where to find the files associated with your theme.
   
   
7. Now all you have to do is start editing stuff. All images are either png or gif files. You can open them in Fireworks, Photoshop or your favorite graphics editor, design over them them, and save them back out as the same name. Most png files are png 32 as that creates perfect transparent edges.The main Firefox buttons are actually one big file that contains all the buttons, their rollover, pressed and disabled states too. Firefox then uses CSS to create the effects you see in the browser. Some are 24×24, some are 32×32. Just remember that they are all squares.
8. All configuration files are actually CSS files. Open them in your favorite CSS editing app and go to town. There is some Mozilla specific code that starts with -moz but don’t be afraid of it. You can edit height, width, background colors, positions and all that jazz. Throw in more CSS code, get rid of code you don’t like.I skipped over all the xml files as I’m not sure what they do.
9. When you are ready to test, go back out to the first level of your joeBob theme folder, the one that includes the install.rdf file and select all the files, in my case 9 files, and zip them all up. Then rename your zip to your joeBob.jar. If you have a compression utility that actually creates jar files, than that works do. Do not include the joeBob theme folder though as it’s not needed.
10. Next, open up Firefox and drag your theme to the themes window to install. Restart and see how it goes.

That’s the basics. There are many pieces to edit and things to try out. Give it a whirl and I’d love to see what you come up with.

More details can be found at Mozilla’s site or by asking in Mozilla’s forums. I can try to answer questions if posted below too.

I’m starting a whole new set of theme tutorials. Check out the iPod Remix post for all the details.

The biggest update in this version is the addition of buttons. Firefox buttons are now slick white buttons that are based off a mockup from my Firefox buddy Greg. Other updates include an alternating background for the bookmarks and sidebar windows. It helps with readability a bit. The folder icon was also re-drawn from scratch and looks cleaner. Many other smaller updates were fixed/updated to bring a better user experience.

So what’s next for iPox? Probably Firefox 2 support. Lots of people ask for it and it is coming.

Full list of updates in iPox v0.70
- Alternating row colors for Sage, URL & search bar and bookmarks window.
- Preference Icons
- Bookmark Icons
- Buttons themed (minor issue on the Mac with the customize window)
- More spacing around status bar items.
- Extension/Theme/Download selected background color updated.
- New, cleaner, folder icon
- Bookmark bar folder icon hover image
- PC Full Screen Mode Minimize, Window and Close buttons themed.
- Better ‘Bookmark this Page’ menu highlight colors.
- Find bar hover states no longer white.
- Smoother feed icon in URL bar.
- Started editing preferences.

Download iPox from Mozilla’s official addon website.