Hi, welcome back…i’m not having a lot of time to post new useful things so  a friend of mine will post something awesome, how to create themes for firefox!

You can follow him here: @fpgentil

So enjoy it!

First of all, you should know what exactly you must have to build your first Firefox theme. Let’s get it started by understanding some concepts.

Basically a Firefox theme is a bunch of CSS and PNG files, which are interpreted by Firefox. But, as far as Firefox follows some rules, the best and easiest way to start, is get a classic Firefox Theme, and work on it.

So, let’s stop talking and get some work to do. We should start by getting this classic theme. It starts by creating your theme folder, then go to the Firefox folder:

Windows: \Program Files\Mozilla Firefox\chrome\classic.jar

Linux: /usr/lib/MozillaFirefox/chrome/classic.jar or /usr/lib/firefox-*.*.*/chrome/classic.jar

Mac OS X: /Applications/Firefox.app/Contents/MacOS/chrome/classic.jar

Unpack this .jar file. Open “..\classic\skin\classic” and copy all folders (browser, communicator, global and mozapps) to your Firefox theme one.

Now let’s talk about some other files you must create before start developing your application.

 

Open notepad or any other text writer you prefer, and create two empty files called: ‘install.rdf’, and ‘chrome.manifest’, without extension.

Then, using Photoshop, paint brush, or any other image maker software, create two pictures: icon.png (32x32) and preview.png(150x150).

Icon.png is going to be your theme icon, and preview the picture you see before install your application.

 

Now you should have something like this:

 

fftheme.xpi: (.jar)

              /install.rdf

              /chrome.manifest

              /preview.png

              /icon.png

              /browser/

              /communicator/

              /global/

              /mozapps/

  

