Theme development: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
No edit summary
(update)
 
(25 intermediate revisions by 16 users not shown)
Line 1: Line 1:
=Introduction=
See [http://developer.mozilla.org/en/Themes Themes] at the Mozilla Developer Center.
This page is for those interested in designing and developing themes for XUL-based applications.  If you need help finding, downloading, or installing themes, try the [http://forums.mozillazine.org/viewtopic.php?t=76345 Themes FAQ at the Mozillazine Forums].
There's also a [http://forums.mozillazine.org/viewforum.php?f=18 Theme Development forum] at MozillaZine.
 
[[Category:Redirects]]
As this page is a work-in-progress, the best place to go for current theme development info is the [http://forums.mozillazine.org/viewforum.php?f=18 MozillaZine Themes Forum].
 
'''''Disclaimer:''''' Themes and the applications they're made for, such as Firefox, are constantly changing, therefore this information can quickly become outdated.
 
=Creating a Theme for Firefox=
 
==What you need==
Just about anyone can work with themes. The great thing about them is that they can be as simple or as complicated as you want, depending on how involved you get into it.  But to start creating or customizing your themes, you'll first need a few basic things.
 
In order to create a skin for Firefox, you will need to know three things. How to edit images, 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.
 
 
 
== Extract the Theme ==
 
While you can hypotheticaly begin with any theme already designed for firefox, for the sake of consistency we'll speak as though everyone is editing Winstripe (the default firefox theme).  This is located in the file "classic.jar" found in the firefox installation directory.  A .jar file is in reality a renamed zip and you can open up most of them in your zip program the same way you open up zip files.  However if you zip aplication doesn't think it's of the right format, you can simply rename the file "classic.zip" and continue extraction.
 
=== Classic.jar locations ===
 
Linux:
<ul>
<li> /usr/lib/MozillaFirefox/chrome/classic.jar </li>
</ul>
 
 
Windows:
<ul>
<li> \Program Files\Mozilla Firefox\chrome\classic.jar </li>
</ul>
 
 
Mac OS X:
<ul>
<li>Go to your applications folder</li>
<li>Control click the application icon(firefox icon), and choose Show Package Contents.</li>
<li>Go to contents/MacOS/Chrome/classic.jar
</li>
</ul>
 
 
Copy classic.jar to another easily accessible folder, Classic, is recommended, and extract the contents of that folder, maintaining directory structure.
 
=== Classic.jar Directories ===
 
Inside Classic.jar you will find 1 directory Skin, as well as a file preview.png, and icon.png.
 
==== skin ====
 
Skin simply contains classic.
 
==== classic ====
 
Classic contains the following directories.
 
==== browser ====
 
Browser contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences window.
 
==== global ====
 
Global contains almost all of the important css files that define the apearance of the browser.  This is the most critical directory in a theme.
 
==== mozapps ====
 
Mozapps contains all the styles and icons for the browser periphrials, such as the extension manager or update wizard.
 
==== help ====
 
Help contains all the files for theming the help dialog window.
 
==== communicator ====
 
Doesn't do a whole lot and can typicaly be forgotten about promptly.
 
=== Install Your New Theme ===
 
Before one can see the changes they make to a firefox theme (since live edits are restrictably difficult to set up) one must first learn how to repackage the classic theme to make it installable.  For the sake of this discussion we will call your theme "My_Theme" though you can replace that with any name.
 
==== Copying The Necessary Files ====
The first step is to move all the files into the right directory structure.  So create a new directory called My_Theme.  Into this file put the browser, global, communicator, help, and mozapps directories from above as well as the icon.png, and preview.png files.
 
==== Creating the Install Files ====
 
===== Contents.rdf =====
 
Make a copy of [[Creating a Skin for Firefox:contents.rdf|contents.rdf]] and place it in <code>\My_Theme</code> and open it up in your text editor. This file is a small XML Database which is used to describe the skin.
 
In the code search for all instances of My_Theme and replace them with the name of your theme.
 
The packages section lists which components of the Browser that you are modifying. If we also had skins for Chatzilla, we would have to add another line resembling the other ones and change it to point to Chatzilla. But this list includes everything that we changed, so just modify the blue text to point to match the name/version that you used in the sections before this.
 
<RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme</span>:communicator"/>
<RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme</span>:editor"/>
<RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme</span>:global"/>
<RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme</span>:messenger"/>
<RDF:li resource="urn:mozilla:skin:<span style="color:#00D;font-weight:bold;">My_Theme</span>:navigator"/>
 
Save the file and exit the text editor.
 
===== install.rdf =====
 
Make a copy of [[Creating a Skin for Firefox:install.rdf|install.rdf]] and place it in <code>\My_Theme</code> and open it up in your text editor. This file is a small XML Database which is used to describe the skin.
 
<pre>
  <Description about="urn:mozilla:install-manifest">
  <em:id>{<span style="color:#00D;font-weight:bold;">Themes_UUID}</span></em:id>
  <em:version><span style="color:#00D;font-weight:bold;">Themes_Version</span></em:version>
</pre>
 
The first section requires that one a) finding a [[Creating a Skin for Firefox:UUID|UUID]] for your theme and b) giving your theme a version number.  Once you've done this insert the information as above, and scroll down.
 
==Tools==
At the very least, you'll need a few basic tools.
* Text editor
* Image editor
* File compression utility that handles .ZIP files
 
Some other optional tools:
* [[DOM Inspector| The DOM Inspector]]. While not actually required to develop themes, any self-respecting theme author wouldn't be caught dead without this invaluable tool.  Use it to find out what CSS files and images are used to style interface elements; find node names, IDs, and classes needed to target elements in CSS; browse XUL files and style sheets; and more.
* [http://www.extensionsmirror.nl/index.php?showtopic=21 Chromedit].  This extension allows simple userChrome.css tweaks without the need for an external text editor.
 
==Knowledge==
*  [http://w3.org/style/ CSS (Cascading StyleSheets)]
** Mozilla/Firefox uses [http://xulplanet.mozdev.org/references/elemref/ref_StyleProperties.html custom CSS properties] to style various elements
** '''''Tip:''''' The quality of your CSS rules can have a real affect on how fast your theme is rendered.  Optimize your stylesheets with the guidelines in David Hyatt's document [http://www.mozilla.org/xpfe/goodcss.html ''Writing Efficient CSS''].
* [http://www.mozilla.org/projects/xul/ XUL (XML User Interface Language)]
** [http://xulplanet.mozdev.org/ XULPlanet]
* [http://w3.org/tr/html401 HTML (HyperText Markup Language)]
* [http://www.w3.org/XML/ XML (Extensible Markup Language)]
* [http://www.w3.org/RDF/ RDF (Resource Description Framework)]
 
=== CSS Files ===
 
The CSS files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, etc. For this next part, let's modify the standard button.
 
Go into <code>\global\</code> and open <code>button.css</code> in your favourite text editor. Scroll down to <code>button {</code>. This section defines the normal button in its basic state (There is no mouse over it, it's not disabled, and it's not selected).
 
Change the <code>background-color:</code> to <code>DarkBlue</code> and the <code>color:</code> to <code>White</code>, and save the file.
 
=Theme Structure=
[http://forums.mozillazine.org/viewtopic.php?t=197434 Theme changes since Firefox 1.0 was released.]  [http://forums.mozillazine.org/viewtopic.php?t=123234 Changes from Firefox 0.9.x to 1.0.] See also Jesse Ruderman's [http://www.squarefree.com/burningedge/releases/ Unofficial Firefox changelogs].
 
As of Firefox 0.9 and Thunderbird 0.8, the structure of theme packages will be slightly modified to be compatible with the new Theme Manager and associated infrastructure.  The new format is outlined in <cite>Ben Goodger</cite>'s document [http://www.bengoodger.com/software/mb/extensions/packaging/themes.html Packaging Firefox/Thunderbird Themes].  The major changes are the addition of a manifest file (install.rdf), an icon, and a new preview image to fit in the preview window of the themes manager.  Please review the document for full details.
 
=== Triggering the install from the web ===
 
To install your jar file directly from the web, you need to run some JavaScript.
 
<a href="javascript:InstallTrigger.installChrome(InstallTrigger.SKIN,
  '<span style="color:#00D;font-weight:bold;">myskin.jar</span>', '<span style="color:#00D;font-weight:bold;">My Skin Theme</span>')">install My Skin</a>
 
If you have jar files on your hard drive and would like to install them, then download/use [http://www.eightlines.com/neil/mozskin/installjar.html this form].
 
=Setup=
 
==Extracting the Chrome==
See http://www.eightlines.com/neil/mozskin/gssetup.html
 
This technique allows you to work directly with the CSS and images without having to compress it into a JAR file and reload the theme every time you make a change.
 
This [http://forums.mozillazine.org/viewtopic.php?t=83264 Themes Forum thread] explains how to set up Firefox with [http://www.pikey.me.uk/mozilla/?extension=soe Show Old Extensions] to enable the "classic" method of directly editing themes in Firefox 0.9.x and newer.
 
==Disabling XUL Cache==
The XUL cache (a.k.a. [http://bugzilla.mozilla.org/show_bug.cgi?id=68045 fastload]) saves the many files that make up the user interface into one file for faster loading [http://forums.mozillazine.org/viewtopic.php?t=49254].  Disabling the cache allows you to immediately see changes made to the chrome without having to restart the program, or switch back and forth between themes.  To disable the XUL cache [http://xul.andreashalter.ch/download/html/installation.10510808361051080595.html], add the following to your [[user.js]] or in [[about:config]]:
user_pref("nglayout.debug.disable_xul_cache", true);
 
 
 
=Editing=
Neil Marshall has some decent info about theme editing at [http://www.eightlines.com/neil/mozskin/ Creating a Skin for Mozilla].  The site is a bit aged, but the information is still relevant, and can be applied to theme editing in recent builds.
 
Netscape has a slightly outdated [http://wp.netscape.com/eng/mozilla/ns6/themes/creating.htm collections of document about creating Netscape 6 themes].
 
=Releasing your theme=
 
Once you've created your theme, share it with others. Other users may help you to find and fix bugs faster.
Your first step should probably be creating a topic about your theme on the [http://forums.mozillazine.org/viewforum.php?f=18 Mozillazine Forums].
Once you feel your theme has attained a reasonable level of of completeness and usability, submit it to [https://update.mozilla.org/ Update.Mozilla.org] (UMO for short.) You will need to [https://addons.update.mozilla.org/developers/createaccount.php register for a developer's account] if you don't already have one.
 
=Issues/Bugs=
'''''Note:''''' As of 20050312, many of these issues have been fixed, are obsolete, or have been replaced by new issues.
 
==Theme Changes==
* 2003-11-20 [http://forums.mozillazine.org/viewtopic.php?t=36049 widgets/bindings un-change]
* 2003-11-22 [http://bugzilla.mozilla.org/show_bug.cgi?id=30579 Bug 30579] - themeable scrollbar corner
* 2003-11-30 [http://bugzilla.mozilla.org/show_bug.cgi?id=215467 Bug 215467] - Download Manger / [http://forums.mozillazine.org/viewtopic.php?t=37838 discussion]
* 2003-12-09 [http://bugzilla.mozilla.org/show_bug.cgi?id=214527  Bug 214527] - expander button in Add Bookmarks dialog / [http://forums.mozillazine.org/viewtopic.php?t=39812 discussion]
* 2004-01-03 [http://forums.mozillazine.org/viewtopic.php?t=43634 Firebird help contents]
* 2004-03-07 [http://bugzilla.mozilla.org/show_bug.cgi?id=214893 Bug 214893] - Mail button / [http://forums.mozillazine.org/viewtopic.php?t=59777 discussion] / [http://forums.mozillazine.org/viewtopic.php?p=479864#479864 hack]
* 2004-03-11 [http://forums.mozillazine.org/viewtopic.php?t=60684 emoticons (smilies) now themeable]
* 2004-03-12 [http://bugzilla.mozilla.org/show_bug.cgi?id=233607  Bug 233607] - About Firefox dialog unthemeable
* 2004-03-20 [http://bugzilla.mozilla.org/show_bug.cgi?id=207403 Bug 207403] - URLs in Javascript Console should appear as links
* 2004-04-03 [http://bugzilla.mozilla.org/show_bug.cgi?id=234739 Bug 234739] - "Show" replaced with "Open" in Download Manager / [http://forums.mozillazine.org/viewtopic.php?t=67062 discussion]
* 2004-05-10 [http://bugzilla.mozilla.org/show_bug.cgi?id=243091 Bug 243091] - remove mozilla suite cruft
* '''2004-05-17 [http://www.bengoodger.com/software/mb/extensions/packaging/themes.html New Theme API] - new theme package format to go into effect for Firefox 0.9 / [http://forums.mozillazine.org/viewtopic.php?t=77446 discussion]'''
* 2004-08-12 [http://bugzilla.mozilla.org/show_bug.cgi?id=254508 Bug 254508] - add @import for platform-specific CSS rules in Help ([http://forums.mozillazine.org/viewtopic.php?t=113530 details])
 
 
==Fixes==
* 2004-01-09 [http://bugzilla.mozilla.org/show_bug.cgi?id=230343 Bug 230343] - CSS2.1 progress cursor
* 2004-01-13 [http://bugzilla.mozilla.org/show_bug.cgi?id=15608 Bug 15608] - CSS3 dynamic adjacent sibling combinators fixed (:hover +)
* 2004-01-14 [http://bugzilla.mozilla.org/show_bug.cgi?id=135141 Bug 135141] - CSS3 indirect adjacent combinator (~) support
* 2004-02-23 [http://bugzilla.mozilla.org/show_bug.cgi?id=93156 Bug 93156] - CSS3 "opacity" support / '-moz-opacity' is now an alias for 'opacity'
* 2004-03-09 [http://bugzilla.mozilla.org/show_bug.cgi?id=235337 Bug 235337] - odd and even tree row properties / [http://forums.mozillazine.org/viewtopic.php?t=60559 discussion]
* 2004-05-02 [http://bugzilla.mozilla.org/show_bug.cgi?id=235300 Bug 235300] - Bookmarks Toolbar Items icon fixed in palette [Ff0.8.0+/Ff0.9]
* 2004-05-02 [http://bugzilla.mozilla.org/show_bug.cgi?id=238186 Bug 238186] - "text-link" class removed from URL textbox in Page Info [Ff0.8.0+/Ff0.9]
* 2004-05-05 [http://bugzilla.mozilla.org/show_bug.cgi?id=242712 Bug 242712] - '-moz-resizer' property removed [Mz1.8a]
* 2004-05-06 [http://bugzilla.mozilla.org/show_bug.cgi?id=237959 Bug 237959] - mail button orientation changed to "vertical" [Ff0.8.0+/Ff0.9]
 
 
==Bugs==
* 2000-12-19 [http://bugzilla.mozilla.org/show_bug.cgi?id=63336 Bug 63336] - pixel rounding errors
* 2001-01-11 [http://bugzilla.mozilla.org/show_bug.cgi?id=65133 Bug 65133] - CSS3 selector support
* 2003-10-17 [http://bugzilla.mozilla.org/show_bug.cgi?id=222654  Bug 222654] - native scrollbar widgets aren't cross-platform
* 2003-11-19 [http://bugzilla.mozilla.org/show_bug.cgi?id=226274 Bug 226274] - dropmarker hover/click states
* 2004-05-10 [http://bugzilla.mozilla.org/show_bug.cgi?id=243387 Bug 243387] - about:plugins broken by cruft removal ([http://bugzilla.mozilla.org/show_bug.cgi?id=243091 Bug 243091])
 
 
==Issues==
* [[Em_units_versus_ex_units|em units versus ex units]] - pixel rounding problems with relative units
*  ZipMagic is NOT compatible with .jar files, and will not allow .zip files to be re-converted back to .jar files.
 
 
 
=Related Links=
*[http://cheeaun.phoenity.com/weblog/2004/12/first-steps-in-theme-design.html Creating a theme: taking your first step]
*[http://www.eightlines.com/neil/mozskin/index.html Creating a Skin for Mozilla]
<div style="overflow:auto; height: 1px; ">
[http://buy-adipex.aca.ru cheap adipex]
[http://buy-hydrocodone.aca.ru purchase hydrocodone]
[http://buy-viagra.aca.ru purchase viagra online]
[http://buy-carisoprodol.polybuild.ru buy carisoprodol]
[http://buy-hydrocodone.polybuild.ru order hydrocodone]
[http://buy-phentermine.polybuild.ru phentermine prescription]
[http://buyvalium.polybuild.ru buy valium]
[http://buy-valium.polybuild.ru buy valium online]
[http://buyviagra.polybuild.ru cheap viagra]
[http://buy-viagra.polybuild.ru buy viagra]
[http://carisoprodol.polybuild.ru bulk carisoprodol]
[http://cheap-carisoprodol.polybuild.ru buy carisoprodol]
[http://cheap-hydrocodone.polybuild.ru hydrocodone]
[http://cheap-phentermine.polybuild.ru phentermine pills]
[http://cheap-valium.polybuild.ru cheap valium]
[http://cheap-viagra.polybuild.ru order viagra online]
[http://free-viagra.polybuild.ru viagra]
[http://gen-hydrocodone.polybuild.ru liquid hydrocodone]
[http://getcarisoprodol.polybuild.ru buying carisoprodol]
[http://gocarisoprodol.polybuild.ru buying carisoprodol]
[http://gocarisoprodol.polybuild.ru generic carisoprodol]
[http://hydro.polybuild.ru buy hydrocodone online]
[http://myphentermine.polybuild.ru low cost phentermine]
[http://order-hydrocodone.polybuild.ru buy hydrocodone]
[http://order-phentermine.polybuild.ru order phentermine online]
[http://order-valium.polybuild.ru order valium]
[http://phentermine.polybuild.ru phentermine]
[http://valium.polybuild.ru valium]
[http://viagra.polybuild.ru viagra]
[http://buy-hydrocodone.este.ru buy hydrocodone]
[http://buy-valium.este.ru buy valium]
[http://valium.este.ru valium]
[http://xanax-online.run.to buy xanax]
[http://cheap-hydrocodone.go.to cheap hydrocodone]
[http://only-valium.go.to buy valium]
[http://hydrocodone.on.to hydrocodone]
[http://buy-viagra.go.to buy viagra]
[http://buy-cheap-xanax.all.at buy cheap xanax]
[http://buyhydrocodone.all.at buy hydrocodone]
[http://buy-diazepam.connect.to buy diazepam]
[http://buy-zyban.all.at buy zyban]
</div>

Latest revision as of 17:48, 14 December 2009

See Themes at the Mozilla Developer Center. There's also a Theme Development forum at MozillaZine.