MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 130983 of Theme Packaging

  • Revision slug: Theme_Packaging
  • Revision title: Theme Packaging
  • Revision id: 130983
  • Created:
  • Creator: Inu274
  • Is current revision? No
  • Comment /* install.rdf */

Revision Content

This document describes how to package themes for Firefox and Thunderbird.

Pre-requisites

Making a theme for Firefox or Thunderbird requires knowledge of Cascading Stylesheets (CSS), probably XBL, and some graphic design and aesthetic skill (...or maybe not). This document describes only how Themes are packaged in order to be shown in Firefox's Themes window.

Theme File Layout

Firefox/Thunderbird themes are packaged in a JAR file with the following structure:

theme.jar:
  install.rdf
  contents.rdf
  preview.png
  icon.png
  browser/files
  global/files
  mozapps/files
  communicator/files
  ...
     
  • You must have a top-level chrome.manifest (Firefox/Thunderbird 1.5) or contents.rdf file which registers the chrome for the theme (as before) and also an install.rdf manifest that specifies metadata that is displayed in the Themes window.
  • preview.png is a preview image which will show in the scrolling preview area in the Themes window. It can be any size.
  • icon.png is a 32x32 PNG (may contain alpha transparency) which will show up in the Themes list in the Themes window.

install.rdf

Your install.rdf manifest will look something like this:

<?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">
    <em:type>4</em:type>
    more properties
  </Description>      
</RDF>

Required install.rdf Properties

Your install.rdf file must have the following properties. See the install.rdf Reference for more information:

  • em:id
  • em:version
  • em:type
  • em:targetApplication
  • em:name
  • em:internalName

Optional install.rdf Properties

  • em:description
  • em:creator
  • em:contributor
  • em:homepageURL
  • em:updateURL

Note that if your theme will be made available on the http://addons.mozilla.org website, it should not include an updateURL.

Sample install.rdf File

<?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">
    <em:id>{18b64b56-d42f-428d-a88c-baa413bc413f}</em:id>
    <em:version>1.0</em:version>
    <em:type>4</em:type>

    <!-- Target Application this extension can install into, 
         with minimum and maximum supported versions. -->
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>0.8</em:minVersion>
        <em:maxVersion>0.9</em:maxVersion>
      </Description>
    </em:targetApplication>
    
    <!-- Front End MetaData -->
    <em:name>New Theme 1</em:name>
    <em:description>A test theme for Firefox</em:description>
    <em:creator>Ben Goodger</em:creator>
    <em:contributor>John Doe</em:contributor>
    <em:homepageURL>http://www.bengoodger.com/</em:homepageURL>

    <!-- Front End Integration Hooks (used by Theme Manager)-->
    <em:internalName>newtheme1</em:internalName>
  </Description>
</RDF>

The following are some common target application GUIDs that you can use in your targetApplication properties:

