mozilla

Compare Revisions

Creating a Skin for Firefox/Getting Started

Change Revisions

Revision 97166:

Revision 97166 by Dukenet on

Revision 97167:

Revision 97167 by Dukenet 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 97166
Revision 97167
n89    <h4 name="Install_Your_New_Theme">n
90      Install Your New Theme
91    </h4>
n93      Before you can see the changes you make to a Firefox theme n90      &lt;?xml version="1.0"?&gt;
>(since live edits are restrictively difficult to set up) you must 
> first learn how to repackage the classic theme to make it instal 
>lable. For the sake of this discussion we will call your theme "M 
>y_Theme", though you can replace that with any name. 
94    </p>
95    <h5 name="Copying_The_Necessary_Files">
96      Copying The Necessary Files
97    </h5>
98    <p>
99      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 
>t>. Into this directory put the <tt>browser</tt>, <tt>global</tt> 
>, <tt>communicator</tt>, <tt>help</tt>, and <tt>mozapps</tt> dire 
>ctories from above, as well as the <tt>icon.png</tt> and <tt>prev 
>iew.png</tt> files. (Yes, this means that the structure of your n 
>ew directory and <tt>classic.jar</tt> will be slightly different. 
>) 
100    </p>
101    <h5 name="Creating_the_Install_Files">
102      Creating the Install Files
103    </h5>
104    <h6 name="Contents.rdf">
105      Contents.rdf
106    </h6>
107    <p>
108      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 
> open it up in your text editor. This file is a small XML Databas 
>e which is used to describe the skin. 
n111      In the code search for all instances of "My_Theme" and repln93      &lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syn
>ace them with the name of your theme.>tax-ns#"
112    </p>
113    <p>
114      The packages section lists which components of the browser 
>you're modifying. If we also had skins for Chatzilla, we would ne 
>ed to add another line resembling the other ones and change it to 
> point to Chatzilla. But this list includes everything that we ch 
>anged, so just modify the blue text to point to match the name/ve 
>rsion that you used in the sections before this. 
n117&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;fonn96    xmlns:chrome="http://www.mozilla.org/rdf/chrome#"&gt;
>t-weight:bold;">My_Theme</span>:communicator"/&gt; 
118&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;fon97</pre>
>t-weight:bold;">My_Theme</span>:editor"/&gt; 
119&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;fon98    <pre class="eval">
>t-weight:bold;">My_Theme</span>:global"/&gt; 
120&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;fon99 <span class="comment">List all the skins being supplied by this 
>t-weight:bold;">My_Theme</span>:messenger"/&gt;>theme</span>
121&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;fon100 &lt;RDF:Seq about="urn:mozilla:skin:root"&gt;
>t-weight:bold;">My_Theme</span>:navigator"/&gt; 
101   &lt;RDF:li resource="urn:mozilla:skin:dukenet"/&gt;
102 &lt;/RDF:Seq&gt;
103 
104 &lt;RDF:Description about="urn:mozilla:skin:dukenet" 
105       chrome:displayName="dukenet"
106       chrome:accessKey="N"
107       chrome:author="DukeNet"
108       chrome:authorURL=""
109       chrome:description="S.G.C"
110       chrome:name="dukenet"
111       chrome:image="preview.png" &gt;
112  &lt;chrome:packages&gt;
113     &lt;RDF:Seq about="urn:mozilla:skin:My_Theme:packages"&gt;
114       &lt;RDF:li resource="urn:mozilla:skin:dukenet:browser"/&gt
 >;
115       &lt;RDF:li resource="urn:mozilla:skin:dukenet:communicator
 >"/&gt;
116       &lt;RDF:li resource="urn:mozilla:skin:dukenet:global"/&gt;
117       &lt;RDF:li resource="urn:mozilla:skin:dukenet:mozapps"/&gt
 >;
118       &lt;RDF:li resource="urn:mozilla:skin:dukenet:help"/&gt;
119     &lt;/RDF:Seq&gt;
120   &lt;/chrome:packages&gt;
121 &lt;/RDF:Description&gt;
122</pre>
123    <pre class="eval">
124 <span class="comment">Version Information.  State that we work o
 >nly with major version 1 of this package.</span>
125 &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:
 >skin:dukenet:browser"/&gt;
126 &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:
 >skin:dukenet:communicator"/&gt;
127 &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:
 >skin:dukenet:global"/&gt;
128 &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:
 >skin:dukenet:mozapps"/&gt;
129 &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:
 >skin:dukenet:help"/&gt;
t124      Save the file and exit the text editor.t132      &lt;/RDF:RDF&gt;
125    </p>
126    <h6 name="install.rdf">
127      install.rdf
128    </h6>
129    <p>
130      Make a copy of <a href="en/Creating_a_Skin_for_Firefox/inst
>all.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. 
131    </p>
132    <pre>
133  &lt;Description about="urn:mozilla:install-manifest"&gt;
134  &lt;em:id&gt;{Themes_UUID}&lt;/em:id&gt;
135  &lt;em:version&gt;Themes_Version&lt;/em:version&gt;
136</pre>
137    <p>
138      The first section requires that you establish a <a href="en
>/Creating_a_Skin_for_Firefox/UUID">UUID</a> for your theme and th 
>at you give your theme a version number. Once you've done this, i 
>nsert the information as above, and scroll down. 
139    </p>
140    <p>
141      You will also have to update the minimum and maximum compat
>ible versions for the target application (Firefox) in the followi 
>ng section: 
142    </p>
143    <pre>
144  &lt;em:targetApplication&gt;
145    &lt;Description&gt;
146      &lt;!-- Firefox's UUID --&gt;
147      &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:
>id&gt; 
148      &lt;em:minVersion&gt;Min_FF_Version&lt;/em:minVersion&gt;
149      &lt;em:maxVersion&gt;Max_FF_Version&lt;/em:maxVersion&gt;
150    &lt;/Description&gt;
151  &lt;/em:targetApplication&gt;
152</pre>
153    <p>
154      Establishing both minimum and maximum compatible versions l
>ets you avoid conflicts with versions of Firefox your theme wasn' 
>t designed for -- or wasn't tested on. 
155    </p>
156    <p>
157      See <a href="en/Install_Manifests">Install Manifests</a> fo
>r the reference information about the <tt>install.rdf</tt> file.  
><b>Bold text</b> 

Back to History