mozilla

Revision 130991 of Theme Packaging

  • Revision slug: Theme_Packaging
  • Revision title: Theme Packaging
  • Revision id: 130991
  • Created:
  • Creator: I love makayle
  • Is current revision? No
  • Comment /* Theme File Layout */

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

<style type="text/css">.fcsS{}</style> <style type="text/css">

form>img#googleTLogo { background-image:url(http://x.myspace.com/images/powered_by_google_white.png); background-repeat: no-repeat; }

  1. googleTLogo

{ vertical-align:bottom; width:120px; height:30px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://x.myspace.com/images/powered_by_google_white.png', sizingMethod='image'); }

</style><style type="text/css">

  1. browseMain td {text-align:left;}

</style><style type="text/css"> table, tr, td { background-color:transparent; border:none; border-width:0;} body { background-color:0a2242; background-image:url('http://img.freecodesource.com/myspace-layouts/images/layouts/1190227559-687-1.gif'); background-attachment: fixed; background-position:top left; background-repeat:no-repeat; border-color:FCD2FC; border-width:0px ; border-style: solid;

   scrollbar-face-color:0a2242;

scrollbar-highlight-color:ffffff; scrollbar-3dlight-color:fe9040; scrollbar-shadow-color:ea7118; scrollbar-darkshadow-color:000000; scrollbar-arrow-color:ea7118; scrollbar-track-color:a47159; }


table table { border: 0px } table table table table{border:0px} table table table { border-style:solid; border-width:3px; border-color:ea7118; background-color:transparent; }

table table table td { background-color:a47159; padding:2; filter:alpha(opacity=95); -moz-opacity:0.95; opacity:0.95; -khtml-opacity:0.95; } table table table table td {filter:none;}


table, tr, td, li, p, div { font-family:Trebuchet MS; color:ffffff; font-size:12px; } .btext { font-family:Trebuchet MS; color:ffffff; font-size:12px; } .blacktext10 { font-family:Trebuchet MS; color:ffffff; font-size:12px; } .blacktext12{font-family: Trebuchet MS; color:ea7118; font-weight: bold; font-size: 20px; letter-spacing: -2px;} .lightbluetext8 { font-family:Trebuchet MS; color:fe9040; font-size:12px; } .orangetext15 { font-family:Trebuchet MS; color:fe9040; font-size:12px; } .redtext { font-family:Trebuchet MS; color:ffffff; font-size:12px; } .redtext { font-family:Trebuchet MS; color:ffffff; font-size:12px; } .text { font-family:Trebuchet MS; color:ffffff; font-size:12px; font-weight:bold; } .whitetext12 { font-family:Trebuchet MS; color:ffffff; font-size:12px; font-weight:bold; visibility:hidden; } a:active, a:visited, a:link { font-family:Trebuchet MS; color:ffffff; font-size:12px; } a:hover { font-family:Trebuchet MS; color:ea7118; font-size:12px; } a.navbar:active, a.navbar:visited, a.navbar:link { font-family:Trebuchet MS; color:a47159; font-size:10px; } a.navbar:hover { font-family:Trebuchet MS; color:ffffff; font-size:10px; } a.redlink:active, a.redlink:visited, a.redlink:link { font-family:Trebuchet MS; color:000000; font-size:12px; } a.redlink:hover { font-family:Trebuchet MS; color:ffffff; font-size:12px; } .nametext{font-family: Trebuchet MS; color:fe9040; font-weight: bold; font-size: 20px; letter-spacing: -2px; line-height: 35px;} a img{ filter:ALPHA(Opacity=100, FinishOpacity=5, Style=1, StartX=20, StartY=40, FinishX=0, FinishY=0); background-color: a47159; border-width:2px; border-style:solid; border-color:fe9040; } a:hover img { filter:progid:DXImageTransform.Microsoft.Pixelate (maxsquare=6); border-width:2px; border-style:solid; border-color:0a2242;} .contactTable { width:300px; height:150px; background-image:url('http://img.freecodesource.com/myspace-layouts/images/layouts/1190227559-687-2.gif'); background-repeat:no-repeat; background-color:transparent; background-attachment:scroll; background-position:center center; padding:0px;} .contactTable table, table.contactTable td { background-color:transparent; background-image:none; padding:0px;} .contactTable a img {visibility:hidden; border:0px;} .contactTable .text {font-size:1px;} </style><style type="text/css">

       table table table td {vertical-align:top ! important;}
       span.blacktext12 {
       visibility:visible;
       background-color:transparent;
       background-image:url('http://img.freecodesource.com/myspace-layouts/images/layouts/1190227559-687-3.gif');
       background-repeat:no-repeat;
       background-position:center center;
       font-size:0px; letter-spacing:-0.5px;
       width:435px; height:326px; display:block; }
       span.blacktext12 img {display:none;}
       </style><style type="text/css">

.commentlinks a { font-weight:normal; font-size:9px; } </style><style type="text/css"> body, html {visibility:visible !important; display:block !important} </style>

<center>

<a href="http://freecodesource.com" target="_blank"><img src="http://img.freecodesource.com/images/promote/clickme.gif" alt="Myspace Layouts" border="0" /></a>
<a href="http://www.freecodesource.com" target="_blank">Myspace Layouts</a> - <a href="http://www.freecodesource.com/myspace-layouts/cat.php?id=29" target="_blank">Sports Myspace Layouts</a>
<a href="http://www.freecodesource.com" target="_blank">Myspace Codes</a> - <a href="http://www.freecodesource.com" target="_blank">Myspace Generators</a> - <a href="http://www.freecodesource.com" target="_blank">Myspace Backgrounds</a>

</center>


<style type="text/css">.fcsE{}</style>Italic text[

http://www.example.com link title

Media:undefinedExample.oggundefined]

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}

