A subskin is an optional mini-theme that adds to an existing theme.

Subskins change the look of one small part of Firefox (like changing colors or background images, or anything a theme can change on its own, really), beyond what a theme already does. Subskins are used by theme authors to make parts of a theme optional, instead of the same for everyone.

This theme, NASA Night Launch, offers several different subskins. For example, some subskins add NASA images to the toolbar background. You can choose one or more to tweak your browser. See the list of subskins here.

With this theme, subskins are included in the theme; there's nothing extra to download.

Subskins can work different ways in different themes. Everything we say here applies of course to subskins as implemented in this theme.

To apply a subskin, you add some code to your userChrome.css file. userChrome.css is a file that you (the Firefox end user) edit to tweak the appearance of Firefox. When Firefox starts up, it reads this file and then applies any commands you may have added to this file. (userChrome.css can contain other commands than just subskin commands, but here we're focusing on subskins only.) Finding and editing userChrome.css is discussed below.

For each subskin you want to apply (you can choose zero, one, or many) you add a line to userChrome.css of the form:

@import url("chrome://global/skin/subskins/window-picture-2/subskin.css");
  

That line adds a subskin called "window-picture-2".

The next example shows three different import statements. These add three subskins at once (in this example, the ones called "window-picture-2", "toolbox-logo-8", and "lighter-toolbars-2"). You can see that the import statements are mostly the same; the only thing that changes is the name of the subskin.

@import url("chrome://global/skin/subskins/window-picture-2/subskin.css");
@import url("chrome://global/skin/subskins/toolbox-logo-8/subskin.css");
@import url("chrome://global/skin/subskins/lighter-toolbars-2/subskin.css");
  

To add a subskin, there's only four things you have to get right.

1. You need to edit the right userChrome.css file. More about this below.
2. You need the right import statement(s). You can just copy and paste from the list of subskins.
3. You need to paste before any namespace statement. If your userChrome.css has any namespace statement, make sure it comes after your import statements. That's just how it works. Other than that, you can ignore namespace statements, if any.
4. You need to restart Firefox for any userChrome.css changes to take effect.

Editing userChrome.css is super-easy. It's a text file, and all you need is a text editor.

Finding it, on the other hand, is kind of a headache. The location is documented here, but it depends on what kind of operating system (e.g., Windows vs. Linux) you're on, what user you're logged in as on your computer, which Firefox profile you're using, and where you installed Firefox. Even worse, Firefox is installed, by default, without any userChrome.css, relying on you to create one if you want to use one. This means you can't even run a search on your hard drive to find it.

Fortunately there's an easier way. Firefox users are smart hip people and one of them, Mel Reyes, created a great tool called MTLI. (It's free; get it here). Once this tool is installed and Firefox is restarted, just open the Tools menu and pick "Edit My Config >> Chrome Editor". This will open a window where you can type right into your userChrome.css.

There's one last wrinkle: by default, Firefox doesn't create the folder/directory that userChrome.css lives in either. This means that, to save your changes, you'll need to create this folder if it doesn't already exist. This folder is called "chrome". With MTLI, you'll see that path to the file displayed at the bottom of the Chrome Editor window. Just use your computer's file manager (e.g., Windows Explorer) to create this folder at the listed location. Problem solved.

Here are before and after examples of userChrome.css, as provided by MTLI, modified to use subskins. (MTLI userChrome.css samples used with permission from Mel Reyes.)

/*
 * Edit this file and copy it as userChrome.css into your
 * profile-directory/chrome/
 */

/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */





/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* set default namespace to XUL */


/*
 * Some possible accessibility enhancements:
 */
/*
 * Make all the default font sizes 20 pt:
 *
 * * {
 *   font-size: 20pt !important
 * }
 */
/*
 * Make menu items in particular 15 pt instead of the default size:
 *
 * menupopup > * {
 *   font-size: 15pt !important
 * }
 */
/*
 * Give the Location (URL) Bar a fixed-width font
 *
 * #urlbar {
 *    font-family: monospace !important;
 * }
 */

/*
 * Eliminate the throbber and its annoying movement:
 *
 * #throbber-box {
 *   display: none !important;
 * }
 */

/*
 * For more examples see http://www.mozilla.org/unix/customizing.html
 */

/*
 * Edit this file and copy it as userChrome.css into your
 * profile-directory/chrome/
 */

/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */

@import url("chrome://global/skin/subskins/window-picture-2/subskin.css");
@import url("chrome://global/skin/subskins/toolbox-logo-8/subskin.css");
@import url("chrome://global/skin/subskins/lighter-toolbars-2/subskin.css");

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* set default namespace to XUL */


/*
 * Some possible accessibility enhancements:
 */
/*
 * Make all the default font sizes 20 pt:
 *
 * * {
 *   font-size: 20pt !important
 * }
 */
/*
 * Make menu items in particular 15 pt instead of the default size:
 *
 * menupopup > * {
 *   font-size: 15pt !important
 * }
 */
/*
 * Give the Location (URL) Bar a fixed-width font
 *
 * #urlbar {
 *    font-family: monospace !important;
 * }
 */

/*
 * Eliminate the throbber and its annoying movement:
 *
 * #throbber-box {
 *   display: none !important;
 * }
 */

/*
 * For more examples see http://www.mozilla.org/unix/customizing.html
 */