path: root/files/ar/building_a_theme/index.html

---
title: Building a Theme
slug: Building_a_Theme
translation_of: Archive/Themes/Building_a_Theme
---
<h3 class="editable" dir="rtl" id="مقدمة"><strong>مقدمة</strong></h3>
<h4 dir="rtl" id="هذه_الدورة_ستقدم_لكم_الخطوات_المطلوبة_لبناء_نموذجية_لمتصفح_فيرافوكس._واحد_سيقوم_بتحديثات_لون_الخلفية_وشريط_الأدوات_في_فيرافوكس.">هذه الدورة ستقدم لكم الخطوات المطلوبة لبناء نموذجية  لمتصفح فيرافوكس. واحد سيقوم بتحديثات لون الخلفية وشريط الأدوات في فيرافوكس.</h4>
<div class="note" dir="rtl">
 <p><strong>ملاحظة: هذه الدورة مخصصة حول بناء سمة لإصدارات فيرافوكس 29 وأعلى، وهناك محاور أخرى لبناء الإصدارات السابقة من فيرافوكس. إنظر:</strong></p>
 <p style="text-align: center;"><a class="internal" href="https://developer.mozilla.org/docs/Creating_a_Skin_for_Firefox_Getting_Started" title="en/Creating a Skin for Firefox//Getting Started">Creating a Skin for Firefox</a></p>
</div>
<div id="section_2">
 <h4 class="editable" dir="rtl" id="إعداد_بيئة_التطوير"><strong>إعداد بيئة التطوير</strong></h4>
 <p dir="rtl">السمات وملحقات الحزم والموزعة في ملفات ZIP أو <a href="https://developer.mozilla.org/docs/Bundles" rel="internal">Bundles</a> ،من خلال ملف الملحقة XPI (تقرأ"<em>zippy") </em></p>
 <p dir="rtl">مثال عن المحتوى داخل ملف نموذجي لـ XPI  الخاص بسمة نموذجية:</p>
 <pre class="eval">example.xpi:
              /<a href="/Add-ons/Install_Manifests" rel="internal">install.rdf</a>
              /<a href="/docs/Chrome_Registration" rel="internal">chrome.manifest</a>
              /preview.png
              /icon.png
              /chrome/
                     browser/
                     communicator/
                     global/
                     mozapps/

</pre>
 <p dir="rtl">سنقوم ببناء</p>
 <p dir="rtl">We'll want to create a file structure similar to the one above for our tutorial, so let's begin by creating a folder for your theme somewhere on your hard disk (e.g. <code>C:\themes\my_theme\</code> or <code>~/themes/my_theme/</code>). Inside your new theme folder, create two new empty text files, one called <code>chrome.manifest</code> and the other called <code>install.rdf</code>. The file <code>preview.png</code> is shown as a preview of the theme in the themes panel of the add-ons window. The file <code>icon.png</code> is used as an icon in the same panel. We'll leave both of them out for now, unless you have something picked out that you want to use.</p>
 <p>The remaining directories will be extracted from the default theme. First, you'll want to create a directory somewhere. <strong>Copy</strong> your Firefox installation's <code>omni.ja</code> into this directory. The location differs by operating system:</p>
 <p><strong>Linux:</strong> <code>/usr/lib/MozillaFirefox/chrome/classic.jar</code> <em>or</em> <code>/usr/lib/firefox-*.*.*/omni.ja</code></p>
 <p><strong>Windows:</strong> <code>\Program Files\Mozilla Firefox\omni.ja</code></p>
 <p><strong>Mac OS X: </strong><code>/Applications/Firefox.app/Contents/MacOS/omni.ja</code></p>
 <p>Now, open (or unzip) this file into the directory you created. It contains several folders, <code>modules</code>, <code>jssubloader</code> and others. The files we will be needing are located under the <code>chrome\toolkit\skin\classic</code> folder.</p>
 <p>Create a folder called <code>chrome</code>in your theme's folder. Next, the contents of the following directories to their respective folders into the folder.</p>
 <ol>
  <li><code>global</code> to <code>chrome/global</code></li>
  <li><code>mozapps</code> to <code>chrome/mozapps</code></li>
 </ol>
 <p>Now that you've copied the <code>global</code> and <code>mozapps</code> folders, a handful of other folders from the <code>browser/omni.ja</code> archive are required. It is located in the browser folder in the location mentioned above. The files we will be needing from the browser/omni.ja archive are located under <code>chrome/browser/skin/classic</code>.</p>
 <p>Copy the contents of the following directories to their respective folders. This gives us a base set of styles to work with.</p>
 <ol>
  <li><code>browser</code> to <code>chrome/browser/</code></li>
  <li><code>communicator</code> to <code>chrome/communicator/</code></li>
 </ol>
 <p>You should end up with this directory structure:</p>
 <pre>&lt;ext path&gt;/
          /install.rdf
          /chrome.manifest
          /chrome/
                 browser/
                 communicator/
                 global/
                 mozapps/
