Subskins List
Use these subskins to customize Firefox beyond what the theme already does. To use a subskin, edit your userChrome.css (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. |  |
| 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. |  |
| 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.) |  |
| 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. |  |
| 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. |  |
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 other subskins in userChrome.css. Other subskins also set the corner radius, and they would override this subskin unless this subskin is placed after them in userChrome.css. |
| Code:@import url("chrome://global/skin/subskins/toolbarbutton-corner-radius-4px/subskin.css"); |
| Glowy Orange Menu Highlights 1 | |
| 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. IMPORTANT: Unlike most other subskins, this one needs to go in both userChrome.css AND userContent.css. That's because this changes scrollbars that appear both in web pages and in the rest of the Firefox user interface. |
| 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"); |
Notes
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.