Home NNL Extras Tweaks & Mods

Tweaks & Mods

NEW! Get an early look at NNL beta builds for Firefox 4. Learn more.

Options Picture 3

Applies an alternate side image to the Options window. The image shows STS-1 lit up at night on its launch pad.

To use this image, you simply download it to your hard drive, then create a Stylish userstyle (instructions here) to tell Firefox to use it. Voilą!

Instructions:

  1. Download this image file and save it to your hard drive.
  2. Add the following code to a new Stylish userstyle.
  3. prefwindow#BrowserPreferences {
      background-image:
        url("file:///SOMELOCATION/preferences.bg.3.layered.png"),
        url("chrome://browser/skin/preferences/preferences.gradient.bg.png")
        !important;
    }
      
  4. In the above code, replace the word SOMELOCATION with the actual location of the downloaded image file. For example, if the file were located at C:\Documents and Settings\Tom\My Documents\preferences.bg.3.png, then you would add the following code to your userstyle.
    prefwindow#BrowserPreferences {
      background-image:
        url("file:///C:/Documents and Settings/Tom/My Documents/preferences.bg.3.layered.png"),
        url("chrome://browser/skin/preferences/preferences.gradient.bg.png")
        !important;
    }
      
    If on a Windows system, be sure it includes the drive letter, which Firefox needs to find it, and be sure to change any backslashes to forward slashes.
  5. Save your userstyle edits.
  6. Applies instantly; restart not required.

This mod was updated on 2012-07-10 to increase the height of the image to match the increased height of the Options/Preferences window in Firefox 15. If you've already been using this mod then, to update for Firefox 15, you'll need to redownload the updated preferences.bg.3.layered.png. If you save it to the same location as you did with the old image, your mod will continue to work with the new image.

(This mod was formerly packaged with the theme as subskin "Options-Picture-3", but it was moved out of the theme to cut the theme's download size.)

Options Picture 13

Applies an alternate side image to the Options window. The image shows STS-116 ascending from its exhaust cloud at night.

To use this image, you simply download it to your hard drive, then create a Stylish userstyle (instructions here) to tell Firefox to use it, et voilą!

Instructions:

  1. Download this image file and save it to your hard drive.
  2. Add the following code to a new Stylish userstyle.
  3. prefwindow#BrowserPreferences {
      background-image:
        url("file:///SOMELOCATION/preferences.bg.13.layered.png"),
        url("chrome://browser/skin/preferences/preferences.gradient.bg.png")
        !important;
    }
      
  4. In the above code, replace the word SOMELOCATION with the actual location of the downloaded image file. For example, if the file were located at C:\Documents and Settings\Tom\My Documents\preferences.bg.13.png, then you would add the following code to your userstyle.
    prefwindow#BrowserPreferences {
      background-image:
        url("file:///C:/Documents and Settings/Tom/My Documents/preferences.bg.13.layered.png"),
        url("chrome://browser/skin/preferences/preferences.gradient.bg.png")
        !important;
    }
      
    If on a Windows system, be sure it includes the drive letter, which Firefox needs to find it, and be sure to change any backslashes to forward slashes.
  5. Save your userstyle edits.
  6. Applies instantly; restart not required.

This mod was updated on 2012-07-10 to increase the height of the image to match the increased height of the Options/Preferences window in Firefox 15. If you've already been using this mod then, to update for Firefox 15, you'll need to redownload the updated preferences.bg.13.layered.png. If you save it to the same location as you did with the old image, you mod will continue to work with the new image.

