This section contains various topics that don't fit in the other parts of the article.
What is a Theme
You've probably seen software that lets you change the way it looks by picking alternate skins. These skins define the look of some application's user interface. A skin doesn't define what's in the user interface; it merely defines how what's already in the user interface will look.
In the Firefox world, a skin is called a theme, and it's the exact same idea with a different name: a theme is a downloadable module that defines the look of the Firefox user interface, or of any of the applications in the Mozilla family of software. As with a skin, a theme does not define what's in the user interface ... merely how what's already there will look. For example, a theme doesn't say that there will be a button in some window, but it will say how that button (and all buttons) will look.
What is an Add-on Theme
This article uses the term "add-on theme" to refer to any theme that wasn't distributed with Firefox as the default theme. End users download add-on themes from AMO (http://addons.mozilla.org) and install them with the Firefox Themes Manager (Firefox 1.5) or Add-ons Manager (Firefox 2.0).
What is an Extension
An extension is a downloadable module that adds features and user interface to Firefox and to other members of the Mozilla software family. Examples of popular extensions include AdBlock (removes annoying ads from web pages), Sage (adds RSS reader functionality as a Firefox sidebar), and FireFTP (adds FTP file transfer functionality to Firefox). You can see the whole list here.
Like themes, extensions are not part of the basic Firefox, but are instead added to it. Like themes, some extensions come with Firefox, while others are added later when the user downloads them from AMO (http://addons.mozilla.org/extensions) or from some other source not affiliated with Mozilla. Unlike themes, extensions add functionality to Firefox, giving it new menus, buttons, windows, and so on, whereas themes only change appearance, not functionality.
Like a theme, an extension is represented as a single file, which is itself a zipped-up version of a number of files and directories. Unlike themes, extensions are stored in files with a .xpi extension.
What is a Jar File
A jar file is a kind of archive file, in which several files and/or directories are packaged as a single file, from which they can be unpacked and restored later. Jar files are used in Firefox to contain themes and other parts of the Firefox user interface.
A jar file is simply a zip file that has had the extension in its file name changed from ".zip" to ".jar". Many people are familiar with the ".zip" format of archive file (although there are in fact dozens of existing formats, all of which do more or less the same thing, namely, to package or compress several files into a single file for easy handling). A jar file has exactly the same format as a zip file; the only difference is that its filename ends with ".jar" instead of ".zip". Just like with zip files, jar files are created using one of the many available zip programs. To create a jar file, simply package it using a zip program and save it in zip format, then change the extension of the filename from ".zip" to ".jar".
Open Questions
TODO why does the LXR version of the update directory contain update.css when the defa;lt theme does not?
TODO say something about the various versions of update.css / updates.css
Can I use contents.rdf/chrome.manifest to have a different root directory structure entirely?
Can you include both contents.rdf and chrome.manifest, for compatibility with both newer and older Firefox versions? Is there a theme on AMO which does this now?
if you provide a chrome.manifest, does it ignore contents.rdf?
How answer the question: where does a certain CSS file get used?
How do height, max-height and min-height interact to control height of autocomplete-history-dropmarker?
Why does xulscrollbars.css use a background image instead of a list-style-image for the scrollbutton arrow? (Tried using a list-style-image ... doesn't show up.)
Talk about using namespaces in CSS, esp as in "html|textbox".
Theme changes specific to microsummary-handling in Fx2.0.
Table: how to select it: you know what you want to change (e.g. toolbar background) now how do you select it?
Themes and XULRunner applications
Themes implemented as Extensions e.g. lolifox
sdwilsh> for that matter, if you provide a chrome.manifest, does it ignore contents.rdf? asqueella> yes sdwilsh> asqueella: well, I'm considering working on it sdwilsh> so chrome.manifest overrides contents.rdf? asqueella> yes asqueella> iirc sdwilsh> well that makes things so very much easier methinks luser> i think toolkit just generates a chrome.manifest if it doesn't exist, and then ignores the contents.rdf files afterwards sdwilsh> well, time to see if this will work asqueella> that's what I was thinking as well
What is a Zip Program
This site uses the term "zip program" to refer to software that can create and extract from .zip files. You may be more used to hearing it called a file compression utility or a file archive utility. Some popular zip programs are WinZIP, WinRAR, 7Zip, ALZIP, and others available at the click of a Google.
Why are there two preferences.css and two browser.css?
Looking at the source for the default theme for Firefox 1.5, you may notice that there are two files named preferences.css and two files named browser.css. If you dig a little deeper and look into the rest of the seven jar files in the Firefox UI, you'll find an additional browser.css and another preferences.css. What are the differences among these files? To help newcomers keep this straight (and old-timers, coming back to maintain a theme after a time away) here's a table that summarizes the differences.
| Item | Description | |||||||
|
CSS rules and XBL bindings for the main browser window. These rules are beyond the control of themes [1]. Jar Path: browser.jar!/content/browser/browser.css (LXR Source) | |||||||
|
CSS rules specific to the Firefox main browser window [2]. Jar Path: classic.jar!/skin/classic/browser/browser.css (Details) | |||||||
|
CSS rules for browser windows in general, and not just for the main browser window [2]. Jar Path: classic.jar!/skin/classic/global/browser.css (Details) | |||||||
|
CSS rules defining XBL bindings used in prefwindows. These rules are beyond the control of themes [1]. Jar Path: toolkit.jar!/content/mozapps/preferences/preferences.css (LXR Source) | |||||||
|
CSS rules applying specifically to the Firefox Options window. Jar Path: classic.jar!/skin/classic/browser/preferences/preferences.css (Details) | |||||||
|
CSS rules for all prefwindow-based windows in general [3], rather than the one Firefox Options window. Jar Path: classic.jar!/skin/classic/global/preferences.css (Details) | |||||||
Notes:
- This file (along with one other) is located in the "content" part of the package rather than the "skin" part, and is not part of the Firefox default theme. Rules in this file are loaded before any theme is loaded, and are loaded no matter which theme is selected as the current active theme. This has the effect of making sure these rules are always loaded; they are, in effect, beyond the reach of theme developers.
- The distinction between these two versions of browser.css is somewhat arbitrary. In practice, all browser windows will use the rules from both of these files, and you never have a case of a browser window reading just one or the other. (There is a suggestion, as yet unconfirmed, that the reason for two separate files is that one of them is installed as part of a toolkit shared among Mozilla applications, while the other is specific to Firefox alone.) Regardless, the best recommendation for theme developers regarding these two files is to keep related rules grouped together in whichever file contains them in the Firefox default theme.
- A "prefwindow" is a kind of XUL element used to define the Firefox Options window and many of the windows that are opened from the Options window. This general-purpose XUL element is also used in many extensions to define a preferences window for the extension.
update.xul and updates.xul
There's both an update.xul and an updates.xul. What's the difference?
- update.xul (chrome://mozapps/content/preferences/update.xul) defines the "updates" tab panel for the "advanced" pane of the Options window.
- updates.xul with an 's' (chrome://mozapps/content/update/updates.xul) contains the source for the Software Update and Extension Update wizards. (These are two different windows, but the same XUL source is used for both.)
chrome://mozapps/content/extensions/update.css chrome://mozapps/content/update/updates.css chrome://mozapps/skin/extensions/update.css chrome://mozapps/skin/update/updates.css
nativescrollbars.css and xulscrollbars.css
What's up with nativescrollbars.css and xulscrollbars.css? Why both?
Future Directions
Theme editor. Theme proofing tool (required files, missing files, unused files).
THEME EDITOR THOUGHTS - general model: free-form exceptions overlaid on simplifying assumptions - simplifying assumption: "all beveled edges have the same colors (hey user: what colors do you want?)" - free-form exceptions: the user can code whatever rules he wants user interface: - presented to user as list of items - should this be implemented as a web app on AMO? on DEVMO? - define stock widgets using state matrix (normal + active + hover versus disalbled, checked, whatever) simplifying assumptions: - all windows same bg color - all dialogs same bg color - all buttons same appearance - and so on ... free-form exceptions: - begin with a standard set of exceptions to handle the user interface - allow user to enter and edit free-form code - present list of all "exception items" that the user has defined; allow these to be reordered for effect implementation: - may need to use in conjunction with the supertheme extension