Compare Revisions

Creating a Skin for Firefox/Getting Started

Revision 97108:

Revision 97108 by Sebastianzartner@gmx.de on

Revision 97109:

Revision 97109 by Beckasj1 on

Title:
Creating a Skin for Firefox/Getting Started
Creating a Skin for Firefox/Getting Started
Slug:
Creating_a_Skin_for_Firefox//Getting_Started
Creating_a_Skin_for_Firefox//Getting_Started
Tags:
Add-ons, Themes
Add-ons, Themes
Content:

Revision 97108
Revision 97109
n17      While you can hypothetically begin with any theme already dn17      While you can hypothetically begin with any theme already d
>esigned for Firefox, for the sake of consistency we'll speak as t>esigned for Firefox, for the sake of consistency we'll speak as t
>hough everyone is editing Winstripe (default Firefox theme). This>hough everyone is editing Winstripe (default Firefox theme). This
> is located in the file <tt>classic.jar</tt> found in the Firefox> is located in the file <font>classic.jar</font> found in the Fir
> installation directory. A .jar file is in reality a renamed zip >efox installation directory. A .jar file is in reality a renamed 
>archive. Opening the .jar files in your archive manager of choice>zip archive. Opening the .jar files in your archive manager of ch
> should result in the file being automatically detected as being >oice should result in the file being automatically detected as be
>a zip archive. However, if your application doesn't detect <tt>cl>ing a zip archive. However, if your application doesn't detect <f
>assic.jar</tt> as a standard zip archive, rename the file <tt>cla>ont>classic.jar</font> as a standard zip archive, rename the file
>ssic.zip</tt> and continue extraction.> <font>classic.zip</font> and continue extraction.
n40      Copy <tt>classic.jar</tt> to another easily accessible foldn40      Copy <font>classic.jar</font> to another easily accessible 
>er -- <tt>Classic</tt> is recommended -- extract the contents of >folder -- <font>Classic</font> is recommended -- extract the cont
>that folder, being sure to maintain the directory structure.>ents of that folder, being sure to maintain the directory structu
 >re.
n46      Inside <tt>classic.jar</tt> is one directory, <tt>skin</tt>n46      Inside <font>classic.jar</font> is one directory, <font>ski
>, as well as two files, <tt>preview.png</tt> and <tt>icon.png</tt>n</font>, as well as two files, <font>preview.png</font> and <fon
>>.>t>icon.png</font>.
n50        <tt>skin</tt>n50        <font>skin</font>
51      </dt>
52      <dd>
53        <tt>skin</tt> simply contains another directory, <tt>clas
>sic</tt> which holds all the good stuff. 
54      </dd>
55      <dt>51      </dt>
56        <tt>classic</tt>
57      </dt>
58      <dd>
59        <tt>classic</tt> contains the following directories.
60      </dd>52      <dd>
61      <dt>53        <font>skin</font> simply contains another directory, <fon
 >t>classic</font> which holds all the good stuff.
62        <tt>browser</tt>
63      </dt>
64      <dd>54      </dd>
55      <dt>
56        <font>classic</font>
57      </dt>
58      <dd>
59        <font>classic</font> contains the following directories.
60      </dd>
61      <dt>
62        <font>browser</font>
63      </dt>
64      <dd>
65        <tt>browser</tt> contains all the toolbar icons, as well 65        <font>browser</font> contains all the toolbar icons, as w
>as the icons for the bookmark manager and the preferences window.>ell as the icons for the bookmark manager and the preferences win
 >dow.