</pre>
 <p>After this, it would be a good idea to read the article <a href="/Add-ons/Setting_up_extension_development_environment" rel="internal">Setting up extension development environment</a> and follow the directions there. It's especially important to install the <a class="internal" href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a>, which we'll be using in later steps.</p>
</div>
<div id="section_3">
 <h4 class="editable" id="Create_the_Install_Manifest"><span>Create the Install Manifest</span></h4>
 <p>Open the file called <code><a href="/Add-ons/Install_Manifests" rel="internal">install.rdf</a></code> that you created at the top of your extension's folder hierarchy and put this inside:</p>
 <pre class="eval">&lt;?xml version="1.0"?&gt;

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

  &lt;Description about="urn:mozilla:install-manifest"&gt;
    &lt;em:id&gt;<strong><a class="link-mailto" href="mailto:sample@example.net" rel="external nofollow" title="mailto:sample@example.net">sample@example.net</a></strong>&lt;/em:id&gt;
    &lt;em:version&gt;<strong>1.0</strong>&lt;/em:version&gt;
    &lt;em:type&gt;<strong>4</strong>&lt;/em:type&gt;

    &lt;!-- Target Application this theme can install into,
         with minimum and maximum supported versions. --&gt;
    &lt;em:targetApplication&gt;
      &lt;Description&gt;
        &lt;em:id&gt;<strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong>&lt;/em:id&gt;
        &lt;em:minVersion&gt;<strong>29.0</strong>&lt;/em:minVersion&gt;
        &lt;em:maxVersion&gt;32<strong>.*</strong>&lt;/em:maxVersion&gt;
      &lt;/Description&gt;
    &lt;/em:targetApplication&gt;

    &lt;!-- Front End MetaData --&gt;
    &lt;em:name&gt;<strong>My Theme</strong>&lt;/em:name&gt;
    &lt;em:internalName&gt;<strong>sample</strong>&lt;/em:internalName&gt;
    &lt;em:description&gt;<strong>A test extension</strong>&lt;/em:description&gt;
    &lt;em:creator&gt;<strong>Your Name Here</strong>&lt;/em:creator&gt;
    &lt;em:homepageURL&gt;<strong><a class="external" href="http://www.example.com/" rel="freelink">http://www.example.com/</a></strong>&lt;/em:homepageURL&gt;
  &lt;/Description&gt;
