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: 97026
  • Created:
  • Creator: Aconbere
  • Is current revision? No
  • Comment

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.

List all the skins being supplied by this theme
<RDF:Seq about="urn:mozilla:skin:root">
 <RDF:li resource="urn:mozilla:skin:My_Theme/1.0" />

In the code search for the part listed above. Change the blue part to whatever you want your theme called and then its version number. Then scroll down to the next section.

 <RDF:Description about="urn:mozilla:skin:My_Theme/1.0"
     chrome:displayName="My_Theme"
     chrome:accessKey="M"
     chrome:author="Me"
     chrome:description="This is my custom skin for mozilla"
     chrome:name="My_Theme/1.0"
     chrome:image="preview.png">

The blue areas are explained below.

  • The first line should match the line that you modified in the previous section.
  • The Display Name. That is what the user sees in the Preference Panels list of themes.
  • The access key is what key you can press to activate the skin in the preferences.
  • Replace the author section with your name.
  • The description shows up below the preview image.
  • Place your theme name and version number on this line
  • Point to your preview.png/preview.jpg/preview.gif here

The packages section lists which components of the Browser suit 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/1.0:communicator"/>
<RDF:li resource="urn:mozilla:skin:My_Theme/1.0:editor"/>
<RDF:li resource="urn:mozilla:skin:My_Theme/1.0:global"/>
<RDF:li resource="urn:mozilla:skin:My_Theme/1.0:messenger"/>
<RDF:li resource="urn:mozilla:skin:My_Theme/1.0:navigator"/>

Finally, in the last section of the contents.rdf file we need to tell Firefox what version this skin is compliant with. This version is set to 1.0, so this skin will only work in versions of Firefox 1.0. You'll have to increase this version number to match the version of Mozilla that you want it to work on. If you have the wrong number here, after you install the skin and select it in the list, it will give you a message saying that it's out of date. If that happens, just come back to this step and change the number to whatever version of Firefox you are using.

<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:My_Theme/1.0:communicator"/>
<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:My_Theme/1.0:editor"/>
<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:My_Theme/1.0:global"/>
<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:My_Theme/1.0:messenger"/>
<RDF:Description chrome:skinVersion="1.0" about="urn:mozilla:skin:My_Theme/1.0:navigator"/>

Save the file and exit the text editor.

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>
<pre class="eval"><span class="comment">List all the skins being supplied by this theme</span>
&lt;RDF:Seq about="urn:mozilla:skin:root"&gt;
 &lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme/1.0</span>" /&gt;
</pre>
<p>In the code search for the part listed above. Change the blue part to whatever you want your theme called and then its version number. Then scroll down to the next section.
</p>
<pre class="eval"> &lt;RDF:Description about="urn:mozilla:skin<span style="color:#00D;font-weight:bold;">:My_Theme/1.0</span>"
     chrome:displayName="<span style="color:#00D;font-weight:bold;">My_Theme</span>"
     chrome:accessKey="<span style="color:#00D;font-weight:bold;">M</span>"
     chrome:author="<span style="color:#00D;font-weight:bold;">Me</span>"
     chrome:description="<span style="color:#00D;font-weight:bold;">This is my custom skin for mozilla</span>"
     chrome:name="<span style="color:#00D;font-weight:bold;">My_Theme/1.0</span>"
     chrome:image="<span style="color:#00D;font-weight:bold;">preview.png</span>"&gt;
</pre>
<p>The blue areas are explained below.
</p>
<ul><li> The first line should match the line that you modified in the previous section.
</li><li> The Display Name. That is what the user sees in the Preference Panels list of themes.
</li><li> The access key is what key you can press to activate the skin in the preferences.
</li><li> Replace the author section with your name.
</li><li> The description shows up below the preview image.
</li><li> Place your theme name and version number on this line
</li><li> Point to your preview.png/preview.jpg/preview.gif here
</li></ul>
<p>The packages section lists which components of the Browser suit 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/1.0</span>:communicator"/&gt;
&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme/1.0</span>:editor"/&gt;
&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme/1.0</span>:global"/&gt;
&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme/1.0</span>:messenger"/&gt;
&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme/1.0</span>:navigator"/&gt;
</pre>
<p>Finally, in the last section of the <code>contents.rdf</code> file we need to tell Firefox what version this skin is compliant with. This version is set to 1.0, so this skin will only work in versions of Firefox 1.0. You'll have to increase this version number to match the version of Mozilla that you want it to work on. If you have the wrong number here, after you install the skin and select it in the list, it will give you a message saying that it's out of date. If that happens, just come back to this step and change the number to whatever version of Firefox you are using.
</p>
<pre class="eval">&lt;RDF:Description chrome:skinVersion="<span style="color:#00D;font-weight:bold;">1.0</span>" about="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme/1.0</span>:communicator"/&gt;
&lt;RDF:Description chrome:skinVersion="<span style="color:#00D;font-weight:bold;">1.0</span>" about="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme/1.0</span>:editor"/&gt;
&lt;RDF:Description chrome:skinVersion="<span style="color:#00D;font-weight:bold;">1.0</span>" about="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme/1.0</span>:global"/&gt;
&lt;RDF:Description chrome:skinVersion="<span style="color:#00D;font-weight:bold;">1.0</span>" about="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme/1.0</span>:messenger"/&gt;
&lt;RDF:Description chrome:skinVersion="<span style="color:#00D;font-weight:bold;">1.0</span>" about="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme/1.0</span>:navigator"/&gt;
</pre>
<p>Save the file and exit the text editor.
</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