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: 97049
  • Created:
  • Creator: Keller
  • Is current revision? No
  • Comment /* Contents.rdf */

Revision Content

Setup

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

Extract the Theme

While you can hypothetically 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 installation directory. A .jar file is in reality a renamed zip and you can open it up in your zip program the same way you open up zip files. However, if your zip application 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: \Program Files\Mozilla Firefox\chrome\classic.jar

Mac OS X:

  • Go to your applications folder
  • Control click the application icon(Firefox icon), and choose Show Package Contents.
  • Go to contents/MacOS/Chrome/classic.jar

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 one directory, skin, as well as two files, preview.png and icon.png.

skin
Skin simply contains another directory, 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 appearance 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 typically be forgotten about promptly.

Install Your New Theme

Before one can see the changes they make to a Firefox theme (since live edits are restrictively 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 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.

<more after I get done with some tests>


Triggering the install from the web

To install your jar file directly from the web, you need to run some JavaScript.

<a href="javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, 
 'myskin.jar', 'My Skin Theme')">install My Skin</a>

If you have jar files on your hard drive and would like to install them, then download/use this form.

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 hypothetically 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 installation directory.  A .jar file is in reality a renamed zip and you can open it up in your zip program the same way you open up zip files.  However, if your zip application 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: \Program Files\Mozilla Firefox\chrome\classic.jar
</p><p>Mac OS X:
</p>
<ul>
<li>Go to your applications folder</li> 
<li>Control click the application icon(Firefox icon), and choose Show Package Contents.</li> 
<li>Go to contents/MacOS/Chrome/classic.jar 
</li>
</ul>
<p>Copy classic.jar to another easily accessible folder--"Classic" is recommended--and extract the contents of that folder, maintaining directory structure.
</p>
<h4 name="Directories"> Directories </h4>
<p>Inside classic.jar you will find one directory, skin, as well as two files, preview.png and icon.png.
</p>
<dl><dt>skin
</dt><dd>Skin simply contains another directory, classic.
</dd><dt>classic
</dt><dd>Classic contains the following directories.
</dd><dt>browser
</dt><dd>Browser contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences window.
</dd><dt>global
</dt><dd>Global contains almost all of the important css files that define the appearance of the browser.  This is the most critical directory in a theme.
</dd><dt>mozapps
</dt><dd>Mozapps contains all the styles and icons for the browser periphrials, such as the extension manager or update wizard.
</dd><dt>help
</dt><dd>Help contains all the files for theming the help dialog window.
</dd><dt>communicator
</dt><dd>Doesn't do a whole lot and can typically be forgotten about promptly.
</dd></dl>
<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 restrictively 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 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><p>&lt;more after I get done with some tests&gt;
</p><p><br>
</p>
<h4 name="Triggering_the_install_from_the_web"> Triggering the install from the web </h4>
<p>To install your jar file directly from the web, you need to run some JavaScript.
</p>
<pre class="eval">&lt;a href="javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, 
 '<span style="color:#00D;font-weight:bold;">myskin.jar</span>', '<span style="color:#00D;font-weight:bold;">My Skin Theme</span>')"&gt;install My Skin&lt;/a&gt;
</pre>
<p>If you have jar files on your hard drive and would like to install them, then download/use <a class="external" href="http://www.eightlines.com/neil/mozskin/installjar.html">this form</a>.
</p>
Revert to this revision