66      </dd>
67      <dt>
68        <tt>global</tt>
69      </dt>
70      <dd>66      </dd>
67      <dt>
68        <font>global</font>
69      </dt>
70      <dd>
71        <tt>global</tt> contains almost all of the important CSS 71        <font>global</font> contains almost all of the important 
>files that define the appearance of the browser. This is the most>CSS files that define the appearance of the browser. This is the 
> critical directory in a theme.>most critical directory in a theme.
n77        <tt>mozapps</tt> contains all the styles and icons for thn77        <font>mozapps</font> contains all the styles and icons fo
>e browser periphrials, such as the extension manager or update wi>r the browser periphrials, such as the extension manager or updat
>zard.>e wizard.
78      </dd>
79      <dt>
80        <tt>help</tt>
81      </dt>
82      <dd>78      </dd>
83        <tt>help</tt> contains all the files for theming the help
> dialog window. 
84      </dd>79      <dt>
80        <font>help</font>
85      <dt>81      </dt>
82      <dd>
83        <font>help</font> contains all the files for theming the 
 >help dialog window.
84      </dd>
85      <dt>
86        <tt>communicator</tt>86        <font>communicator</font>
n102      The first step is to move all the files into the right diren102      The first step is to move all the files into the right dire
>ctory structure. So create a new directory called <tt>My_Theme</t>ctory structure. So create a new directory called <font>My_Theme<
>t>. Into this directory put the <tt>browser</tt>, <tt>global</tt>>/font>. Into this directory put the <font>browser</font>, <font>g
>, <tt>communicator</tt>, <tt>help</tt>, and <tt>mozapps</tt> dire>lobal</font>, <font>communicator</font>, <font>help</font>, and <
>ctories from above, as well as the <tt>icon.png</tt> and <tt>prev>tt>mozapps&lt;/font-family: monospace&gt; directories from above,
>iew.png</tt> files. (Yes, this means that the structure of your n> as well as the &lt;tt&gt;icon.png&lt;/font-family: monospace&gt;
>ew directory and <tt>classic.jar</tt> will be slightly different.> and <font>preview.png</font> files. (Yes, this means that the st
>)>ructure of your new directory and <font>classic.jar</font> will b
 >e slightly different.)</tt>
n111      Make a copy of <a href="en/Creating_a_Skin_for_Firefox/contn111      Make a copy of <a href="en/Creating_a_Skin_for_Firefox/cont
>ents.rdf">contents.rdf</a> and place it in <tt>\My_Theme</tt> and>ents.rdf">contents.rdf</a> and place it in <font>\My_Theme</font>
> open it up in your text editor. This file is a small XML Databas> and open it up in your text editor. This file is a small XML Dat
>e which is used to describe the skin.>abase which is used to describe the skin.
n169      Go into the global <tt>global</tt> directory and open <tt>bn169      Go into the global <font>global</font> directory and open <
>utton.css</tt> in your favorite text editor. Scroll down to <code>font>button.css</font> in your favorite text editor. Scroll down 
>>button {</code>. This section defines the normal button in its b>to <code>button {</code>. This section defines the normal button 
>asic state (There is no mouse over it, it's not disabled, and it'>in its basic state (There is no mouse over it, it's not disabled,
>s not selected).> and it's not selected).
170    </p>
171    <p>170    </p>
171    <p>
172      Change the <code>background-color:</code> to <code>DarkBlue172      Change the <code>background-color:</code> to <code>Dark red
></code> and the <code>color:</code> to <code>White</code>, and sa></code> and the <code>color:</code> to <code>White</code>, and sa
>ve the file.>ve the file.
n196      Make sure not to just zip up the <tt>My_Theme</tt> parent dn196      Make sure not to just zip up the &lt;tt&gt;My_Theme parent 
>irectory since that will cause the drag and drop install in the n>directory since that will cause the drag and drop install in the 
>ext section to fail without error messages.>next section to fail without error messages.
t215      Now to change your folder(s) back into a .jar Well it's east215      Now to change your folder(s) back into a .jar Well it's eas
>y! What you do is put your folder(s) into a .zip file and then wh>y! What you do is put your folder(s) into a .zip file and then wh
>en it's compressed make the .zip into a .jar>en it's compressed make the .zip into a .jar <b>Bold text'</b><i>
 >Bold text</i><b>Italic text'</b>Italic text

Back to History