Creating a Skin for Firefox/Getting Started

  • Revision slug: Creating_a_Skin_for_Firefox//Getting_Started
  • Revision title: Creating a Skin for Firefox/Getting Started
  • Revision id: 97020
  • Created:
  • Creator: Aconbere
  • Is current revision? No
  • Comment /* Directories */

Revision Content

Setup

Download the latest version of Firefox, install it (Install the DOM Inspector as well).

Extract the Theme

While you can hypotheticaly begin with any theme already designed for firefox, for the sake of consistency we'll speak as though everyone is editing Winstripe (the default firefox theme). This is located in the file "classic.jar" found in the firefox instalation directory. A .jar file is in reality a renamed zip and most zip and you can open them up in your zip program the same way you open up zip files. However if you zip aplication doesn't think it's of the right format, you can simply rename the file "classic.zip" and continue extraction.

Classic.jar locations

Linux: /usr/lib/MozillaFirefox/chrome/classic.jar

Windows: <probably program files somewhere>

Mac OS X: I have no idea

Copy classic.jar to another easily accessible folder, Classic, is recommended, and extract the contents of that folder, maintaining directory structure.

Directories

Inside Classic.jar you will find 4 main directories

browser

Browser contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences window.

global

Global contains almost all of the important css files that define the apearance of the browser. This is the most critical directory in a theme.

mozapps

Mozapps contains all the styles and icons for the browser periphrials, such as the extension manager or update wizard.

communicator

Doesn't do a whole lot and can typicaly be forgotten about promptly.

Revision Source

<h3 name="Setup"> Setup </h3>
<p>Download the latest version of Firefox, install it (Install the DOM Inspector as well).
</p>
<h4 name="Extract_the_Theme"> Extract the Theme </h4>
<p>While you can hypotheticaly begin with any theme already designed for firefox, for the sake of consistency we'll speak as though everyone is editing Winstripe (the default firefox theme).  This is located in the file "classic.jar" found in the firefox instalation directory.  A .jar file is in reality a renamed zip and most zip and you can open them up in your zip program the same way you open up zip files.  However if you zip aplication doesn't think it's of the right format, you can simply rename the file "classic.zip" and continue extraction.
</p>
<h5 name="Classic.jar_locations"> Classic.jar locations </h5>
<p>Linux: /usr/lib/MozillaFirefox/chrome/classic.jar
</p><p>Windows: &lt;probably program files somewhere&gt;
</p><p>Mac OS X: I have no idea
</p><p>Copy classic.jar to another easily accessible folder, Classic, is recommended, and extract the contents of that folder, maintaining directory structure.
</p>
<h3 name="Directories"> Directories </h3>
<p>Inside Classic.jar you will find 4 main directories
</p>
<h6 name="browser"> browser </h6>
<p>Browser contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences window.
</p>
<h6 name="global"> global </h6>
<p>Global contains almost all of the important css files that define the apearance of the browser.  This is the most critical directory in a theme.
</p>
<h6 name="mozapps"> mozapps </h6>
<p>Mozapps contains all the styles and icons for the browser periphrials, such as the extension manager or update wizard.
</p>
<h6 name="communicator"> communicator </h6>
<p>Doesn't do a whole lot and can typicaly be forgotten about promptly.
</p>
Revert to this revision