(This mod was formerly packaged with the theme as subskin "Options-Picture-13", but it was moved out of the theme to cut the theme's download size.)

Firefox 4 about:home

Important: As of 2012/04/21, we're discontinuing this userstyle in favor of similar and superior functionality in Night Launch Companion. Rather than using this userstyle, you should use Night Launch Companion instead. Read more.


Styles the new-for-Firefox-4 about:home page. (This is what you see when you click the Home button.) Gives it dark-gray NNL styling. For Fx4+ only.

To apply this mod:

  1. Get the add-on Stylish from the Firefox Add-ons Site
  2. Get userstyle NASA Night Launch - Firefox 4 about:home

Be sure to install Stylish first. You can read Stylish instructions here.

Add Background Image to Empty Tabs

Important: As of 2012/04/21, we're discontinuing this userstyle in favor of similar and superior functionality in Night Launch Companion. Rather than using this userstyle, you should use Night Launch Companion instead. Read more.


To add a background image to empty tabs (also known as the about:blank page), get the Stylish extension and install Userstyle 11979 - NASA Night Launch - Launch Image for Empty Tabs.

Get Stylish from the Firefox Add-ons Site
Instructions for Using Stylish
Get 11979 - NASA Night Launch - Launch Image for Empty Tabs

Before using this userstyle, be sure to install the Stylish add-on first. You can read Stylish instructions here.

Important: prior to 2009-05-20, people were told how to apply this mod with userContent.css code, but that's no longer the best way and you should use the Stylish method instead. See the blog post Adding the Launch Image to the Background of Firefox Empty Tabs for a full discussion and instructions for removing the old userContent.css code if you were using that before. The code to remove:

@-moz-document url(about:blank) {
  html:not([class]) {
    background:
      url("chrome://global/skin/watermarks/about.blank.sts116-s-021.v010.jpg")
        no-repeat center center fixed black !important;
  }
}
Use Dark Background Color (But No Image) with Empty Tabs

You might prefer empty tabs (also known as the about:blank page) to have a dark background color without the background image. To do this, get the Stylish extension and install Userstyle 18085 - NASA Night Launch - Dark Background for Empty Tabs.

Note that this mod is useful only with Firefox 12 and older. As of Firefox 13, empty tabs have a dark background by default with NNL (which becomes possible because in Firefox 13 empty tabs show about:newtab rather than about:blank and because about:newtab uses CSS from within the theme whereas about:blank doesn't). As a result, this mod isn't needed with Firefox 13 and up. If you've been using it, you should disable it and/or remove it on upgrading to Firefox 13.

Get Stylish from the Firefox Add-ons Site
Instructions for Using Stylish
Get 18085 - NASA Night Launch - Dark Background for Empty Tabs

Before using this userstyle, be sure to install the Stylish add-on first. You can read Stylish instructions here.

Important: prior to 2009-05-20, people were told how to apply this mod with userContent.css code, but that's no longer the best way and you should use the Stylish method instead. See the blog post Adding the Launch Image to the Background of Firefox Empty Tabs for a full discussion. If you were using the userContent.css version of this mod, you should be sure to remove that code from userContent.css. The code to remove:

@-moz-document url(about:blank) {
  html:not([class]) {
    background: none black !important;
  }
}
Tabpanels Dark

Important: beginning with NNL Version 0.6.20081031, this mod no longer has its intended effect and isn't needed. It no longer has an effect because the part of Firefox which used to show the launch image (a region behind all browser tabs) doesn't any more, so there's no background image to remove.

This mod is still described for the benefit of people using NNL versions older than 0.6.20081031, and everything else said in this description of Tabpanels Dark applies only to them.


Some people prefer not to see the launch image while new tabs are opening. To do this, create a new userstyle in Stylish and add the following lines to it:

/* background image for pages while they are being opened */
tabbrowser tabpanels {
   background: none black !important;
  }
  

Note that this mod is not the same thing as styling the background of empty tabs, described elsewhere on this page.

Style the About:Mozilla Page

Adds a background image and styling to the about:mozilla page. (To see this page, open a new tab and enter about:mozilla in the Location Bar.)

To add this styling to the about:mozilla page, get the Stylish extension and install Userstyle 25159 - NASA Night Launch - Launch Image for about:mozilla.

Get Stylish from the Firefox Add-ons Site
Instructions for Using Stylish
Get 25159 - NASA Night Launch - Launch Image for about:mozilla

Before using this userstyle, be sure to install the Stylish add-on first. You can read Stylish instructions here.


Important: prior to 2010-02-12, people were told how to apply this mod with userContent.css code, but that's no longer the best way and you should use the Stylish method instead. The code to remove from userContent.css:

@-moz-document  url(about:mozilla) {
  html {
    background:
      url("chrome://global/skin/watermarks/about.blank.sts116-s-021.v010.jpg")
        no-repeat -200px -142px fixed black !important;
    margin-right: 1em !important;
    color: #bbb3a7 !important;
  }

  #moztext {
    font-family: Georgia,serif !important;
    text-align: right !important;
    margin-left: 30% !important;
    margin-top: 90px !important;
  }

  .f,
  em,
  strong {
    color: white !important;
  }

  #from {
    font-family: Georgia,serif !important;
    text-align: right !important;
    margin-left: 30% !important;
  }
}
Use Original Firefox Throbbers