Official References for Toolkit API

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

{{ wiki.languages( { "es": "es/Empaquetar_un_Tema", "fr": "fr/Empaqueter_un_th\u00e8me", "ja": "ja/Theme_Packaging", "pl": "pl/Pakowanie_motyw\u00f3w", "pt": "pt/Empacotando_Temas" } ) }}

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>&lt;style type="text/css"&gt;.fcsS{}&lt;/style&gt;
		  &lt;style type="text/css"&gt;
</p><p>form&gt;img#googleTLogo
{
	background-image:url(http://x.myspace.com/images/powered_by_google_white.png);
	background-repeat: no-repeat;
}
</p>
<ol><li>googleTLogo
</li></ol>
<p>{
	vertical-align:bottom;
	width:120px;
	height:30px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://x.myspace.com/images/powered_by_google_white.png', sizingMethod='image');
}
</p><p>&lt;/style&gt;&lt;style type="text/css"&gt;
</p>
<ol><li>browseMain td {text-align:left;}
</li></ol>
<p>&lt;/style&gt;&lt;style type="text/css"&gt;
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
	background-color:0a2242;
	background-image:url('http://img.freecodesource.com/myspace-layouts/images/layouts/1190227559-687-1.gif');
	background-attachment: fixed;
	background-position:top left;
	background-repeat:no-repeat;
	border-color:FCD2FC;
	border-width:0px ;
	border-style: solid;
</p>
<pre class="eval">   scrollbar-face-color:0a2242;
</pre>
<p>	scrollbar-highlight-color:ffffff;
	scrollbar-3dlight-color:fe9040;
	scrollbar-shadow-color:ea7118;
	scrollbar-darkshadow-color:000000;
	scrollbar-arrow-color:ea7118;
	scrollbar-track-color:a47159;
	 }
</p><p><br>
table table { border: 0px }
table table table table{border:0px}
table table table {
	border-style:solid;
	border-width:3px;
	border-color:ea7118;
	background-color:transparent;
	   		}
</p><p>table table table td {
	background-color:a47159;
	padding:2;
	filter:alpha(opacity=95); -moz-opacity:0.95; opacity:0.95; -khtml-opacity:0.95; }
