mozilla

Revision 97172 of 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: 97172
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Reverted edits by [[Special:Contributions/Hrvaa|Hrvaa]] ([[User_talk:Hrvaa|Talk]]); changed back to last version by [[User:Leeegg|Leeegg]]
Tags: 

Revision Content

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

Image: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 peripherals, 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.

<?xml version="1.0"?>

<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

    xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
 List all the skins being supplied by this theme
 <RDF:Seq about="urn:mozilla:skin:root">
   <RDF:li resource="urn:mozilla:skin:dukenet"/>
 </RDF:Seq>
 
 <RDF:Description about="urn:mozilla:skin:dukenet" 
       chrome:displayName="dukenet"
       chrome:accessKey="N"
       chrome:author="DukeNet"
       chrome:authorURL=""
       chrome:description="S.G.C"
       chrome:name="dukenet"
       chrome:image="preview.png" >
  <chrome:packages>
     <RDF:Seq about="urn:mozilla:skin:My_Theme:packages">
       <RDF:li resource="urn:mozilla:skin:dukenet:browser"/>
       <RDF:li resource="urn:mozilla:skin:dukenet:communicator"/>
       <RDF:li resource="urn:mozilla:skin:dukenet:global"/>
       <RDF:li resource="urn:mozilla:skin:dukenet:mozapps"/>
       <RDF:li resource="urn:mozilla:skin:dukenet:help"/>
     </RDF:Seq>
   </chrome:packages>
 </RDF:Description>
 Version Information.  State that we work only with major version 1 of this package.
 <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:dukenet:browser"/>
 <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:dukenet:communicator"/>
 <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:dukenet:global"/>
 <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:dukenet:mozapps"/>
 <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:dukenet:help"/>

</RDF:RDF>

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, let's 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. Once you have put the files in the zip folder, rename it to My_Theme.jar

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><p><img alt="Image:Example.jpg" src="File:en/Media_Gallery/Example.jpg">
</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 peripherals, 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>&lt;?xml version="1.0"?&gt;
</p><p>&lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
</p>
<pre class="eval">    xmlns:chrome="http://www.mozilla.org/rdf/chrome#"&gt;
</pre>
<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:dukenet"/&gt;
 &lt;/RDF:Seq&gt;
 
 &lt;RDF:Description about="urn:mozilla:skin:dukenet" 
       chrome:displayName="dukenet"
       chrome:accessKey="N"
       chrome:author="DukeNet"
       chrome:authorURL=""
       chrome:description="S.G.C"
       chrome:name="dukenet"
       chrome:image="preview.png" &gt;
  &lt;chrome:packages&gt;
     &lt;RDF:Seq about="urn:mozilla:skin:My_Theme:packages"&gt;
       &lt;RDF:li resource="urn:mozilla:skin:dukenet:browser"/&gt;
       &lt;RDF:li resource="urn:mozilla:skin:dukenet:communicator"/&gt;
       &lt;RDF:li resource="urn:mozilla:skin:dukenet:global"/&gt;
       &lt;RDF:li resource="urn:mozilla:skin:dukenet:mozapps"/&gt;
       &lt;RDF:li resource="urn:mozilla:skin:dukenet:help"/&gt;
     &lt;/RDF:Seq&gt;
   &lt;/chrome:packages&gt;
 &lt;/RDF:Description&gt;
</pre>
<pre class="eval"> <span class="comment">Version Information.  State that we work only with major version 1 of this package.</span>
 &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:dukenet:browser"/&gt;
 &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:dukenet:communicator"/&gt;
 &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:dukenet:global"/&gt;
 &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:dukenet:mozapps"/&gt;
 &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:dukenet:help"/&gt;
</pre>
<p>&lt;/RDF:RDF&gt;
</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, let's 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.
Once you have put the files in the zip folder, rename it to My_Theme.jar
</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://developer.mozilla.org/samples/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