Editing userChrome.css

Editing userChrome.css

The userChrome.css file is used to control what Firefox looks like. Hundreds of possible settings can be placed in this file, all of which contribute to the look and feel of Firefox.

Mozilla provides you with an example file (userChrome-example.css) you can use as the basis for your userChrome.css. To do this, copy the example file provided to a new file named userChrome.css. This file may then be edited in your favorite text-based editor (either Notepad or WordPad work fine for this task).

Most Firefox users don't realize just how customizable the user interface is. With userChrome.css it is possible to define the appearance of the following items. The list is not an exhaustive list of everything that can be set. Rather, it is intended to be representative of what can be customized in Firefox.

As an example, menus in Firefox (and in any program, really) consist of some of the following objects:

• menubar The menubar is the top level of menu items.

• menupopup The menupopup consists of the drop-down menus that display when a menubar item is selected (clicked).

• popup The popup menus are those menus that are displayed when the user right-clicks.

You are able to set many aspects of what you see in each of the menu categories. For example:

• border The number of pixels in the border of the object.

• padding The number of pixels of padding between items in the object.

• background-color The color of the background, expressed as a six character (three byte) red/green/blue hexadecimal number or as a predefined color attribute.

• margin The margin for the object, in pixels. Often set to zero.

• background-image Instead of a background color, an image (of any type that Firefox supports) may be specified.

There are other attributes that may be set; these are examples of common attributes that many users might use.

For example, you might want to change the appearance of Firefox's menus. The code to do this in the userChrome.css is shown in Listing 6.2.

Listing 6.2. A Sample userChrome.css File

/* Actual menu bar */ menubar > menu {    /* Set border to 1 pixel */    border: 1px solid transparent !important;    /* set padding top bottom left right */    padding: 2px 5px 2px 7px !important;    /* set margins */    margin: 0 !important;    /* don't use a solid color, use image as background */    background-image: url("FeatherTexture.bmp") !important; } /* Selected menu item main menu */ menubar > menu[_moz-menuactive="true"] {    /* default background color to the predefined color named 'Highlight' */    background-color : Highlight !important;    /* default color to the predefined color named 'HighlightText' */    color: HighlightText !important;    /* Don't use a solid color, use image as background */    background-image: url("Santa Fe Stucco.bmp") !important; } /* Selected menu item popup menu */ menupopup [_moz-menuactive="true"] {    /* default background color to the predefined color named 'Highlight' */    background-color : Highlight !important;    /* default color to the predefined color named 'HighlightText' */    color: HighlightText !important;    /* Don't use a solid color, use image as background */    background-image: url("Zapotec.bmp") !important; } 

Now, some more information is in order:

• Images without a path are in the same folder as userChrome.css. If another folder is used for images, a path must be included. You might find it easier to move all images to the same folder as userChrome.css.

• Predefined colors are listed in the cascading style sheet documentation. Try a color; if it does not work well, create what you want as an RGB value.

• Dimensions are usually expressed in pixels (px).

• The keyword !important is required to override any other definitions of a given attribute. If you code an object attribute and that definition doesn't seem to do anything, you have probably forgotten the !important keyword. This keyword simply sets whether this overrides other definitions or might be overridden itself.

• Groups of attributes for a single object are enclosed in braces {}.

• There is no error reporting for userChrome.css (or any other cascading style sheet). Make a mistake and the line (or lines) in error is ignored. Firefox probably won't crash, but it will not perform as expected.

Note

The userChrome.css file can be simple or complex. For more extensive modifications, I strongly recommend that you back up your userChrome.css files and the entire user's profile folder set.