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: 97036
  • Created:
  • Creator: Aconbere
  • Is current revision? No
  • Comment /* install.rdf */

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 1 directory Skin, as well as a file preview.png, and icon.png.

skin

Skin simply contains classic.

classic

Classic contains the following 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.

help

Help contains all the files for theming the help dialog window.

communicator

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



Install Your New Theme

Before one can see the changes they make to a firefox theme (since live edits are restrictably difficult to set up) one must first learn how to repackage the classic theme to make it installable. For the sake of this discussion we will call your theme "My_Theme" though you can replace that with any name.

Copying The Necessary Files

The first step is to move all the files into the right directory structure. So create a new directory called My_Theme. Into this file put the browser, global, communicator, help, and mozapps directories from above as well as the icon.png, and preview.png files.

Creating the Install Files
Contents.rdf

Make a copy of contents.rdf and place it in \My_Theme and open it up in your text editor. This file is a small XML Database which is used to describe the skin.

In the code search for all instances of My_Theme and replace them with the name of your theme.

The packages section lists which components of the Browser that you are modifying. If we also had skins for Chatzilla, we would have to add another line resembling the other ones and change it to point to Chatzilla. But this list includes everything that we changed, so just modify the blue text to point to match the name/version that you used in the sections before this.

<RDF:li resource="urn:mozilla:skin:My_Theme:communicator"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:editor"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:global"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:messenger"/>
<RDF:li resource="urn:mozilla:skin:My_Theme:navigator"/>

Save the file and exit the text editor.

install.rdf

Make a copy of install.rdf and place it in \My_Theme and open it up in your text editor. This file is a small XML Database which is used to describe the skin.

  <Description about="urn:mozilla:install-manifest">
  <em:id>{<span style="color:#00D;font-weight:bold;">Themes_UUID}</span></em:id>
  <em:version><span style="color:#00D;font-weight:bold;">Themes_Version</span></em:version>

The first section requires that one a) finding a UUID for your theme and b) giving your theme a version number. Once you've done this insert the information as above, and scroll down.

CSS Files

The CSS files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, etc. For this next part, let's modify the standard button.

Go into \global\ and open button.css in your favourite text editor. Scroll down to button {. This section defines the normal button in its basic state (There is no mouse over it, it's not disabled, and it's not selected).

Change the background-color: to DarkBlue and the color: to White, and save the file.

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><p><br>
</p><p><br>
</p>
<h4 name="Directories"> Directories </h4>
<p>Inside Classic.jar you will find 1 directory Skin, as well as a file preview.png, and icon.png.
</p>
<h6 name="skin"> skin </h6>
<p>Skin simply contains classic.
</p>
<h6 name="classic"> classic </h6>
<p>Classic contains the following 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="help"> help </h6>
<p>Help contains all the files for theming the help dialog window.
</p>
<h6 name="communicator"> communicator </h6>
<p>Doesn't do a whole lot and can typicaly be forgotten about promptly.
</p><p><br>
</p><p><br>
</p>
<h4 name="Install_Your_New_Theme"> Install Your New Theme </h4>
<p>Before one can see the changes they make to a firefox theme (since live edits are restrictably difficult to set up) one must first learn how to repackage the classic theme to make it installable.  For the sake of this discussion we will call your theme "My_Theme" though you can replace that with any name.
</p>
<h5 name="Copying_The_Necessary_Files"> Copying The Necessary Files </h5>
<p>The first step is to move all the files into the right directory structure.  So create a new directory called My_Theme.  Into this file put the browser, global, communicator, help, and mozapps directories from above as well as the icon.png, and preview.png files.
</p>
<h5 name="Creating_the_Install_Files"> Creating the Install Files </h5>
<h6 name="Contents.rdf"> Contents.rdf </h6>
<p>Make a copy of <a href="en/Creating_a_Skin_for_Firefox/contents.rdf">contents.rdf</a> and place it in <code>\My_Theme</code> and open it up in your text editor. This file is a small XML Database which is used to describe the skin.
</p><p>In the code search for all instances of My_Theme and replace them with the name of your theme.
</p><p>The packages section lists which components of the Browser that you are modifying. If we also had skins for Chatzilla, we would have to add another line resembling the other ones and change it to point to Chatzilla. But this list includes everything that we changed, so just modify the blue text to point to match the name/version that you used in the sections before this.
</p>
<pre class="eval">&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme</span>:communicator"/&gt;
&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme</span>:editor"/&gt;
&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme</span>:global"/&gt;
&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme</span>:messenger"/&gt;
&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme</span>:navigator"/&gt;
</pre>
<p>Save the file and exit the text editor.
</p>
<h6 name="install.rdf"> install.rdf </h6>
<p>Make a copy of <a href="en/Creating_a_Skin_for_Firefox/install.rdf">install.rdf</a> and place it in <code>\My_Theme</code> and open it up in your text editor. This file is a small XML Database which is used to describe the skin.
</p>
<pre>  &lt;Description about="urn:mozilla:install-manifest"&gt;
  &lt;em:id&gt;{&lt;span style="color:#00D;font-weight:bold;"&gt;Themes_UUID}&lt;/span&gt;&lt;/em:id&gt;
  &lt;em:version&gt;&lt;span style="color:#00D;font-weight:bold;"&gt;Themes_Version&lt;/span&gt;&lt;/em:version&gt;
</pre>
<p>The first section requires that one a) finding a <a href="en/Creating_a_Skin_for_Firefox/UUID">UUID</a> for your theme and b) giving your theme a version number.  Once you've done this insert the information as above, and scroll down.
</p>
<h4 name="CSS_Files"> CSS Files </h4>
<p>The CSS files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, etc. For this next part, let's modify the standard button.
</p><p>Go into <code>\global\</code> and open <code>button.css</code> in your favourite text editor. Scroll down to <code>button {</code>. This section defines the normal button in its basic state (There is no mouse over it, it's not disabled, and it's not selected).
</p><p>Change the <code>background-color:</code> to <code>DarkBlue</code> and the <code>color:</code> to <code>White</code>, and save the file.
</p>
Revert to this revision