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: 97127
  • Created:
  • Creator: Swilk90
  • Is current revision? No
  • Comment /* Directories */

Revision Content

Download the latest version of Firefox and install it. Be sure to install the DOM Inspector extension as well.

Extract 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 (default Firefox theme). This is located in the file <tt>classic.jar</tt> found in the Firefox installation directory. A .jar file is in reality a renamed zip archive. Opening the .jar files in your archive manager of choice should result in the file being automatically detected as being a zip archive. However, if your application doesn't detect <tt>classic.jar</tt> as a standard zip archive, rename the file <tt>classic.zip</tt> and continue extraction.

Classic.jar locations

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

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

For Mac OS X:

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

Copy <tt>classic.jar</tt> to another easily accessible folder -- <tt>Classic</tt> is recommended -- extract the contents of that folder, being sure to maintain the directory structure. 'Bold text'[[Link title[[Link titleImage:Example.jpg]]]]

Directories

Inside <tt>classic.jar</tt> is one directory, <tt>skin</tt>, as well as two files, <tt>preview.png</tt> and <tt>icon.png</tt>.

<tt>skin</tt>
<tt>skin</tt> simply contains another directory, <tt>classic</tt> which holds all the good stuff.
<tt>classic</tt>
<tt>classic</tt> contains the following directories.
<tt>browser</tt>
<tt>browser</tt> contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences window.
<tt>global</tt>
<tt>global</tt> contains almost all of the important CSS files that define the appearance of the browser. This is the most critical directory in a theme.
<tt>mozapps</tt>
<tt>mozapps</tt> contains all the styles and icons for the browser periphrials, such as the extension manager or update wizard.
<tt>help</tt>
<tt>help</tt> contains all the files for theming the help dialog window.
<tt>communicator</tt>
Doesn't do a whole lot and can typically be forgotten about promptly.

[[Link title]] [link title[[link title][[Link title[[Link title[[Link title[[Link title[[Link title[[Link title[[Link title[[Link title]]]]]]]]]]]]]]]]]]

Install Your New Theme

Before you can see the changes you make to a Firefox theme (since live edits are restrictively difficult to set up) you 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 <tt>My_Theme</tt>. Into this directory put the <tt>browser</tt>, <tt>global</tt>, <tt>communicator</tt>, <tt>help</tt>, and <tt>mozapps</tt> directories from above, as well as the <tt>icon.png</tt> and <tt>preview.png</tt> files. (Yes, this means that the structure of your new directory and <tt>classic.jar</tt> will be slightly different.)

Creating the Install Files
Contents.rdf

Make a copy of contents.rdf and place it in <tt>\My_Theme</tt> 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're modifying. If we also had skins for Chatzilla, we would need 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 the My_Theme directory, then open it up in your text editor. This file is a small XML database that describes the skin.

  <Description about="urn:mozilla:install-manifest">
  <em:id>{Themes_UUID}</em:id>
  <em:version>Themes_Version</em:version>

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

You will also have to update the minimum and maximum compatible versions for the target application (Firefox) in the following section:

  <em:targetApplication>
    <Description>
      <!-- Firefox's UUID -->
      <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
      <em:minVersion>Min_FF_Version</em:minVersion>
      <em:maxVersion>Max_FF_Version</em:maxVersion>
    </Description>
  </em:targetApplication>

Establishing both minimum and maximum compatible versions lets you avoid conflicts with versions of Firefox your theme wasn't designed for -- or wasn't tested on.

See Install Manifests for the reference information about the <tt>install.rdf</tt> file.

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, and so on.

As an example, lets change the standard button.

Go into the global <tt>global</tt> directory and open <tt>button.css</tt> in your favorite 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

Repackaging JAR

Now all you need to do is repackage a JAR file with the following directory structure, using your favorite archive manager to create a zip archive:

