Home NNL Extras Using Stylish

Using Stylish

Almost all of NNL's extra, outside-the-theme customizations rely on Stylish. Stylish is a Firefox add-on (by Jason Barnabe) that lets you create instant, on-the-fly styling instructions to customize Firefox and the web pages it displays.

Stylish's styling instructions are called user styles, userstyles, stylesheets, or just styles. (Different terms, but when talking about Stylish they all refer to the same thing: a set of styling instructions in Stylish.) These are written in CSS, and each consists of one or more CSS styling rules or other CSS instructions.

To customize NNL, you don't actually need to know CSS; for most of our customizations, you just need to know how to copy and paste from the NNL web site into Stylish, or, for the case of predefined userstyles, how to install them into Stylish from userstyles.org.

Installing Predefined Userstyles

Several NNL customizations are available as predefined userstyles which you simply install from the central web site for all userstyles, userstyles.org. Some of these were created specifically for NNL, while others just happen to be useful with NNL; you'll see both kinds in the list of Tweaks and Mods.

To install a predefined userstyle into Stylish:

  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 page on userstyles.org for a userstyle that you want to install (such as this one, for example).
  3. In the userstyles.org page, click the "Install" button. (That button's within the web page itself - not in Firefox UI.) This will open a window in which you can preview or edit the new userstyle.
  4. Preview then save or cancel the installation.

There you have it - that's all there is to it. Userstyles apply instantly, as soon as you install them; restart not required.

Creating Your Own Userstyles

Several NNL customizations are applied as userstyles that you create by copying and pasting CSS from the NNL web site into Stylish. Using Stylish this way is 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. Pick a name for your new style. It can be anything you want.
  5. In the Edit Style window, paste whatever CSS is given for the customization you want to apply. For most of them you can copy and paste straight out of the customization sample and into the Edit Style window. (For some you'll need to do a little further editing.)
  6. Preview then save or cancel your CSS in the Edit Style window.

That's all there is to it. Userstyles apply instantly, as soon as you create them; restart not required.

Once you've saved your new userstyle, 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.

Note that unless you're really up to speed with CSS, you should keep each of your customizations in its own userstyle. It's possible for there to be interference from two sets of CSS rules in the same stylesheet, so don't combine them. Keeping your userstyles separated lets you stick with copy and paste without needing to rewrite them.

Get Stylish here. And thank Jason Barnabe for his efforts maintaining his add-on all these years.