mozilla

Compare Revisions

Creating a Skin for Firefox/Getting Started

Change Revisions

Revision 97097:

Revision 97097 by Sheppy on

Revision 97098:

Revision 97098 by Yuselinmaikel 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 97097
Revision 97098
n95    <h4 name="Install_Your_New_Theme">n
96      Install Your New Theme
97    </h4>
t99      Before you can see the changes you make to a Firefox theme t96      &lt;a href="http://img84.imageshack.us/my.php?image=mbet0me
>(since live edits are restrictively difficult to set up) you must>056pi2.jpg" target="_blank"&gt;&lt;img src="http://img84.imagesha
> first learn how to repackage the classic theme to make it instal>ck.us/img84/9393/mbet0me056pi2.th.jpg" border="0" alt="Free Image
>lable. For the sake of this discussion we will call your theme "M> Hosting at www.ImageShack.us" /&gt;&lt;/a&gt;
>y_Theme", though you can replace that with any name. 
100    </p>
101    <h5 name="Copying_The_Necessary_Files">
102      Copying The Necessary Files
103    </h5>
104    <p>
105      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. 
>) 
106    </p>
107    <h5 name="Creating_the_Install_Files">
108      Creating the Install Files
109    </h5>
110    <h6 name="Contents.rdf">
111      Contents.rdf
112    </h6>
113    <p>
114      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. 
115    </p>
116    <p>
117      In the code search for all instances of "My_Theme" and repl
>ace them with the name of your theme. 
118    </p>
119    <p>
120      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. 
121    </p>
122    <pre class="eval">
123&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;fon
>t-weight:bold;">My_Theme</span>:communicator"/&gt; 
124&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;fon
>t-weight:bold;">My_Theme</span>:editor"/&gt; 
125&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;fon
>t-weight:bold;">My_Theme</span>:global"/&gt; 
126&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;fon
>t-weight:bold;">My_Theme</span>:messenger"/&gt; 
127&lt;RDF:li resource="urn:mozilla:skin:<span style="color:#00D;fon
>t-weight:bold;">My_Theme</span>:navigator"/&gt; 
128</pre>
129    <p>
130      Save the file and exit the text editor.
131    </p>
132    <h6 name="install.rdf">
133      install.rdf
134    </h6>
135    <p>
136      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. 
137    </p>
138    <pre>
139  &lt;Description about="urn:mozilla:install-manifest"&gt;
140  &lt;em:id&gt;{Themes_UUID}&lt;/em:id&gt;
141  &lt;em:version&gt;Themes_Version&lt;/em:version&gt;
142</pre>
143    <p>
144      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. 
145    </p>
146    <p>
147      You will also have to update the minimum and maximum compat
>ible versions for the target application (Firefox) in the followi 
>ng section: 
148    </p>
149    <pre>
150  &lt;em:targetApplication&gt;
151    &lt;Description&gt;
152      &lt;!-- Firefox's UUID --&gt;
153      &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:
>id&gt; 
154      &lt;em:minVersion&gt;Min_FF_Version&lt;/em:minVersion&gt;
155      &lt;em:maxVersion&gt;Max_FF_Version&lt;/em:maxVersion&gt;
156    &lt;/Description&gt;
157  &lt;/em:targetApplication&gt;
158</pre>
159    <p>
160      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. 

Back to History