&lt;/RDF&gt;
</pre>
 <ul>
  <li><strong><a class="link-mailto" href="mailto:sample@example.net" rel="external nofollow" title="mailto:sample@example.net">sample@example.net</a></strong> - the ID of the extension. This is a value you come up with to identify your extension in email address format (note that it should not be <em>your</em> email). Make it unique. You could also use a GUID. NOTE: This parameter MUST be in the format of an email address, although it does NOT have to be a valid email address. (example.example.example)</li>
  <li><strong>4</strong> - the type of the add-on. '4' declares that it is installing a theme. If you were to install an extension it would be 2 (see <a href="/Add-ons/Install_Manifests#type" rel="internal">Install Manifests#type</a> for other type codes).</li>
  <li><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong> - Firefox's application ID.</li>
  <li><strong>29.0</strong> - the exact version number of the earliest version of Firefox you're saying this extension will work with. Never use a * in a minVersion, it almost certainly will not do what you expect it to.</li>
  <li><strong>32.*</strong> - the maximum version of Firefox you're saying this extension will work with. Set this to be no newer than the newest currently available version! In this case, "32.*" indicates that the extension works with Firefox 32 and any subsequent 32.x release. Themes are compatible by default, unless you set strict compatibility mode for your theme.</li>
 </ul>
 <p>If you get a message that the install.rdf is malformed, it is helpful to load it into firefox using the File-&gt;Open File command and it will report XML errors to you.</p>
 <p>See <a href="/Add-ons/Install_Manifests" rel="internal">Install Manifests</a> for a complete listing of the required and optional properties.</p>
 <p>Save the file.</p>
</div>
<div id="section_4">
 <h4 class="editable" id="Styling_the_Browser's_UI_with_CSS">Styling the Browser's UI with CSS</h4>
 <p>Firefox's user interface is written in XUL and JavaScript. <a href="/docs/Mozilla/Tech/XUL" rel="internal">XUL</a> is an XML grammar that provides user interface widgets like buttons, menus, toolbars, trees, etc. User actions are bound to functionality using JavaScript. These XUL elements are styled using <a class="internal" href="/en/CSS" title="en/CSS">CSS</a>. If you don't know CSS, it's going to be a steep learning curve, and you may want to try some HTML-based tutorials to start with.</p>
 <p>The browser UI has absolutely no styling on its own - if you try to start up with an empty theme, Firefox will be unusable, as the button elements will be drawn as plain text. This is why we copied the default styles in the setup step.</p>
 <p>When writing a theme, the easiest way to determine what CSS selectors you need to write is to use the DOM Inspector which you should have installed in the setup step. You can use this to inspect any element in a web page or an XUL document, which makes it invaluable for themes.</p>
 <h4 class="editable" id="Updating_the_toolbar's_Styling">Updating the toolbar's Styling</h4>
 <div class="note">
  <p><strong>Note</strong> In Firefox 4.0 and up, the highlight feature of DOM Inspector is broken. To workaround this, disable Hardware Acceleration in Firefox' Options.</p>
 </div>
 <p>Open up the DOM Inspector now (located under the "Tools" menu), and go to "File-&gt;Inspect Chrome Document". This will be a menu containing all the XUL documents currently open in Firefox.<br>
  Pick the first document with a web page title, like "Firefox Start Page" and select it.</p>
 <p>For this tutorial, we're going to update the background color of the toolbars. Select the node finding tool (the arrow-plus-box in the top-left corner of the DOM Inspector), and click on any unused space on a toolbar. This should select a node of type "xul:toolbar" in the DOM Inspector.</p>
 <p>From here, you can play around with various different stylings for the toolbar and associated elements. By default, the right pane should show the DOM node, which has useful styling information like the CSS class and node id. The element itself is of id <code>navigator-toolbox</code>, with no idea. To change its style within our theme, we need to write a selector rule to select this class.</p>
 <p>Open up the file <code>chrome/browser/browser.css</code> in your theme. Search this file for the <code>#navigator-toolbox</code> selector, and add a<code> background: orange; </code>rule to it.</p>
 <p>Save the file.</p>
</div>
<div id="section_6">
 <h4 class="editable" id="Chrome_URIs"><span>Chrome URIs</span></h4>
 <p>Next, we have to tell Firefox where to find the theme files for your theme. CSS, XUL, and other files are part of "<a href="/docs/Chrome_Registration" rel="internal">Chrome Packages</a>" - bundles of user interface components which are loaded via <code><a class="external" rel="external nofollow" title="chrome://">chrome://</a></code> URIs. Rather than load the browser from disk using a <code><a class="external" rel="external nofollow" title="file://">file://</a></code> URI (since the location of Firefox on the system can change from platform to platform and system to system), Mozilla developers came up with a solution for creating URIs to content that the installed add-on knows about.</p>
 <p>The browser window is: <code><a class="external" rel="external nofollow" title="chrome://browser/content/browser.xul">chrome://browser/content/browser.xul</a></code>. Try typing this URL into the location bar in Firefox!</p>
 <p>Chrome URIs consist of several components:</p>
 <ul>
  <li>Firstly, the <strong>URI scheme</strong> (<code>chrome</code>) which tells Firefox's networking library that this is a Chrome URI. It indicates that the content of the URI should be handled as a (<code>chrome</code>). Compare (<code>chrome</code>) to (<code>http</code>) which tells Firefox to treat the URI as a web page.</li>
  <li>Secondly, a package name (in the example above, <code><strong>browser</strong></code>) which identifies the bundle of user interface components.</li>
  <li>Thirdly, the type of data being requested. There are three types: <code>content</code> (XUL, JavaScript, XBL bindings, etc. that form the structure and behavior of an application UI), <code>locale</code> (DTD, .properties files etc that contain strings for the UI's <a href="/docs/Glossary/Localization" rel="internal">localization</a>), and <code>skin</code> (CSS and images that form the <a href="/Add-ons/Themes" rel="internal">theme</a> of the UI)</li>
  <li>Finally, the path of a file to load.</li>
 </ul>
 <p>So, <code><a class="external" rel="external nofollow" title="chrome://foo/skin/bar.png">chrome://foo/skin/bar.png</a></code> loads the file <code>bar.png</code> from the <code>foo</code> theme's <code>skin</code> section.</p>
 <p>When you load content using a Chrome URI, Firefox uses the Chrome Registry to translate these URIs into the actual source files on disk (or in JAR packages).</p>
</div>
<div id="section_7">
 <h4 class="editable" id="Create_a_Chrome_Manifest"><span>Create a Chrome Manifest</span></h4>
 <p>The Chrome Manifest is the file that maps these Chrome URIs to your theme's files. For more information on Chrome Manifests and the properties they support, see the <a href="/docs/Chrome_Registration" rel="internal">Chrome Manifest</a> Reference.</p>
 <p>Open the file called <strong>chrome.manifest</strong> that you created alongside the <code>chrome</code> directory at the root of your extension's source folder hierarchy.</p>
 <p>Add in this code:</p>
 <pre class="eval">skin    browser         sample   chrome/browser/
skin    communicator    sample   chrome/communicator/
skin    global          sample   chrome/global/
skin    mozapps         sample   chrome/mozapps/
</pre>
 <p><strong>Don't forget the</strong><strong> trailing slash, "<code>/</code>"!</strong> Without it, the package won't be registered. The third column needs to match your theme's <strong>internalName</strong> value from the install manifest above.</p>
 <p>This maps skin directories to locations within your theme. For example, the line <code>skin browser sample skin/browser/</code> means "when the user has the <code>sample</code> theme selected, use the directory <code>browser/</code> to look up skins for the <code>browser</code> package." More concisely, this means that the URL <a class="external" title="chrome://browser/skin/some/path/file.css">chrome://browser/skin/some/path/file.css</a> will look for a file <code>browser/some/path/file.css</code> in your theme's root directory.</p>
 <p>Save the file.</p>
</div>
<div id="section_9">
 <h4 class="editable" id="Test"><span>Test</span></h4>
 <p>First, we need to tell Firefox about your theme. During the development phase for Firefox versions 2.0 and higher, you can point Firefox to the folder where you are developing the theme, and it'll load it up every time you restart Firefox.</p>
 <ol>
  <li>Locate your <a class="external" href="http://kb.mozillazine.org/Profile_folder" rel="external nofollow" title="http://kb.mozillazine.org/Profile_folder">profile folder</a> and beneath it the profile you want to work with (e.g. <code>Firefox/Profiles/&lt;profile_id&gt;.default/</code>).</li>
  <li>Open the <code>extensions/</code> folder, creating it if need be.</li>
  <li>Create a new text file and put the full path to your development folder inside (e.g. <code>C:\themes\my_theme\</code> or <code>~/themes/my_theme/)</code>. Windows users should retain the OS' slash direction, and <em>everyone</em> should remember to <strong>include</strong> a closing slash and <strong>remove</strong> any trailing spaces.</li>
  <li>Save the file with the id of your theme as its name (e.g. <code><a class="link-mailto" href="mailto:sample@example.net" rel="external nofollow" title="mailto:sample@example.net">sample@example.net</a></code>). No file extension.</li>
 </ol>
 <p>Now you should be ready to test your theme!</p>
 <p>Start Firefox. Firefox will detect the text link to your theme directory and install the theme. Your theme will not be active the first time you install, and you will need to click "Enable" and restart before you can see your change. After it restarts this second time, you should see the background color of the toolbars is displayed in orange now.</p>
 <p>You can now go back and make additional changes to your css files, close and restart Firefox, and see the updates.</p>
</div>
<div id="section_10">
 <h4 class="editable" id="Package"><span>Package</span></h4>
 <p>Now that your theme works, you can <a href="/Add-ons/Extension_Packaging" rel="internal">package</a> it for deployment and installation.</p>
 <p>Zip up the <strong>contents</strong> of your theme's folder (not the theme folder itself), and rename the zip file to have a .xpi extension. In Windows, you can do this easily by selecting all the files and subfolders in your extension folder, right click and choose "Send To -&gt; Compressed (Zipped) Folder". A .zip file will be created for you. Just rename it and you're done!</p>
 <p>On Mac OS or Linux, you can use the command-line zip tool:</p>
 <pre class="eval">zip -r my_theme.xpi install.rdf chrome.manifest browser communicator global mozapps
</pre>
 <p>Or, if you have 7-Zip installed, you can use that for zipping it up:</p>
 <pre class="eval">7z a -tzip my_theme.xpi chrome chrome.manifest
</pre>
 <p><strong>Note:</strong> The command-line tool will <strong>update</strong> an existing zip file, not replace it - so if you have files you've deleted from your theme, be sure to remove the <code>.xpi </code>file before running the zip command again.</p>
 <p>Now upload the .xpi file to your server, making sure it's served as <code>application/x-xpinstall</code>. You can link to it and allow people to download and install it. For the purposes of just testing our .xpi file we can just drag it into the Add-ons Manager via "Tools -&gt; Add-ons Manager", or open it using "File -&gt; Open File...".</p>
 <div id="section_11">
  <h5 class="editable" id="Installing_from_a_web_page"><span>Installing from a web page</span></h5>
  <p>There are a variety of ways you can install extensions from web pages, including direct linking to the XPI files and using the InstallTrigger object. Extension and web authors are encouraged to use the <a href="/docs/Installing_Extensions_and_Themes_From_Web_Pages" rel="internal"> InstallTrigger method</a> to install XPIs, as it provides the best experience to users.</p>
 </div>
 <div id="section_12">
  <h5 class="editable" id="Using_addons.mozilla.org"><span>Using addons.mozilla.org</span></h5>
  <p>Mozilla Add-ons is a distribution site where you can host your theme for free. Your theme will be hosted on Mozilla's mirror network to guarantee your download even though it might be very popular. Mozilla's site also provides users easier installation, and will automatically make your newer versions available to users of your existing versions when you upload them. In addition, Mozilla Add-ons allows users to comment and provide feedback on your theme. It is highly recommended that you use Mozilla Add-ons to distribute your themes!</p>
  <p>Visit <a class="external" href="https://addons.mozilla.org/developers/" rel="external nofollow" title="http://addons.mozilla.org/developers/">https://addons.mozilla.org/developers/</a> to create an account and begin distributing your themes!</p>
  <p><em>Note:</em> Your theme will be passed faster and downloaded more if you have a good description and some screenshots of the theme in action.</p>
 </div>
</div>
<div id="section_21">
 <div id="section_23">
  <ul>
   <li><a class="internal" href="/Add-ons/Themes" title="en/Themes">Themes</a></li>
  </ul>
  <p>______________________________</p>
 </div>
</div>
<p> </p>