Firefox      {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
Thunderbird  {3550f703-e582-4d05-9a08-453d09bdfdc6}
Sunbird      {718e30fb-e89b-41dd-9da7-e25a45638b28}

<style type="text/css"> .skem9 {Profile-generated-at:url(http://www.skem9.com); Come back again!} .skem9 {Background Settings} body { background-color:Black; background-image:url("http://i111.photobucket.com/albums/n143/Dark-Pain/DarkEvil.jpg"); background-repeat:no-repeat; background-position:center; background-attachment:fixed;} .skem9{We gotta hide the other tables backgrounds so it looks nice} table, tr, td, input, div { background-color:transparent; border:0px;} a img {border:0px;} .skem9 {Default Text Settings} table, tr, td, p, li, div, span, .text { color: Silver !important; text-decoration: none; font-weight:normal !important;} .skem9 {your name above your profile pic} span.nametext {display:none !important;} .skem9 {XXs interest XXs details} span.whitetext12 {display:none !important;} .skem9 {music, general, movies, ect ect} span.lightbluetext8 {display:none !important;} .skem9 {about me, who id like to meet} span.orangetext15 {display:none !important;} .skem9 {latest blog entries, and XX has XX friends} span.btext {display:none !important;} .skem9 {The red text, aka the numbers on friends, and comments} span.redbtext, span.redtext {display:none !important;} .skem9 {Time and date in comments} span.blacktext10 {display:none !important;} .skem9 {extended network text} span.blacktext12 span {display:none !important;} .skem9{Using smart scrollbar technique from bbzspace.com} body { scrollbar-face-color:; scrollbar-highlight-color:; scrollbar-3dlight-color:Silver; scrollbar-shadow-color:; scrollbar-darkshadow-color:Silver; scrollbar-arrow-color:Silver; scrollbar-track-color:Black;} .John {position:absolute; top:20px; right:0px; z-index:9;} .skem9 {I know some people are going to remove the image in this layout back to my site, but if you would at least still put a link to http://www.skem9.com on your page I would appreciate it!} .Layout (made by: DarkPain; url: http://www.skem9.com/~54538) .sk {position:absolute; top:0px; right:0px; z-index:9;}</style><a href="http://www.skem9.com/layouts/index.php?action=users&user=54538" class="sk"><img alt="Skem9.com!" title="Get your own free Myspace Layout!" src="http://c.myspace.com/Groups/00011/26/79/11539762_l.gif" /></a>Layout made by <a href="http://www.skem9.com/~54538">DarkPain</a>

Official References for Toolkit API

{{wiki.template(':en/Toolkit_API/Official_References')}}

{{ wiki.languages( { "fr": "fr/Empaqueter_un_th\u00e8me", "ja": "ja/Theme_Packaging" } ) }}

Revision Source

<p>
</p><p>This document describes how to package <a href="en/Themes">themes</a> for Firefox and Thunderbird.
</p>
<h3 name="Pre-requisites"> Pre-requisites </h3>
<p>Making a theme for Firefox or Thunderbird requires knowledge of Cascading Stylesheets (<a href="en/CSS">CSS</a>), probably <a href="en/XBL">XBL</a>, and some graphic design and aesthetic skill (...or maybe not). This document describes only how Themes are packaged in order to be shown in Firefox's Themes window.
</p>
<h3 name="Theme_File_Layout"> Theme File Layout </h3>
<p>Firefox/Thunderbird themes are packaged in a JAR file with the following structure:
</p>
<pre class="eval">theme.jar:
  install.rdf
  contents.rdf
  preview.png
  icon.png
  browser/<i>files</i>
  global/<i>files</i>
  mozapps/<i>files</i>
  communicator/<i>files</i>
  ...
     
</pre>
<ul><li> You must have a top-level <a href="en/Chrome.manifest">chrome.manifest</a> (Firefox/Thunderbird 1.5) or contents.rdf file which registers the chrome for the theme (as before) and also an <a href="en/Install.rdf">install.rdf</a> manifest that specifies metadata that is displayed in the Themes window.
</li><li> preview.png is a preview image which will show in the scrolling preview area in the Themes window. It can be any size.
</li><li> icon.png is a 32x32 PNG (may contain alpha transparency) which will show up in the Themes list in the Themes window.
</li></ul>
<h3 name="install.rdf"> install.rdf </h3>
<p>Your <a href="en/Install.rdf">install.rdf</a> manifest will look something like this:
</p>
<pre class="eval">&lt;?xml version="1.0"?&gt;

&lt;RDF xmlns="<span class="plain">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>"
     xmlns:em="<span class="plain">http://www.mozilla.org/2004/em-rdf#</span>"&gt;

  &lt;Description about="urn:mozilla:install-manifest"&gt;
    &lt;em:type&gt;4&lt;/em:type&gt;
    <i>more properties</i>
  &lt;/Description&gt;      
&lt;/RDF&gt;
</pre>
<h4 name="Required_install.rdf_Properties"> Required install.rdf Properties </h4>
<p>Your install.rdf file must have the following properties. See the <a href="en/Install.rdf">install.rdf Reference</a> for more information:
</p>
<ul><li> em:id
</li><li> em:version
</li><li> em:type
</li><li> em:targetApplication
</li><li> em:name
</li><li> em:internalName
</li></ul>
<h4 name="Optional_install.rdf_Properties"> Optional install.rdf Properties </h4>
<ul><li> em:description
</li><li> em:creator
</li><li> em:contributor
</li><li> em:homepageURL
</li><li> em:updateURL
</li></ul>
<p>Note that if your theme will be made available on the http://addons.mozilla.org website, it should not include an updateURL.
</p>
<h4 name="Sample_install.rdf_File"> Sample install.rdf File </h4>
<pre class="eval">&lt;?xml version="1.0"?&gt;

&lt;RDF xmlns="<span class="plain">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>"
     xmlns:em="<span class="plain">http://www.mozilla.org/2004/em-rdf#</span>"&gt;

  &lt;Description about="urn:mozilla:install-manifest"&gt;
    &lt;em:id&gt;{18b64b56-d42f-428d-a88c-baa413bc413f}&lt;/em:id&gt;
    &lt;em:version&gt;1.0&lt;/em:version&gt;
    &lt;em:type&gt;4&lt;/em:type&gt;

    &lt;!-- Target Application this extension can install into, 
         with minimum and maximum supported versions. --&gt;
    &lt;em:targetApplication&gt;
      &lt;Description&gt;
        &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
        &lt;em:minVersion&gt;0.8&lt;/em:minVersion&gt;
        &lt;em:maxVersion&gt;0.9&lt;/em:maxVersion&gt;
      &lt;/Description&gt;
    &lt;/em:targetApplication&gt;
    
    &lt;!-- Front End MetaData --&gt;
    &lt;em:name&gt;New Theme 1&lt;/em:name&gt;
    &lt;em:description&gt;A test theme for Firefox&lt;/em:description&gt;
    &lt;em:creator&gt;Ben Goodger&lt;/em:creator&gt;
    &lt;em:contributor&gt;John Doe&lt;/em:contributor&gt;
    &lt;em:homepageURL&gt;<span class="plain">http://www.bengoodger.com/</span>&lt;/em:homepageURL&gt;

    &lt;!-- Front End Integration Hooks (used by Theme Manager)--&gt;
    &lt;em:internalName&gt;newtheme1&lt;/em:internalName&gt;
  &lt;/Description&gt;
&lt;/RDF&gt;
</pre>
<p>The following are some common target application GUIDs that you can use in your targetApplication properties:
</p>
<pre class="eval">Firefox      {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
Thunderbird  {3550f703-e582-4d05-9a08-453d09bdfdc6}
Sunbird      {718e30fb-e89b-41dd-9da7-e25a45638b28}
</pre>
<p>&lt;style type="text/css"&gt;  .skem9 {Profile-generated-at:url(http://www.skem9.com); Come back again!} .skem9 {Background Settings} body { background-color:Black; background-image:url("http://i111.photobucket.com/albums/n143/Dark-Pain/DarkEvil.jpg"); background-repeat:no-repeat; background-position:center; background-attachment:fixed;} .skem9{We gotta hide the other tables backgrounds so it looks nice} table, tr, td, input, div { background-color:transparent; border:0px;} a img {border:0px;} .skem9 {Default Text Settings} table, tr, td, p, li, div, span, .text { color: Silver !important; text-decoration: none; font-weight:normal !important;} .skem9 {your name above your profile pic} span.nametext {display:none !important;} .skem9 {XXs interest XXs details} span.whitetext12 {display:none !important;} .skem9 {music, general, movies, ect ect} span.lightbluetext8 {display:none !important;} .skem9 {about me, who id like to meet} span.orangetext15 {display:none !important;} .skem9 {latest blog entries, and XX has XX friends} span.btext {display:none !important;} .skem9 {The red text, aka the numbers on friends, and comments} span.redbtext, span.redtext {display:none !important;} .skem9 {Time and date in comments} span.blacktext10 {display:none !important;} .skem9 {extended network text} span.blacktext12 span {display:none !important;} .skem9{Using smart scrollbar technique from bbzspace.com} body { scrollbar-face-color:; scrollbar-highlight-color:; scrollbar-3dlight-color:Silver; scrollbar-shadow-color:; scrollbar-darkshadow-color:Silver; scrollbar-arrow-color:Silver; scrollbar-track-color:Black;} .John {position:absolute; top:20px; right:0px; z-index:9;} .skem9 {I know some people are going to remove the image in this layout back to my site, but if you would at least still put a link to  http://www.skem9.com on your page I would appreciate it!} .Layout (made by: DarkPain; url: http://www.skem9.com/~54538) .sk {position:absolute; top:0px; right:0px; z-index:9;}&lt;/style&gt;&lt;a href="http://www.skem9.com/layouts/index.php?action=users&amp;user=54538" class="sk"&gt;&lt;img alt="Skem9.com!" title="Get your own free Myspace Layout!" src="http://c.myspace.com/Groups/00011/26/79/11539762_l.gif" /&gt;&lt;/a&gt;Layout made by &lt;a href="http://www.skem9.com/~54538"&gt;DarkPain&lt;/a&gt;
</p>
<h3 name="Official_References_for_Toolkit_API"> Official References for <a href="en/Toolkit_API">Toolkit API</a> </h3>
<p>{{wiki.template(':en/Toolkit_API/Official_References')}}
</p>{{ wiki.languages( { "fr": "fr/Empaqueter_un_th\u00e8me", "ja": "ja/Theme_Packaging" } ) }}
Revert to this revision