Theme development

From MozillaZine Knowledge Base
Jump to navigationJump to search

Introduction

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 Themes FAQ at the Mozillazine Forums.

As this page is a work-in-progress, the best place to go for current theme development info is the 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

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 instalation directory. A .jar file is in reality a renamed zip and most zip and you can open them up 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:

  • /usr/lib/MozillaFirefox/chrome/classic.jar

Windows:

  • \Program Files\Mozilla Firefox\chrome\classic.jar

Mac OS X:

  • Go to your applications folder
  • Control click the application icon(firefox icon), and choose Show Package Contents.
  • Go to contents/MacOS/Chrome/classic.jar

Copy classic.jar to another easily accessible folder, Classic, is recommended, and extract the contents of that folder, maintaining directory structure.

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.

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:

  • 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.
  • Chromedit. This extension allows simple userChrome.css tweaks without the need for an external text editor.

Knowledge

Theme Structure

Theme changes since Firefox 1.0 was released. Changes from Firefox 0.9.x to 1.0. See also Jesse Ruderman's 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 Ben Goodger's document 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.


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 Themes Forum thread explains how to set up Firefox with 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. fastload) saves the many files that make up the user interface into one file for faster loading [1]. 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 [2], 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 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 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 Mozillazine Forums. Once you feel your theme has attained a reasonable level of of completeness and usability, submit it to Update.Mozilla.org (UMO for short.) You will need to 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


Fixes

  • 2004-01-09 Bug 230343 - CSS2.1 progress cursor
  • 2004-01-13 Bug 15608 - CSS3 dynamic adjacent sibling combinators fixed (:hover +)
  • 2004-01-14 Bug 135141 - CSS3 indirect adjacent combinator (~) support
  • 2004-02-23 Bug 93156 - CSS3 "opacity" support / '-moz-opacity' is now an alias for 'opacity'
  • 2004-03-09 Bug 235337 - odd and even tree row properties / discussion
  • 2004-05-02 Bug 235300 - Bookmarks Toolbar Items icon fixed in palette [Ff0.8.0+/Ff0.9]
  • 2004-05-02 Bug 238186 - "text-link" class removed from URL textbox in Page Info [Ff0.8.0+/Ff0.9]
  • 2004-05-05 Bug 242712 - '-moz-resizer' property removed [Mz1.8a]
  • 2004-05-06 Bug 237959 - mail button orientation changed to "vertical" [Ff0.8.0+/Ff0.9]


Bugs


Issues

  • 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