/browser/*
/communicator/*
/global/*
/help/*
/mozapps/*
/contents.rdf
/install.rdf
/icon.png
/preview.png
  

Make sure not to just zip up the <tt>My_Theme</tt> parent directory since that will cause the drag and drop install in the next section to fail without error messages.

Triggering the install from the web

To install the theme's 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.

You can also just open the themes window in Mozilla and drag and drop your .jar file onto it.

Now to change your folder(s) back into a .jar Well it's easy! What you do is put your folder(s) into a .zip file and then when it's compressed make the .zip into a .jar

{{ wiki.languages( { "de": "de/Theme_erstellen/Einf\u00fchrung", "es": "es/Creando_un_skin_para_Firefox/Como_empezar", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox//Premiers_pas", "ja": "ja/Creating_a_Skin_for_Firefox/Getting_Started", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa/Zaczynamy", "pt": "pt/Criando_um_visual_para_o_Firefox/Iniciando" } ) }}

Revision Source

<p>Download the latest version of Firefox and install it.  Be sure to install the DOM Inspector extension as well.
</p>
<h4 name="Extract_Theme"> Extract 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 (default Firefox theme). This is located in the file <tt>classic.jar</tt> found in the Firefox installation directory. A .jar file is in reality a renamed zip archive. Opening the .jar files in your archive manager of choice should result in the file being automatically detected as being a zip archive. However, if your application doesn't detect <tt>classic.jar</tt> as a standard zip archive, rename the file <tt>classic.zip</tt> and continue extraction.
</p>
<h5 name="Classic.jar_locations"> Classic.jar locations </h5>
<p><b>Linux:</b> /usr/lib/MozillaFirefox/chrome/classic.jar
</p><p><b>Windows:</b> \Program Files\Mozilla Firefox\chrome\classic.jar
</p><p><b>For Mac OS X:</b>
</p>
<ul>
<li>Go to your applications folder</li> 
<li>Control click application icon(Firefox icon), choose Show Package Contents.</li> 
<li>Go to contents/MacOS/Chrome/classic.jar</li>
</ul>
<p>Copy <tt>classic.jar</tt> to another easily accessible folder -- <tt>Classic</tt> is recommended -- extract the contents of that folder, being sure to maintain the directory structure.
'<b><i>Bold text'</i>[[<a href="en/Link_title">Link title</a>[[<a href="en/Link_title">Link title</a><img alt="Image:Example.jpg" src="File:en/Media_Gallery/Example.jpg">]]]]</b>
</p>
<h4 name="Directories"> Directories </h4>
<p>Inside <tt>classic.jar</tt> is one directory, <tt>skin</tt>, as well as two files, <tt>preview.png</tt> and <tt>icon.png</tt>.
</p>
<dl><dt><tt>skin</tt>
</dt><dd><tt>skin</tt> simply contains another directory, <tt>classic</tt> which holds all the good stuff.
</dd><dt><tt>classic</tt>
</dt><dd><tt>classic</tt> contains the following directories.
</dd><dt><tt>browser</tt>
</dt><dd><tt>browser</tt> contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences window.
</dd><dt><tt>global</tt>
</dt><dd><tt>global</tt> 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><tt>mozapps</tt>
</dt><dd><tt>mozapps</tt> contains all the styles and icons for the browser periphrials, such as the extension manager or update wizard.
</dd><dt><tt>help</tt>
</dt><dd><tt>help</tt> contains all the files for theming the help dialog window.
</dd><dt><tt>communicator</tt>
</dt><dd>Doesn't do a whole lot and can typically be forgotten about promptly.
</dd></dl>
<p>[[<a href="en/Link_title">Link title</a>]]
[<a class="external" href="http://www.example.com">link title</a>[[<a class="external" href="http://www.example.com">link title</a>][[<a href="en/Link_title">Link title</a>[[<a href="en/Link_title">Link title</a>[[<a href="en/Link_title">Link title</a>[[<a href="en/Link_title">Link title</a>[[<a href="en/Link_title">Link title</a>[[<a href="en/Link_title">Link title</a>[[<a href="en/Link_title">Link title</a>[[<a href="en/Link_title">Link title</a>]]]]]]]]]]]]]]]]]]
</p>
<h4 name="Install_Your_New_Theme"> Install Your New Theme </h4>
<p>Before you can see the changes you make to a Firefox theme (since live edits are restrictively difficult to set up) you 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 <tt>My_Theme</tt>.  Into this directory put the <tt>browser</tt>, <tt>global</tt>, <tt>communicator</tt>, <tt>help</tt>, and <tt>mozapps</tt> directories from above, as well as the <tt>icon.png</tt> and <tt>preview.png</tt> files. (Yes, this means that the structure of your new directory and <tt>classic.jar</tt> will be slightly different.)
</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 <tt>\My_Theme</tt> 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're modifying. If we also had skins for Chatzilla, we would need 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 the <code>My_Theme</code> directory, then open it up in your text editor. This file is a small XML database that describes the skin.
</p>
<pre>  &lt;Description about="urn:mozilla:install-manifest"&gt;
  &lt;em:id&gt;{Themes_UUID}&lt;/em:id&gt;
  &lt;em:version&gt;Themes_Version&lt;/em:version&gt;
</pre>
<p>The first section requires that you establish a <a href="en/Creating_a_Skin_for_Firefox/UUID">UUID</a> for your theme and that you give your theme a version number.  Once you've done this, insert the information as above, and scroll down.
</p><p>You will also have to update the minimum and maximum compatible versions for the target application (Firefox) in the following section:
</p>
<pre>  &lt;em:targetApplication&gt;
    &lt;Description&gt;
      &lt;!-- Firefox's UUID --&gt;
      &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
      &lt;em:minVersion&gt;Min_FF_Version&lt;/em:minVersion&gt;
      &lt;em:maxVersion&gt;Max_FF_Version&lt;/em:maxVersion&gt;
    &lt;/Description&gt;
  &lt;/em:targetApplication&gt;
</pre>
<p>Establishing both minimum and maximum compatible versions lets you avoid conflicts with versions of Firefox your theme wasn't designed for -- or wasn't tested on.
</p><p>See <a href="en/Install_Manifests">Install Manifests</a> for the reference information about the <tt>install.rdf</tt> file.
</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, and so on.
</p><p>As an example, lets change the standard button.
</p><p>Go into the global <tt>global</tt> directory and open <tt>button.css</tt> in your favorite 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><i>more after I get done with some tests</i>
</p>
<h4 name="Repackaging_JAR"> Repackaging JAR </h4>
<p>Now all you need to do is repackage a JAR file with the following directory structure, using your favorite archive manager to create a zip archive:
</p>
  <pre>/browser/*
/communicator/*
/global/*
/help/*
/mozapps/*
/contents.rdf
/install.rdf
/icon.png
/preview.png
  </pre>
<p>Make sure not to just zip up the <tt>My_Theme</tt> parent directory since that will cause the drag and drop install in the next section to fail without error messages.
</p>
<h4 name="Triggering_the_install_from_the_web"> Triggering the install from the web </h4>
<p>To install the theme's 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><p>You can also just open the themes window in Mozilla and drag and drop your .jar file onto it.
</p><p>Now to change your folder(s) back into a .jar
Well it's easy! What you do is put your folder(s) into a .zip file and then when it's compressed make the .zip into a .jar
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "de": "de/Theme_erstellen/Einf\u00fchrung", "es": "es/Creando_un_skin_para_Firefox/Como_empezar", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox//Premiers_pas", "ja": "ja/Creating_a_Skin_for_Firefox/Getting_Started", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa/Zaczynamy", "pt": "pt/Criando_um_visual_para_o_Firefox/Iniciando" } ) }}
Revert to this revision