Tweaks & Mods

This page lists many of the creative ways you can tweak your Firefox to get it just like you want. Most of these involve editing your userChrome.css or userContent.css files (instructions here). Also be sure to check out the subskins that come packaged with NNL.

Here's what you'll find on this page.

• Options Picture 3
• Options Picture 13
• Add Background Image to Empty Tabs
• Use Dark Background Color (But No Image) with Empty Tabs
• Tabpanels Dark
• Style the About:Mozilla Page
• Use Original Firefox Throbbers
• Compact Menubar (Smaller Throbber)
• Plain Common Dialogs, Prompts and Alerts
• Dark Google
• Gmail Redesigned (by Globex Designs)
• NNL for ScribeFire
• Dark Windows Desktop Themes
• ImageTweak Extension
• Fix Bookmarks Menu on Mac OS X

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, edit userChrome.css to tell Firefox to use it, then restart Firefox. Voilą!

Instructions:

1. Download this image file and save it to your hard drive.
2. Add the following code to your userChrome.css. (For instructions for finding and editing userChrome.css, see this page.)

   prefwindow#BrowserPreferences {
     background-image:
       url("file:///SOMELOCATION/preferences.bg.3.png")
       !important;
   }
     

3. In the above code, replace the word SOMELOCATION with the actual location of the downloaded image file. For example, if the file is located at C:\Documents and Settings\Tom\My Documents\preferences.bg.3.png, then you would add the following code to your userChrome.css.

   prefwindow#BrowserPreferences {
     background-image:
       url("file:///C:/Documents and Settings/Tom/My Documents/preferences.bg.3.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.
4. Save your userChrome.css edits.
5. Restart Firefox, and enjoy your new look.

Important: some tweaks go in userChrome.css and some go in userContent.css. This one goes in userChrome.css.

(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.)

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, edit userChrome.css to tell Firefox to use it, then restart Firefox. Voilą!

Instructions:

1. Download this image file and save it to your hard drive.
2. Add the following code to your userChrome.css. (For instructions for finding and editing userChrome.css, see this page.)

   prefwindow#BrowserPreferences {
     background-image:
       url("file:///SOMELOCATION/preferences.bg.13.png")
       !important;
   }
     

3. In the above code, replace the word SOMELOCATION with the actual location of the downloaded image file. For example, if the file is located at C:\Documents and Settings\Tom\My Documents\preferences.bg.13.png, then you would add the following code to your userChrome.css.

   prefwindow#BrowserPreferences {
     background-image:
       url("file:///C:/Documents and Settings/Tom/My Documents/preferences.bg.13.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.
4. Save your userChrome.css edits.
5. Restart Firefox, and enjoy your new look.

Important: some tweaks go in userChrome.css and some go in userContent.css. This one goes in userChrome.css.

(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.)

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.

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

This mod doesn't involve userChrome.css/userContent.css; instead, for this one, you use Stylish, because it has the advantage that you can easily turn it on and off without restarting Firefox.

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;
  }
}

You might prefer to color the background of empty tabs (also known as the about:blank page) with a dark color, without the background image. To do this, get the Stylish extension and install Userstyle 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.

This mod doesn't involve userChrome.css/userContent.css; instead, for this one, you use Stylish, because it has the advantage that you can easily turn it on and off without restarting Firefox.

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;
  }
}

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, add the following code to your userChrome.css:

/* 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.

Important: some tweaks go in userChrome.css and some go in userContent.css. This one goes in userChrome.css.

For instructions on finding and editing userChrome.css and userContent.css, see Using Subskins.

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

To apply this tweak, add the following code to your 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;
  }
}

Important: some tweaks go in userChrome.css and some go in userContent.css. This one goes in userContent.css.

For instructions on finding and editing userChrome.css and userContent.css, see Using Subskins.

If you want to use the original Firefox throbbers, add these lines to your userChrome.css:

#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;
}

For a smaller throbber and more compact menu bar area, add this code to userChrome.css:

#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;
}

Some people prefer their common dialogs, prompts and alerts without shuttle imagery. For plain common dialogs, add this code to userChrome.css:

#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;
}

Because this is CSS rather than an @import statement, this code goes after any @namespace statement in your userChrome.css.

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.

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.

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 in Stylish form. The userstyles.org link redirects to the Globex website.

NASA Night Launch styles most parts of the ScribeFire extension, but some parts are beyond the reach of theme technology. To handle the rest, get the Stylish style NASA Night Launch for ScribeFire. This mod doesn't involve userChrome.css; instead, for this one, you use the Stylish extension and install a Stylish style written for this purpose.

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

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

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.

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, get the add-on Stylish and install Userstyle 11097 - OS X Bookmark Menu Icons for NASA Night Launch.

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