Home NNL Extras Using Subskins

Using Subskins

Wondering what subskins are for and how to use them? Read on for more.

What is a Subskin

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.

Choosing and Applying Subskins

To apply a subskin, you use the add-on Stylish, and create a little CSS stylesheet with it to apply one or more subskins of your choosing. This is all done with copy and paste with CSS which we give you. The CSS that you paste determines which subskins you apply.

It's really pretty easy. Just follow these steps.

  1. Make sure you have the add-on Stylish installed from AMO. The first time you install Stylish, you'll need to restart Firefox.
  2. Go to the Add-ons Manager (Menubar > Tools > Add-ons) and click the big Stylish icon there along the left side to show the list of user styles. (Alternatively, pick "Manage Styles" from the Stylish toolbarbutton in your toolbar.)
  3. Click the "Write New Style" button. This will open a window in which you can edit your new style's CSS.
  4. In the Edit Style window, for each subskin you want to apply (you can choose zero, one, or many) add a line of the form:
@import url("chrome://global/skin/subskins/window-picture-2/subskin.css");

which you copy-and-paste from the list of available subskins. That line adds a subskin called "window-picture-2".

The next example shows three different import statements being used at the same time. Again, this is what you would paste into the Edit Style window if these were the subskins you wanted to use. 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");
  1. Preview then save or cancel your CSS in the Edit Style window.

That's all there is to it.

Once you've saved your CSS, you'll see it in the list of Stylish userstyles. From there, you can easily turn it off and on or go back and edit it until you have everything the way you want it.

userChrome.css and userContent.css

Long-time users should note that this is a change from the old way of using subskins. Before, we suggested editing userChrome.css and userContent.css, but that method had some drawbacks (mainly that you had to restart the browser to make any changes, whereas with Stylish it's all instant-apply, easy on and easy off, once you have Stylish itself installed).

IMPORTANT: If you had any subskins applied with userChrome.css and/or userContent.css, be sure to remove those from userChrome.css/userContent.css if you're applying them with Stylish instead. And if you don't know what userChrome.css and userContent.css are .. that's a good thing. Forget they were ever mentioned; you don't need to know. Just use Stylish and you'll be good to go.