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…

Making an Age Of Empires III ‘CD’

This thing came in my mind when I was so thoroughly bored by the incessant chatter of the TV and studies, that any idea of escape seemed great. I tried to create the CD Cover+CD of Age of Empires III Icon, which would later serve as the icon for the folder in which AOEIII was installed.

I started by getting a good-quality front cover of AOE III from the net and… yeah… Photoshop is rather quintessential, isn’t it?? (I have not tried GIMP till now)

aNow, open PS, load the pic, and copy the cover to one more layer (this for the ‘CD’), and better make the CD layer invisible (for better manipulation and to avoid confusion… later you can make it visible again)

Now, select the Cover and transform it to a smaller size (so that it looks like a ‘cover’), and skew it a bit for creating a ‘perspective’ or 3D effect via the Free-Transform tool… You are done with the cover… It'll look something like this :

Now for the CD :

Select the Ellipse tool, and select the Paths option from the top toolbar (to make a work path). Now draw a circle to cover the part you want on your CD… It requires some patience and practice…

Now right click and select “Make Selection”, and crop it off… Now make another smaller circle (for the middle transparency in the CD and cut it out too...)

Now for the hole in the middle, draw a circle concentric to the transparent circle, and open the 'Layer Style' dialogue box. Select "Bevel/Emboss" (for the 3D effect, adjust the values to your satisfaction).

Work Done.

And this is the finished product :

A very useful tip : ALWAYS USE GRIDS (unless they hamper your sight)

Also, if you wish to add some more oomph value, you can add 'reflections' of the CD and Cover... But if you transform this image into icon, the reflections may not look much good...

I use 'AveIconifier' for transforming images into icons... Try it... its a very handy product.