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

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.
    folder
    When you open the joeBob folder, you’ll see some files and some folders. This is the real starting point.
    finder
  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.
    uuid
  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.
    contents
  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.