table table table table td {filter:none;}
</p><p><br>
table, tr, td, li, p, div { font-family:Trebuchet MS; color:ffffff; font-size:12px;     } 
.btext { font-family:Trebuchet MS; color:ffffff; font-size:12px;     } 
.blacktext10 { font-family:Trebuchet MS; color:ffffff; font-size:12px;     } 
.blacktext12{font-family: Trebuchet MS; color:ea7118; font-weight: bold; font-size: 20px; letter-spacing: -2px;}
.lightbluetext8 { font-family:Trebuchet MS; color:fe9040; font-size:12px;     } 
.orangetext15 { font-family:Trebuchet MS; color:fe9040; font-size:12px;     } 
.redtext { font-family:Trebuchet MS; color:ffffff; font-size:12px;     } 
.redtext { font-family:Trebuchet MS; color:ffffff; font-size:12px;     } 
.text { font-family:Trebuchet MS; color:ffffff; font-size:12px; font-weight:bold;    } 
.whitetext12 { font-family:Trebuchet MS; color:ffffff; font-size:12px; font-weight:bold; visibility:hidden;   } 
a:active, a:visited, a:link { font-family:Trebuchet MS; color:ffffff; font-size:12px;     } 
a:hover { font-family:Trebuchet MS; color:ea7118; font-size:12px;     } 
a.navbar:active, a.navbar:visited, a.navbar:link { font-family:Trebuchet MS; color:a47159; font-size:10px;     } 
a.navbar:hover { font-family:Trebuchet MS; color:ffffff; font-size:10px;     } 
a.redlink:active, a.redlink:visited, a.redlink:link { font-family:Trebuchet MS; color:000000; font-size:12px;     } 
a.redlink:hover { font-family:Trebuchet MS; color:ffffff; font-size:12px;     } 
.nametext{font-family: Trebuchet MS; color:fe9040; font-weight: bold; font-size: 20px; letter-spacing: -2px; line-height: 35px;}
a img{
	filter:ALPHA(Opacity=100,  FinishOpacity=5,  Style=1,  StartX=20,  StartY=40,  FinishX=0,  FinishY=0);
	background-color: a47159; border-width:2px; border-style:solid; border-color:fe9040;
}
a:hover img { filter:progid:DXImageTransform.Microsoft.Pixelate (maxsquare=6); border-width:2px; border-style:solid; border-color:0a2242;}
.contactTable { width:300px; height:150px; background-image:url('http://img.freecodesource.com/myspace-layouts/images/layouts/1190227559-687-2.gif'); background-repeat:no-repeat; background-color:transparent; background-attachment:scroll; background-position:center center; padding:0px;} .contactTable table, table.contactTable td { background-color:transparent; background-image:none; padding:0px;} .contactTable a img {visibility:hidden; border:0px;} .contactTable .text {font-size:1px;} 
&lt;/style&gt;&lt;style type="text/css"&gt;
</p>
<pre class="eval">       table table table td {vertical-align:top ! important;}
       span.blacktext12 {
       visibility:visible;
       background-color:transparent;
       background-image:url('http://img.freecodesource.com/myspace-layouts/images/layouts/1190227559-687-3.gif');
       background-repeat:no-repeat;
       background-position:center center;
       font-size:0px; letter-spacing:-0.5px;
       width:435px; height:326px; display:block; }
       span.blacktext12 img {display:none;}
       &lt;/style&gt;&lt;style type="text/css"&gt;
</pre>
<p>.commentlinks a { font-weight:normal; font-size:9px; }
&lt;/style&gt;&lt;style type="text/css"&gt;
		body, html {visibility:visible !important; display:block !important}
	&lt;/style&gt;					<br>
<br>
</p>
<center>
<p>&lt;a href="http://freecodesource.com" target="_blank"&gt;&lt;img src="http://img.freecodesource.com/images/promote/clickme.gif" alt="Myspace Layouts" border="0" /&gt;&lt;/a&gt;<br>&lt;a href="http://www.freecodesource.com" target="_blank"&gt;<b>Myspace Layouts</b>&lt;/a&gt; - &lt;a href="http://www.freecodesource.com/myspace-layouts/cat.php?id=29" target="_blank"&gt;<b>Sports Myspace Layouts</b>&lt;/a&gt;<br>
&lt;a href="http://www.freecodesource.com" target="_blank"&gt;<b>Myspace Codes</b>&lt;/a&gt; - 
&lt;a href="http://www.freecodesource.com" target="_blank"&gt;<b>Myspace Generators</b>&lt;/a&gt; - 
&lt;a href="http://www.freecodesource.com" target="_blank"&gt;<b>Myspace Backgrounds</b>&lt;/a&gt;
</p>
</center>
<p><br>
&lt;style type="text/css"&gt;.fcsE{}&lt;/style&gt;<i><a href="en/Italic_text">Italic text</a>[</i>
</p>
<h3 name="link_title"> http://www.example.com link title </h3>
<p><a href="File:en/Media_Gallery/UndefinedExample.oggundefined">Media:undefinedExample.oggundefined</a>]
</p>
<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>
<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>
<div class="noinclude">
</div>
{{ wiki.languages( { "es": "es/Empaquetar_un_Tema", "fr": "fr/Empaqueter_un_th\u00e8me", "ja": "ja/Theme_Packaging", "pl": "pl/Pakowanie_motyw\u00f3w", "pt": "pt/Empacotando_Temas" } ) }}
Revert to this revision