If you want to use the original Firefox throbbers, create a new userstyle in Stylish and add these lines to it:

#navigator-throbber {
  list-style-image:
    url("chrome://global/skin/throbber/Throbber-small.png") !important;
}

#navigator-throbber[busy="true"] {
  list-style-image:
    url("chrome://global/skin/throbber/Throbber-small.gif") !important;
}

toolbar[mode="text"] #navigator-throbber {
  list-style-image:
    url("chrome://global/skin/throbber/Throbber-small.png") !important;
}
toolbar[mode="text"] #navigator-throbber[busy="true"] {
  list-style-image:
    url("chrome://global/skin/throbber/Throbber-small.gif") !important;
}
Compact Menubar (Smaller Throbber)

For a smaller throbber and more compact menu bar area, create a new userstyle in Stylish and add these lines to it:

#navigator-throbber {
    list-style-image:
      url("chrome://browser/skin/prelaunch.3.23by16.gif") !important;
}
#navigator-throbber[busy="true"] {
    list-style-image:
      url("chrome://browser/skin/inflight.2.23by16.gif") !important;
}
#menubar-items {
    margin-top: 0px !important;
}
#menubar-items > #main-menubar > menu {
    margin-bottom: 0px !important;
}

Plain Common Dialogs, Prompts and Alerts

Some people prefer their common dialogs, prompts and alerts without shuttle imagery. For plain common dialogs, create a new userstyle in Stylish and add these lines to it:

#commonDialog {
  padding: 10px !important;
  background: none #181818 !important;
}

dialog#commonDialog image#info\.icon.question-icon {
  display: -moz-box !important;
}

vbox#info\.box description {
  /* -moz-box-pack: center; this has no effect */
  text-align: start !important;
}

Dark Google

Important Update, July 28, 2010: Warning: This userstyle is out of date and should not be used at this time.

Early in 2010, Google updated its pages such that this userstyle no longer works. Until it’s updated by Valacar (its author), this userstyle won't work and you shouldn’t use it. If you're already using it, turn it off by going to Stylish's list of userstyles and click the 'Disable' button for this one.


Important Update, January 1, 2010: Note that none of Valacar's styles deal with the Firefox-specific Google page. (They handle http://www.google.com, but not http://www.google.com/firefox, which is the one you see if you use Firefox's search box in the nav bar.) For that, you'll need an additional Stylish stylesheet, described below.


Get a dark version of Google instead of the bright white one, and spare your eyes. This mod doesn't involve userChrome.css; instead, for this one, you use the Stylish extension and install one of several available Stylish styles by Valacar.

Get Stylish from the Firefox Add-ons Site
Instructions for Using Stylish
Get Google Web Search - dark gray redesign (vC) by Valacar
Get Google Video - dark gray redesign (vC) by Valacar
Get Google Image Search - dark gray redesign (vC) by Valacar

Before using these styles, be sure to install the Stylish add-on first. You can read Stylish instructions here.

Thanks to netMASA and Shingoshi for pointing these out.

NNL Dark Google for Firefox

Important Update, July 28, 2010: Warning: This userstyle is out of date and should not be used at this time.

Early in 2010, Google updated its pages such that this userstyle no longer works. Until the userstyle from which this is derived is updated by Valacar (its author), this userstyle won't work and you shouldn’t use it. If you're already using it, turn it off by going to Stylish's list of userstyles and click the 'Disable' button for this one.


