Making A Firefox Theme : Part 1

I was inactive for a long long time (by web’s standards), not because I had nothing to write, but because I was involved in a really addicting task of making a Theme.

Sure you know what a theme/skin is cuz that’s why you have come here. So without wasting much time, lets get started.

First, you need to know how a theme works in Firefox. Well, there are ‘basically’ 3 things involved. Images, CSS and XML… You’d be thinking “Shit man… I can’t do this… xml??? what is this???” If you’re thinking something equivalent to that, you are wrong. But for now just forget about those things and read on.

First step is deciding what to create. Once you get a basic picture of your theme, you can do two things : Get a ready-made theme and open it up, edit the CSS and alter images, etc and repackege it. Or make every inch of the theme yourself (which, frankly is a pretty hard proposition… monumental actually… if u r a beginner)

Now, if you get a theme of your choice on the net, download it or get it from your user profile (find it at

%system-drive%\Documents and Settings\(your profile)\Application Data\Mozilla\Firefox\Profiles\(your profile)

Alternately, you can use firefox’s default theme (get it in firefox’s folder…)

Now, you’d have noticed that the theme is a .jar file… How do you extract all the files?? Easy… If you have WINRAR, you can directly unpack the files… or you can rename the .jar to .zip and then unzip it normally.

Now normally you’d find 5 folders (can be more)… They contain the files of those components. Now, first to the BROWSER folder. You’d see many icons/images and some CSS files… Confused?? Well, first try changing some Toolbar icons… Remember the resolution of the image though (if the icons are 32x32, and you make a 24x24 icon, the browser won’t look good… So taking care of resolution, edit the files in a GOOD image-editor (not MS Paint… it is one of the worst things around… IMO)… (A tip : USE GUIDES and Grids… It’d help you overcome the situation in which another icons parts encroach upon other’s territories…

Now, once you get involved in creating icons, do it fully. Then turn your attention to the other important part : CSS… If you prefer not changing the font colours and browser colours and behaviour of icons,etc, then you can leave these alone, and proceed to the next step. If you know atleast some HTML, this could get interesting… If you do know how CSS works, then go for it (unless the original  theme is superb).

The CSS files do exactly what they are named… So whatever you want to edit, search that file and find the relevant property and edit the desired line. You can add some more features/properties to the theme if the theme does not have some components.

Now, once you are done with CSS files, come to the root folder where you have the stored the 5 (or more) folders… There would be 2 files : icon.png and preview.png (normally). Edit these to make them look like what you want people to recognize your themes by. Now, edit the install.rdf and contents.rdf files… here you have to edit only 2 or three lines in Install.rdf :

<Description about="urn:mozilla:install-manifest">
    <em:id>extensionname@organization.tld or GUID</em:id>
    <em:version>version-number</em:version>

You can get a UNIQUE GUID for your theme here :

GENERATE GUID

Copy the generated GUID to the place of <em:id>-------</em-id> mentioned earlier.

But you need to give either a GUID or the type mentioned above.

Now scroll a bit lower and edit this line :

<!--
<em:updateURL></em:updateURL>
<em:aboutURL></em:aboutURL>
-->
<!-- Front End Integration Hooks (used by Theme Manager)-->
   <em:internalName>extension-name</em:internalName>
</Description>     

(If you want to specify an external update link, you can specify it here… but if you are posting the theme on addons.mozilla.org (AMO), then you can skip this part. The internal name is the name by which you want firefox to store the theme in your user profile.

Now, come to CONTENTS.rdf, and replace any occurence of the original theme name by your own theme’s INTERNAL NAME… Just see the tags, and you’ll understand what you have to change and what to leave… Its plain english (nearly)

Once you are done, you zip the file (using Winzip/Winrar/ any other software you have) and rename the filename from .zip to .jar

Now Drag the theme from its location to the ‘addons’ window in Firefox. This will install your theme in firefox, see how it is, and if it is good enough, you can post it to AMO…

Best of luck…