Theme development

From MozillaZine Knowledge Base
Revision as of 14:31, 7 November 2004 by Asqueella (talk | contribs) (add links for about:config and user.js)
Jump to navigationJump to search

Introduction

There isn't a good central resource for themes developers (yet - keep an eye on this page).

So far, the best place to go for theme development info is the MozillaZine Themes Forum.


Requirements

Knowledge

CSS

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 Writing Efficient CSS.

XUL

HTML/XML

RDF

Tools

Text Editors

Image Editors

File Compression Utility

Themer extension

Themer provides a button on the Themes panel of Options to allow installation of .jar packaged themes previously downloaded from a website.

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.

Theme Structure

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.

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.

Issues/Bugs

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

Related Links