Valacar's styles (described above) handle several Google pages, but they don't handle the Firefox-specific Google search page (e.g. http://www.google.com/firefox) that you see when you use the search box in the Firefox nav bar. To style that page, you need the following Stylish stylesheet.

This stylesheet, unlike others, is too big to host on userstyles.org, so instead you get it here, installing it as follows.

  1. Get Stylish from the Firefox Add-ons site.
  2. Restart Firefox after installing Stylish, then return to this page.
  3. Open the stylesheet in a new tab, then switch to that tab.
  4. In the Firefox status bar (at the bottom of the Firefox window), right-click on the Stylish icon to open the menu.
  5. In the menu that opens, pick "Install file..." (Make sure you're looking at the tab containing the CSS stylesheet, or you won't see the menu item for installing the file.)
  6. This should bring up a dialog box titled "Install user style". If for some reason you instead see the dialog box titled "Edit user style", click the "Switch to Install" button.
  7. In the "Install user style" dialog, give the style some name (like "NNL Google Search Firefox") then click the "Install" button.

Note also:

  • The stylesheet is based (with permission) on Valacar's original stylesheet. I'm not taking that one over. I'm just copypasting his code into my stylesheet, then adding the bits that handle the Firefox search page. If he stops updating his, then this stylesheet won't stay current either.
  • It's very possible that Google will make some change to their search page that makes this style stop working or even impossible to maintain. Be warned.
  • If something stops working, it's up to you -- yes, that means you -- to raise the alarm. If the breakage is specific to the Firefox search page, I'll add it to my to-do list. Contact information here.

Many thanks to Valacar for permission to fork his code.

Gmail Redesigned (by Globex Designs)

Google Dark took care of the Google search page; Gmail Redesigned by Global Designs takes care of Gmail, and does it ever! This Firefox add-on redefines Gmail's look from top to bottom in a dark style that couldn't be more professional. Check it out: Gmail Redesigned (by Globex Designs).

Historical note: this add-on was previously represented as a Stylish stylesheet, but has since been reprogrammed as a full-on Firefox extension. This lets it do more things (allowing it to include executable code) than it could in Stylish form. The userstyles.org link redirects to the Globex website.

NASA Night Launch - Firebug Console

NASA Night Launch styles some parts of the Firebug add-on, but to handle more, get this Stylish userstyle. This mod styles the contents of the error console in Firebug to be a little more harmonious with a dark theme like NASA Night Launch. Works with NASA Night Launch, but (since it relies on the presence of icons with certain names at certain locations within the theme) may or may not work with other themes. You'll have to try it and see.

To apply this mod:

  1. Get the add-on Stylish from the Firefox Add-ons Site
  2. Get userstyle NASA Night Launch - Firebug Console

Be sure to install Stylish first. You can read Stylish instructions here.

NNL for ScribeFire

NASA Night Launch styles most parts of the ScribeFire extension, but some parts are beyond the reach of theme technology. To handle the rest of it, get this userstyle.

To apply this mod:

  1. Get the add-on Stylish from the Firefox Add-ons Site
  2. Get userstyle NNL for ScribeFire

Be sure to install Stylish first. You can read Stylish instructions here.

Dark ChatZilla Motif

ChatZilla is a popular add-on and IRC chat client for Firefox and other Mozilla-based apps. You can change its appearance by selecting and using what ChatZilla calls motifs - that is, stylesheets that apply to whatever is in the chat window.

To add NASA Night Launch styling to ChatZilla with a motif:

  1. Download and save this motif file to your computer at the location of your choice.
  2. In Firefox, open the ChatZilla window with Tools > ChatZilla.
  3. In the ChatZilla menubar, pick ChatZilla > Preferences...
  4. In the ChatZilla Preferences window, pick Global Settings then the Appearance tab.

There you will see three values: Current Motif, Light Motif, and Dark Motif. The last two, Light Motif and Dark Motif, define which motifs will be used in ChatZilla's menu View > Color Scheme.

  1. To use your downloaded motif as the Light or Dark Motif, click the corresponding "Browse..." button, browse to the location on your filesystem where you saved the file, then pick the downloaded file.
  2. Finally, use the ChatZilla menu View > Color Scheme to apply the new motif.

Alternatively, you could directly set Current Motif to use the downloaded file, as shown in this screenshot.

ChatZilla on XULRunner with NNL

ChatZilla is a popular IRC chat client for Firefox and other Mozilla-based apps. ChatZilla is frequently used as a Firefox add-on, and happily so by many users. However, some people like to use it outside of Firefox, as a stand-alone application, so they don't have to drop off IRC every time they restart the browser.

To run ChatZilla as a stand-alone app, follow the instructions provided by ChatZilla developers. This may be new to you, but it's pretty straightforward if you give it your full attention for a few minutes. You will need to read it point-by-point.

Instructions from ChatZilla developers: http://chatzilla.rdmsoft.com/xulrunner/

STEP 1: Set up ChatZilla as a stand-alone app.

Just follow the developers' instructions, they're good. Here are some extra pointers, for context.

  1. There are two things to download and install: 1) XULRunner, and 2) a special ChatZilla build, both available at the rdmsoft.com address above.
  2. Optional general overview of XULRunner.
  3. Note that ChatZilla-for-XULRunner is DIFFERENT FROM ChatZilla the extension.
    • Let's use the term ChatZilla-XR to refer to this ChatZilla-for-XULRunner.
    • It's a .zip, not a .xpi.
    • It's a custom build with extra data (application.ini, etc.) to make it run with XULRunner.
    • It's not available on AMO .. it's only available at the above location.
  4. First install XULRunner as stated in the instructions at the rdmsoft.com address above.
  5. Then install ChatZilla-XR as a standalone XULRunner app using --install-app as stated in the instructions at the rdmsoft.com address above.
    • You'll need to get a command prompt with full admin privileges for this.
    • Can be installed at a location of your choosing by specifying a destination.
      • e.g., xulrunner --install-app chatzilla-0.9.86-xr.zip d:\app\chatzilla
  6. You may want to create a shortcut to the result for easy launching.
    • If installing to the above destination, for example, the app would be located at d:\app\chatzilla\ChatZilla\chatzilla.exe .
    • A more typical (default) install would be located relative to C:\Program Files or similar as appropriate to your OS.

