Home NNL Extras Subskins List

Subskins List

Use these subskins to customize Firefox beyond what the theme already does. To use a subskin, create a stylesheet with the add-on Stylish (instructions here) and add to it one or more of the @import statements listed below.

Subskin descriptions use the term "toolbox". To learn more about this term, see Note 1 below.

 
Style 1
Adds background images (exhaust cloud, long-range shot of rising shuttle) to main browser window. Also fine-tunes toolbar appearance for compatibility.Preview thumbnail of style 1
Code:
@import url("chrome://global/skin/subskins/style-1/subskin.css");
Style 2
Adds background images (exhaust cloud, close-up of underside of rising shuttle) to main browser window. Also fine-tunes toolbar appearance for compatibility.Preview thumbnail of style 2
Code:
@import url("chrome://global/skin/subskins/style-2/subskin.css");
Style 3
Styles the toolbars and toolbar buttons of the main browser window to have the darker appearance of the theme as originally released in June 2007. (The default appearance was changed in September 2007. This subskin gives it back for those who want it.)Preview thumbnail of style 3
Code:
@import url("chrome://global/skin/subskins/style-3/subskin.css");
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. (If you don't add any alternate side image, the Options window will still show its default side image.)

Unlike other subskins, this one is available for download (with instructions) from this website. Click here to get it.
Preview thumbnail of options picture 3
Options Picture 13
Applies an alternate side image to the Options window. The image shows STS-116 ascending from its exhaust cloud at night. (If you don't add any alternate side image, the Options window will still show its default side image.)

Unlike other subskins, this one is available for download (with instructions) from this website. Click here to get it.
Preview thumbnail of options picture 13
Mix and Match Subskins

If you want to tweak it yourself, you can mix and match these subskins.

Window Picture 2
Adds a background image to main browser window. The background image shows a close-up of the base of the orbiter with External Tank and Solid Rocket Boosters as it leaves the pad at night. Image is placed at top right corner, behind toolbox and toolbars.
Code:
@import url("chrome://global/skin/subskins/window-picture-2/subskin.css");
Window Picture 4
Adds a background image to main browser window. The background image shows the orbiter ascending from its exhaust plume shortly after clearing the tower. Image is placed at top right corner, behind toolbox and toolbars.
Code:
@import url("chrome://global/skin/subskins/window-picture-4/subskin.css");
Toolbox Logo 8
Adds a night launch exhaust cloud background image to the left side of the toolbox at the top of the main browser window. This is layered over any background image in the window.
Code:
@import url("chrome://global/skin/subskins/toolbox-logo-8/subskin.css");
Transparent Toolbars
Sets the background (both color and image) to transparent for all toolbars at the top of the main browser window; this includes the nav bar and the menu toolbar.
Code:
@import url("chrome://global/skin/subskins/transparent-toolbars/subskin.css");
Lighter Navbar Sideways Gradient
Adds a lighter, semi-transparent background gradient, with a fade-in left-to-right, to the nav bar in the main browser window.
Code:
@import url("chrome://global/skin/subskins/lighter-navbar-sideways-gradient/subskin.css");
Lighter Toolbars Sideways Gradient
Adds a lighter, semi-transparent background gradient, with a fade-in left-to-right, to toolbars other than the menubar and navbar at the top of the main browser window. Also removes the top border from these toolbars.
Code:
@import url("chrome://global/skin/subskins/lighter-toolbars-sideways-gradient/subskin.css");
Darker Menubar Background
Puts a semi-transparent dark color block behind the menu across the top of the main browser window. This helps keep the menu visible even if you're using a lighter background image for the window or the toolbox.
Code:
@import url("chrome://global/skin/subskins/darker-menubar-background/subskin.css");
Lighter Sidebar
Adds a semi-transparent lighter sidebar header to all sidebars in the main browser window. This allows some of the window's background image and color to show through (but not any image from the toolbox, which stops just above the sidebar).
Code:
@import url("chrome://global/skin/subskins/lighter-sidebar/subskin.css");
Lighter Toolbar Button Borders
Lightens the borders of toolbar buttons in the nav bar of the main browser window. Changes nothing but the border color.
Code:
@import url("chrome://global/skin/subskins/lighter-toolbarbutton-borders/subskin.css");
Lighter Toolbar Button Borders 2
Lightens the borders of toolbar buttons in the nav bar of the main browser window (even more than with subskin lighter-toolbarbutton-borders). Changes nothing but the border color.
Code:
@import url("chrome://global/skin/subskins/lighter-toolbarbutton-borders-2/subskin.css");
Lighter Toolbar Buttons
Lightens the background color of toolbar buttons in the nav bar of the main browser window.
Code:
@import url("chrome://global/skin/subskins/lighter-toolbarbuttons-1/subskin.css");
Lighter Toolbar Textboxes
Adds translucent background and lighter borders to textboxes in toolbars in the main browser window.
Code:
@import url("chrome://global/skin/subskins/lighter-toolbar-textboxes/subskin.css");
Lighter Toolbars
Adds lighter background color and gradient (solid, not transparent) to toolbars other than the menubar and navbar in the main browser window.
Code:
@import url("chrome://global/skin/subskins/lighter-toolbars/subskin.css")
Lighter Toolbars 2
Adds lighter background color and transparent gradient to toolbars other than the menubar and navbar in the main browser window. Also removes the top border on these toolbars.
Code:
@import url("chrome://global/skin/subskins/lighter-toolbars-2/subskin.css");
Darker Toolbar Separators
Darkens the color of toolbar separators in toolbars of the main browser window. Use for better contrast against whatever background you choose.
Code:
@import url("chrome://global/skin/subskins/darker-toolbarseparators/subskin.css");
Lighter Toolbar Separators
Lightens the color of toolbar separators in toolbars of the main browser window. Use for better contrast against whatever background you choose.
Code:
@import url("chrome://global/skin/subskins/lighter-toolbarseparators/subskin.css");
Lighter Go Button
Lightens the background color of the "Go" button at the top of the main browser window. For Firefox 3, also lightens the Star button, because it adjoins the Go button and should be styled similarly.
Code:
@import url("chrome://global/skin/subskins/lighter-go-button/subskin.css");
Toolbar Button Corner Radius 4 Pixels
This subskin is for Firefox 3.0 users. Use this subskin with Firefox 3.0 to make browser toolbar buttons look just as rounded as with Firefox 2.0. (If you don't use this subskin, toolbar buttons will look more square with Firefox 3.0 than with Firefox 2.0. This is because Firefox 3.0 draws a smaller curve for corners than Firefox 2.0 does, even when the same corner radius is used. Accordingly, this subskin specifies a larger value for the radius than in other subskins.)

IMPORTANT: Make sure this subskin is placed after any other subskins. Other subskins also set the corner radius, and they would override this subskin unless this subskin is placed after them.
 
Code:
@import url("chrome://global/skin/subskins/toolbarbutton-corner-radius-4px/subskin.css");
Glowy Orange Menu Highlights 1
Status OK Status:   Tested 2011-04-17 (Get Help)
Updated:   2011-04-16
Status OK Works with:   Fx3.6 - Fx4.0.*
Status OK Platform:   Windows and Linux only
This subskin sets the background color of highlighted menu items to glowy orange (the same color as for selected tree and listbox items). This is for users who want higher-contrast highlighting (to make it easier to see) or who just like the glowy orange color.
 
Code:
@import url("chrome://global/skin/subskins/glowy-orange-menu-highlights-1/subskin.css");
Fancy Scrollbars 2
This subskin styles scrollbars with a smoother treatment than the default. Firefox 2 only.
 
Code:
@import url("chrome://global/skin/subskins/fancy-scrollbars-2/subskin.css");
Darker Toolbar Textbox Borders
This subskin darkens borders (and only the borders) for all textboxes in the toolbox of the main browser window.
Code:
@import url("chrome://global/skin/subskins/darker-toolbar-textbox-borders/subskin.css");
Visible URL Bar Search Splitter
This subskin makes visible the splitter in the main toolbar between the location bar and the search bar. Firefox 3 only.
Code:
@import url("chrome://global/skin/subskins/visible-urlbar-search-splitter/subskin.css");
Firefox Button Default Orange Dark Border
This subskin uses the default orange color for the Firefox button when not in private browsing mode. Unlike default styling, this omits the white outer border from the button, making it better for people using certain alternate desktop themes. (The white border goes with default Windows desktop themes, but can look out of place with a dark desktop.) Only changes button appearance when NOT in private browsing mode. Does nothing unless on MSWindows.
Code:
@import url("chrome://global/skin/subskins/firefox-button-default-orange-darkborder/subskin.css");
Firefox Button Default Private Dark Border
This subskin uses the NNL-default desaturated maroon-purple color for the Firefox button when in private browsing mode. Unlike default styling, this omits the white outer border from the button, making it better for people using certain alternate desktop themes. (The white border goes with default Windows desktop themes, but can look out of place with a dark desktop.) Only changes button appearance when in private browsing mode, and not otherwise. Does nothing unless on MSWindows.
Code:
@import url("chrome://global/skin/subskins/firefox-button-default-private-darkborder/subskin.css");
Firefox Button Dark Gray 1
This subskin uses a dark gray color for the Firefox button when not in private browsing mode. Only changes button appearance when NOT in private browsing mode. Does nothing unless on MSWindows.
Code:
@import url("chrome://global/skin/subskins/firefox-button-dark-gray-1/subskin.css");
Firefox Button Dark Gray 1 Dark Border
This subskin uses a dark gray color for the Firefox button when not in private browsing mode. Unlike firefox-button-dark-gray-1, this one omits the white outer border from the button, making it better for people using certain alternate desktop themes. (The white border goes with default Windows desktop themes, but can look out of place with a dark desktop.) Only changes button appearance when NOT in private browsing mode. Does nothing unless on MSWindows.
Code:
@import url("chrome://global/skin/subskins/firefox-button-dark-gray-1-darkborder/subskin.css");
Firefox Button Dark Gray 2
This subskin uses a dark gray color for the Firefox button when not in private browsing mode. Only changes button appearance when NOT in private browsing mode. Does nothing unless on MSWindows.
Code:
@import url("chrome://global/skin/subskins/firefox-button-dark-gray-2/subskin.css");
Firefox Button Dark Gray 2 Dark Border
This subskin uses a dark gray color for the Firefox button when not in private browsing mode. Unlike firefox-button-dark-gray-1, this one omits the white outer border from the button, making it better for people using certain alternate desktop themes. (The white border goes with default Windows desktop themes, but can look out of place with a dark desktop.) Only changes button appearance when NOT in private browsing mode. Does nothing unless on MSWindows.
Code:
@import url("chrome://global/skin/subskins/firefox-button-dark-gray-2-darkborder/subskin.css");
Firefox Button Private Purple 1
This subskin uses the original purple color from the default theme for the Firefox button when in private browsing mode. NNL uses its own lower-impact maroon-purple when in private browsing mode, but this subskin restores the original purple. Only changes button appearance when in private browsing mode, and not otherwise. Does nothing unless on MSWindows.
Code:
@import url("chrome://global/skin/subskins/firefox-button-private-purple-1/subskin.css");
Firefox Button Private Purple 1 Dark Border
This subskin uses the original purple color from the default theme for the Firefox button when in private browsing mode. NNL uses its own lower-impact maroon-purple when in private browsing mode, but this subskin restores the original purple. Unlike firefox-button-private-purple-1, this one omits the white outer border from the button, making it better for people using certain alternate desktop themes. (The white border goes with default Windows desktop themes, but can look out of place with a dark desktop.) Only changes button appearance when in private browsing mode, and not otherwise. Does nothing unless on MSWindows.
Code:
@import url("chrome://global/skin/subskins/firefox-button-private-purple-1-darkborder/subskin.css");
Notes
  1. Subskin descriptions use the term "toolbox". Toolbox (in Firefox developer-speak) refers to the part of the Firefox window that holds all the visible toolbars, up at the top of the browser window. The toolbox holds the menu bar, the Navigation Toolbar, the Bookmarks Toolbar, and whatever other toolbars you may have added.

    The toolbox region includes everything at the top of the browser window, down to but not including the contents of the current web page. It also excludes any browser tabs and any visible sidebar. The toolbox runs the full width of the browser window, from one side to the other.

    Firefox draws the contents of the toolbox by layering background colors and images. The overall window is drawn in back (farthest from the user), the toolbox is layered over the window (so that the window background shows through wherever the toolbox is transparent), and toolbars are layered over the toolbox (so that the toolbox shows through wherever the toolbars are transparent). Toolbar buttons are drawn last of all, closest to the user (you).

    The toolbox is a single area that lies behind all toolbars, so any background color and image in the toolbox will appear behind all of the toolbars, and not just behind any single toolbar.