Creating a Skin for Firefox

  • Revision slug: Creating_a_Skin_for_Firefox
  • Revision title: Creating a Skin for Firefox
  • Revision id: 66216
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Reverted edit of Tricknkimi, changed back to last version by Sheppy

Revision Content

Introduction

In order to create a skin for Firefox, there are three things you need to know: how to edit images, how to extract zip files, and how to modify CSS. Firefox uses standard GIF, PNG, and JPEG images for the buttons and CSS to style everything else in the interface.

What is a skin?

A skin does not totally change the interface; instead, it just defines how the interface looks. You can't change what happens when the user right clicks on an image, but you can change the look of the right click menu (Make it blue with pink polka dots, for example). If you want to change the functionality of Firefox, you'll have to look into modifying the chrome, which is beyond the scope of this document.

Contents

<?xml version="1.0"?>

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

    xmlns:em="http://www.mozilla.org/2004/em-rdf#">
 <Description about="urn:mozilla:install-manifest">
 {Themes_UUID}
   Themes_Version
 

Target Application this extension can install into, with minimum and maximum supported versions.

   <Description>
     Firefox's UUID
     <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}
     Min_FF_Version
     Max_FF_Version
   </Description>
 </em:targetApplication>
 
 Front End MetaData
 My_Theme
 My_Theme
 My_Theme
 Your_Name
 Contributors_Names
 Themes_HomePage
  Url_of_Update_Location 
  Url_of_About_Page 
 
 Front End Integration Hooks (used by Theme   Manager)
   My_Theme
 </Description>      

</RDF>Image:Example.jpg

Original Document Information

  • Author: Neil Marshall and Tucker Lee
  • Other Contributors (Suggestions/Corrections): Brent Marshall, CDN (http://themes.mozdev.org), JP Martin, Boris Zbarsky, Asa Dotzler, WeSaySo, David James, Dan Mauch, Anders Conbere, Tim Regula (http://www.igraphics.nn.cx)
  • Copyright Information: Copyright 2002-2003 Neil Marshall, permission given to MDC to migrate into the wiki April 2005 via email.
  • Original Location: http://www.eightlines.com/neil/mozskin
{{ wiki.languages( { "de": "de/Theme_erstellen", "es": "es/Creando_un_tema_para_Firefox", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox", "ja": "ja/Creating_a_Skin_for_Firefox", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa" } ) }}

Revision Source

<p>
</p>
<h3 name="Introduction"> Introduction </h3>
<p>In order to create a skin for Firefox, there are three things you need to know: how to edit images, how to extract zip files, and how to modify CSS. Firefox uses standard GIF, PNG, and JPEG images for the buttons and CSS to style everything else in the interface.
</p><p><b>What is a skin?</b>
</p><p>A skin does not totally change the interface; instead, it just defines how the interface looks. You can't change what happens when the user right clicks on an image, but you can change the look of the right click menu (Make it blue with pink polka dots, for example). If you want to change the functionality of Firefox, you'll have to look into modifying the chrome, which is beyond the scope of this document.
</p>
<h3 name="Contents"> Contents </h3>
<ul><li> <a href="en/Creating_a_Skin_for_Firefox/Getting_Started">Getting Started</a>
</li></ul>
<div class="originaldocinfo">
<p>&lt;?xml version="1.0"?&gt;
</p><p>&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
</p>
<pre class="eval">    xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
</pre>
<pre class="eval"> &lt;Description about="urn:mozilla:install-manifest"&gt;
 <em>{Themes_UUID}</em>
   <em>Themes_Version</em>
 
</pre>
<p><span class="comment">Target Application this extension can install into,           with minimum and maximum supported versions.</span> 
</p><p><em>
</em></p>
<pre class="eval">   &lt;Description&gt;
     <span class="comment">Firefox's UUID</span>
     &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}
     <em>Min_FF_Version</em>
     <em>Max_FF_Version</em>
   &lt;/Description&gt;
 &lt;/em:targetApplication&gt;
 
 <span class="comment">Front End MetaData</span>
 <span class="comment">My_Theme</span>
 <em>My_Theme</em>
 <em>My_Theme</em>
 <em>Your_Name</em>
 <em>Contributors_Names</em>
 <em>Themes_HomePage</em>
 <em> Url_of_Update_Location </em>
 <em> Url_of_About_Page </em>
 
 <span class="comment">Front End Integration Hooks (used by Theme   Manager)</span>
   <em>My_Theme</em>
 &lt;/Description&gt;      
</pre>
<p>&lt;/RDF&gt;<img alt="Image:Example.jpg" src="File:en/Media_Gallery/Example.jpg">
</p>
<h3 name="Original_Document_Information"> Original Document Information </h3>
<ul><li> Author: Neil Marshall and Tucker Lee
</li><li> Other Contributors (Suggestions/Corrections): Brent Marshall, CDN (http://themes.mozdev.org), JP Martin, Boris Zbarsky, Asa Dotzler, WeSaySo, David James, Dan Mauch, Anders Conbere, Tim Regula (http://www.igraphics.nn.cx)
</li><li> Copyright Information: Copyright 2002-2003 Neil Marshall, permission given to MDC to migrate into the wiki April 2005 via email.
</li><li> Original Location: http://www.eightlines.com/neil/mozskin
</li></ul>
</div>
{{ wiki.languages( { "de": "de/Theme_erstellen", "es": "es/Creando_un_tema_para_Firefox", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox", "ja": "ja/Creating_a_Skin_for_Firefox", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa" } ) }}
Revert to this revision