OPTIONAL STEP 2: You might want to copy over your ChatZilla settings (prefs) from Firefox, if you've already been using ChatZilla with Firefox.

  1. Open your Firefox profile folder.
    • Menubar > Help > Troubleshooting Info, Open Containing (Profile) Folder.
  2. With a text editor, edit prefs.js in the Firefox profile folder.
  3. Find and copy all lines for prefs beginning with extensions.irc (these are the ChatZilla prefs).
  4. Close prefs.js. You didn't change anything, so don't save it. Maybe paste the copied lines in a temp text file so you don't lose them.
  5. Open the ChatZilla-XR profile folder.
    • To find it: run ChatZilla-XR, type /pref profilePath and the result is displayed.
    • Use a file browser e.g. Windows Explorer to view that folder.
  6. EXIT CHATZILLA-XR BEFORE EDITING PREFS.JS.
  7. With a text editor, edit prefs.js in the ChatZilla-XR profile folder (from /pref profilePath).
  8. Paste in the pref lines copied (in step 2.3) from prefs.js from the Firefox profile.
  9. Save and close prefs.js.
  10. Your prefs are now copied. Run ChatZilla-XR to check.

STEP 3 (FINALLY): To install and use NNL with ChatZilla-XR:

  1. Note that this only works with themes that have been modified to install with ChatZilla-XR.
    • Available in official NNL releases from AMO as of version 0.6.20110508, continuing up to version 0.6.20120421.
    • NNL versions newer than 0.6.20120421 do *not* support ChantZilla-XR. (This is a consequence of dropping support for Firefox 3.6 from NNL as we did in newer versions. Chatzilla-XR is built on top of a version of XULRunner that's the equivalent of Firefox 3.6, meaning you need to use an NNL version that works with Firefox 3.6.) You should just use NNL 0.6.20120421.
  2. First make sure you're able to start and run ChatZilla-XR with its default theme.
  3. Save the NNL .jar file from AMO to your hard drive, from here.
  4. In ChatZilla-XR, with Menubar > ChatZilla > Add-ons, open the Add-ons Manager.
  5. Drag and drop the NNL .jar file to the open Add-ons Manager.
  6. Close Add-ons Manager, exit ChatZilla-XR, restart.
  7. You should be good to go at this point.

That's it. You might also want to look at using a custom NNL-styled ChatZilla motif to style the contents of the chat windows themselves.

Dark Windows Desktop Themes

Look for Zune and Royale Noir. And of course Aero Glass is just about perfect.

ImageTweak Extension

By default, when displaying individual images (like when you're viewing a random JPEG on its own, as opposed to when it's part of a web page), Firefox shows a bright white background behind the image. With ImageTweak, a brilliant extension by CAFxX (Carlos Ferraris) available from AMO, you can set the background color that shows behind these images to something other than snow-blind white. Your retinas will thank you.

Fix Bookmarks Menu on Mac OS X

Important: beginning with NNL Version 0.6.20091031, this mod is no longer needed because the Mac-specific styling has been built into the NNL itself.

This mod is still described for the benefit of people using NNL versions older than 0.6.20091031, and everything else said in this description of Fix Bookmarks Menu on Mac OS X applies only to them.


For Mac OS X users only: use this mod to restore full Bookmarks and History menu icon styling on OS X. See the blog post Using NASA Night Launch with Firefox 3.0.x on the Mac with OS X for a full discussion of this mod.

Important: This mod is for OS X users only. Users of Firefox on Windows and Linux should not use this mod.

To apply this mod:

  1. Get the add-on Stylish from the Firefox Add-ons Site
  2. Get userstyle OS X Bookmark Menu Icons for NASA Night Launch

Be sure to install Stylish first. You can read Stylish instructions here.

Hide About Fx4 Fine Print

For people using the NASA Night Launch theme for Firefox 4, cleans up the About Firefox window by hiding the fine print at the bottom. For Fx4+ only.

To apply this mod:

  1. Get the add-on Stylish from the Firefox Add-ons Site
  2. Get userstyle NASA Night Launch - Hide About Fx4 Fine Print

Be sure to install Stylish first. You can read Stylish instructions here.

Orange Connecting Throbber

This makes the tab throbber a bright orange, to match the color of the Firefox button as used on Windows. NNL itself used the orange throbber for Firefox 4, but we're switching back to our time-tested silvery throbber with the next NNL release. This userstyle gives the orange throbber back for those users who want it.

To apply this mod:

  1. Get the add-on Stylish from the Firefox Add-ons Site
  2. Get userstyle NASA Night Launch - Orange Connecting Throbber

Be sure to install Stylish first. You can read Stylish instructions here.

NASA Night Launch - ChromaTabs Plus Styling

This adjusts styling for people using the add-on ChromaTabs Plus. Use this userstyle only if using both NNL and ChromaTabs Plus, and turn it off otherwise or your browser tabs won't look right. This is a bit rough - ChromeTabs Plus needs a few changes to make it fully themeable - but enough people asked for this to make it worth posting.

To apply this mod:

  1. Get the add-on Stylish from the Firefox Add-ons Site
  2. Get userstyle NASA Night Launch - ChromaTabs Plus Styling

Be sure to install Stylish first. You can read Stylish instructions here.

Night Launch Companion

Night Launch Companion is an experimental Firefox add-on for customizing the NASA Night Launch theme. This add-on enables advanced styling and optional enhancements not possible with theme technology alone. Learn more.

NASA Night Launch - Bright Favicon Background

The favicons of certain sites have a dark figure over a transparent background, which can be hard to see with a dark theme like NASA Night Launch. This stylesheet adds a bright background to the favicon shown in the browser tab for certain sites known to need it. (Currently: the New York Times, the Register, the Daily Mail, the Washington Post, GitHub, and certain Mozilla sites.)

To apply this mod:

  1. Get the add-on Stylish from the Firefox Add-ons Site
  2. Get userstyle NASA Night Launch - Bright Favicon Background

Be sure to install Stylish first. You can read Stylish instructions here.

GitHub Dark

This stylesheet is a very nice restyling of GitHub in dark gray colors, brought to you by silverwind, Mottie, and several more contributors.

To apply this mod:

  1. Get the add-on Stylish from the Firefox Add-ons Site
  2. Get userstyle GitHub Dark

Be sure to install Stylish first. You can read Stylish instructions here.

NASA Night Launch - Classic Theme Restorer Styling

Adds styling for some of the most prominent toolbarbuttons (back, forward, stop, and reload) added by CTR (Classic Theme Restorer). CTR does a lot and this userstyle only deals with part of its UI. Feel free to follow along and improve the code on GitHub.

To apply this mod:

  1. Get the add-on Stylish from the Firefox Add-ons Site
  2. Get userstyle NASA Night Launch - Classic Theme Restorer Styling

Be sure to install Stylish first. You can read Stylish instructions here.