PS. XPI is a technology for installing Mozilla extensions that add functionality to the main application. (More about XPI: http://en.wikipedia.org/wiki/XPInstall)

  

Well, and now let’s talk a little bit about those files.

- Install.rdf

 

               This is a manifest file, used to determine all information about this add-on (in this case, the theme) while it’s being installed. It contains a metadata (more about it: http://en.wikipedia.org/wiki/Metadata) which identify the add-on, and also some information about who created it. At this point, the file MUST be called “install.rdf”.

  

Here, I have an example of the Install Manifest:

  

  

ID

               It’s the identification of your add-on. Firefox 1.0 used it as GUID (Globally Unique Identifier), as the name suggests is used to identify your add-on.

               If you are developing a theme for Firefox 1.0, you should generate in some specific format, which can be found here http://www.somacon.com/p113.php.

               However, if you are creating something for Firefox 1.5 or previous version, the id field should be a string formatted as an e-mail, it doesn’t have to be a valid email.

  

Examples:

Firefox 1.0: <em:id>{daf44bf7-a45e-4450-979c-91cf07434c3d}</em:id>

Firefox 1.5 or previous: <em:id>myfirstfirefoxtheme@theme.net</em:id>

  

VERSION

               You must write the limits your theme will be supported by Firefox, although it won’t be installed. It’s the same way in all Firefox versions.

  

Example:

        <em:minVersion>3.0</em:minVersion>

        <em:maxVersion>3.5.*</em:maxVersion>

  

PS: “3.5.*” means that your add-on will be supported by all 3.5 versions of Firefox.

PS2: For add-ons hosted on addons.mozilla.org, Mozilla’s update website may repackage your add-on and correct or reject malformed version strings. (Mozilla Developer Community)

  

TYPE

               It’s an integer which represents a type of you add-on

               

List of valid numbers:

               – 2 Extensions

               – 4 Themes

               – 8 Locale

               – 32 Multiple Item Package

               – 16 plug-ins (Firefox 2.0 or previous)

  

PS: This type stuff, was added for Firefox 1.5, so if you are developing a theme for Firefox 1.0, you don’t have worry about this.

  

TARGET APPLICATION

               Your application will work based on this information, by the ID specified, and from the minimum to the maximum version. For valid id, min and max versions see: https://addons.mozilla.org/en-US/firefox/pages/appversions.

  

PS. If you are not interested in knowing about this, just copy exactly it is in the Install Manifest.

  

NAME, INTERNAL NAME, DESCRTIPTION, CREATOR and HOME PAGE URL

               These are information about you, developer. Feel free to inform what you want.    

   

- CHROME.MANIFEST

               

What is Chrome?

               Chrome is the set of user interface elements of the application window that are outside of a window’s content area. Toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.

               The root chrome.manifest is the only thing read for most bundles. XULRunner application bundles also read any additional chrome/chrome.manifest file, but that’s "special".

More about Chrome can be found here, https://developer.mozilla.org/en/Chrome_Registration.

  

Since we are getting started with Firefox add-on, you don’t have to worry about this. Let’s make it simpler. We have to tell Firefox where to find you files, don’t we? So, Chrome packages are the best way to do this.

                                                                                     (by Mozilla Developers Community)

  

Add this code:

  

  

PS: Do not forget the trailing slash ‘/’, although your add-on won’t be registered.

PS2: ADD-ON_Name, you should put your theme’s internal name, the same one that you’ve already put in install.rdf file.

  

               In a few words, this skin mapping, is telling to Firefox, when you are using ADD-ON_Name as a theme, Firefox should search files about brownser, in brownser/ directory. Thus, all folders you have in your theme’s directory are now ready to be ‘read’ and ‘interpreted’ by Firefox. You are free to change the names of the folders, but I don’t recommend.

  

               Ok, now you have everything you need to pack your first Firefox theme, but you haven’t changed anything yet, so let’s make some changes, and test it.

  

               Open the ‘browser/’ folder, and there you’ll see “toolbar.png” which means the toolbar buttons. You can make any change you want, try to change a button. There are four lines of each buttons, so it means that you have 4 states for those buttons (enabled, when mouse is over it, disabled and clicked).

  

TEST

               In fact, there are two ways to test your theme.

  

               First one is packing everything you have in your theme’s folder, as a .jar file. Drag and drop to Firefox > Tools > Complements. And you are able to test your theme. But doing this every time you make a littlest change is kind of uncomfortable.

  

For Linux or Mac OS users, you can use the command to zip it:

zip -r my_theme.xpi install.rdf chrome.manifest browser communicator global mozapps

  

Note: The command-line tool will update an existing zip file, not replace it – so if you have files you’ve deleted from your theme, be sure to remove the .xpi file before running the zip command again.                                                     

                                                                                       (By Firefox Developer Community)

  

               The second way goes like this: Now you will be able to use and test your theme in the same time, only needing a Firefox reboot. First of all, you must find your Firefox profile:

  

1.     Win + R (Start > Run) and type %appdata%\Mozilla\Firefox\Profiles

2.     Open your <profile_id.default> folder.

3.     Open the ‘extensions’ folder (create if necessary)

4.     Create a text file without extension, and name it with the id of your theme (string-email format one, or {12312312} format for Firefox 1.0)

5.     In the content of the file, put the full path of your theme. (Ex: C:\themes\my theme\)

  

PS: Do not forget the trailing slash at the end.

PS2: For Windows users, retain the OS’s slash direction.

  

               At this point, you should be able to test your theme. Start Firefox, it will detect your new theme, and if necessary, go to Firefox > Tools > Complements, and select your application. Now you can go back, change any CSS or PNG files, restart Firefox, and you’ll be able to see the updates.

  

         That’s it!

          Free your mind, and be happy

               

          Next part, I’m going to talk about those CSS files, and how to put a background in your Firefox theme.

          Hope you enjoy this tutorial. Feel free to let your comments here.

          I’d like to thank Mozilla Developer Community, which helped me a lot with great tutorials.

               

           Cya!

 

All Credits to Felipe Pelizaro Gentil : )