> View More Ads <

Theme-specific Style Overrides for Firefox and Mozilla Themes

What is a userChrome.css Override?

A theme design contains CSS statements that define the look and feel of the theme. These include borders, background-colors, images, dimensions, etc. that are applied to the various elements that make up the browser user interface. The user can override most of these styles by adding CSS stylesheet changes to their userChrome.css file.

Where does the userChrome.css file reside?

This file resides in your Profile's chrome folder. If one does not exist, first look for a userChrome-example.css file and if it exists, rename it to userChrome.css. If it does not exist, simply create a text file in the folder and name it, userChrome.css. Additionally, the Mr Tech Toolkit extension makes locating and editing the userChrome.css much more convenient.

How do I make the changes?

Simply use your favorite text editor (e.g., notepad on Windows) and add the desired style changes below.

Will these overrides affect other themes?

No. The overrides listed below should be specific to the theme whose window element's theme attribute matches the theme ID specified in the override selector, so these changes should not be reflected in other themes.

Theme ID? Do you mind explaining what the heck that is?

Not at all. All of the themes available on this site have been designed to have their own unique theme ID. By prefacing your userChrome.css style overrides with a selector rule of the form, 'window[theme="themeID"] ' this will insure that the override will only act on the theme having that particular themeID. The table below lists the themes along with their associated theme ID.

So, are you ever going to provide override examples?

Certainly, sample overrides are listed below with a small comment above each one. Note: it is recommended that you include comment(s) with the override in the userChrome.css file so that in the future it will be easier to recall what it was intended for.

/*
 * Remove browser tab favicon on Sky Pilot Classic
 */
window[theme="SPC"] .tab-icon-image {
  display: none !important;
}
        

/*
 * Change menubar text color to white on Aluminum Alloy and Venerable Modern
 */
window[theme="ALY"] #main-menubar menu > menu,
window[theme="M18"] #main-menubar menu > menu {
  color: #ffffff !important;
}
        

/*
 * Change the statusbar color to black on Simple Green
 */
window[theme="GRN"] #status-bar {
  -moz-appearance: none !important;
  background: #000000 !important;
} 
        

/*
 * Disable the splitter grippies on
 *   Aluminum Alloy
 *   Simple Green
 *   Simply Blue
 *   Sky Pilot Classic
 *   Toy Factory
 */
window[theme="ALY"] splitter grippy,
window[theme="GRN"] splitter grippy,
window[theme="BLU"] splitter grippy,
window[theme="SPC"] splitter grippy,
window[theme="TOY"] splitter grippy {
  display: none;
}