Theme development: Difference between revisions
(→Issues) |
(Clean up of needless subheadings, and general updating, whitespace tweaking) |
||
Line 1: | Line 1: | ||
=Introduction= | =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 [http://forums.mozillazine.org/viewtopic.php?t=76345 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 [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. | |||
= | =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. | |||
* | ==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. | * [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/tr/html401 | * [http://w3.org/style/ CSS (Cascading StyleSheets)] | ||
* [http://www.w3.org/XML/ | ** 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)] | |||
= | =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. | |||
=Setup= | =Setup= | ||
==Extracting the Chrome== | |||
See http://www.eightlines.com/neil/mozskin/gssetup.html | 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 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 | 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]]: | 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); | user_pref("nglayout.debug.disable_xul_cache", true); | ||
=Editing= | =Editing= | ||
Line 66: | Line 59: | ||
Netscape has a slightly outdated [http://wp.netscape.com/eng/mozilla/ns6/themes/creating.htm collections of document about creating Netscape 6 themes]. | Netscape has a slightly outdated [http://wp.netscape.com/eng/mozilla/ns6/themes/creating.htm collections of document about creating Netscape 6 themes]. | ||
=Issues/Bugs= | =Issues/Bugs= | ||
'''''Note:''''' As of 20050312, many of these issues have been fixed, are obsolete, or have been replaced by new issues. | |||
==Theme Changes== | ==Theme Changes== | ||
* 2003-11-20 [http://forums.mozillazine.org/viewtopic.php?t=36049 widgets/bindings un-change] | * 2003-11-20 [http://forums.mozillazine.org/viewtopic.php?t=36049 widgets/bindings un-change] | ||
Line 82: | Line 79: | ||
* '''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-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]) | * 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== | ==Fixes== | ||
Line 93: | Line 91: | ||
* 2004-05-05 [http://bugzilla.mozilla.org/show_bug.cgi?id=242712 Bug 242712] - '-moz-resizer' property removed [Mz1.8a] | * 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] | * 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== | ==Bugs== | ||
Line 105: | Line 104: | ||
* [[Em_units_versus_ex_units|em units versus ex units]] - pixel rounding problems with relative units | * [[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. | * ZipMagic is NOT compatible with .jar files, and will not allow .zip files to be re-converted back to .jar files. | ||
=Related Links= | =Related Links= | ||
*[http://cheeaun.phoenity.com/weblog/2004/12/first-steps-in-theme-design.html Creating a theme: taking your first step] | *[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] | *[http://www.eightlines.com/neil/mozskin/index.html Creating a Skin for Mozilla] |
Revision as of 07:38, 12 March 2005
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.
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.
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
- CSS (Cascading StyleSheets)
- Mozilla/Firefox uses 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 Writing Efficient CSS.
- XUL (XML User Interface Language)
- HTML (HyperText Markup Language)
- XML (Extensible Markup Language)
- RDF (Resource Description Framework)
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.
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 widgets/bindings un-change
- 2003-11-22 Bug 30579 - themeable scrollbar corner
- 2003-11-30 Bug 215467 - Download Manger / discussion
- 2003-12-09 Bug 214527 - expander button in Add Bookmarks dialog / discussion
- 2004-01-03 Firebird help contents
- 2004-03-07 Bug 214893 - Mail button / discussion / hack
- 2004-03-11 emoticons (smilies) now themeable
- 2004-03-12 Bug 233607 - About Firefox dialog unthemeable
- 2004-03-20 Bug 207403 - URLs in Javascript Console should appear as links
- 2004-04-03 Bug 234739 - "Show" replaced with "Open" in Download Manager / discussion
- 2004-05-10 Bug 243091 - remove mozilla suite cruft
- 2004-05-17 New Theme API - new theme package format to go into effect for Firefox 0.9 / discussion
- 2004-08-12 Bug 254508 - add @import for platform-specific CSS rules in Help (details)
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
- 2000-12-19 Bug 63336 - pixel rounding errors
- 2001-01-11 Bug 65133 - CSS3 selector support
- 2003-10-17 Bug 222654 - native scrollbar widgets aren't cross-platform
- 2003-11-19 Bug 226274 - dropmarker hover/click states
- 2004-05-10 Bug 243387 - about:plugins broken by cruft removal (Bug 243091)
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.