Using CSS with Firefox

 < Day Day Up > 

Firefox uses CSS in its basic installation set (see Firefox's res folder) and with user profiles (userChrome.css and userContent.css).

All user profiles contain userChrome-example.css and userContent-example.css. Firefox keeps a standard version of both of these files in the Firefox installation folder (\defaults\profile\chrome). Firefox itself ignores both of these files, so they must be copied (or renamed) to be recognized by Firefox. (userChrome-example.css should become userChrome.css, and userContent-example.css should become userContent.css.)

Also found in the Firefox installation folder is a subfolder named res. In res are eight .css files:

  • EditorOverride.css and EditorContent.css These control the editor's WYSIWYG appearance when in Browser Preview mode.

  • forms.css This contains styles for old GFX forms widgets.

  • html.css This is the overall style sheet for HTML.

  • mathml.css This specifies the formatting of math.

  • platform-forms.css This loads forms.css.

  • quirk.css This describes quirks mode, in which Firefox emulates many of Netscape Navigator's and Internet Explorer 4's nonstandard behaviors.

  • ua.css This is the style sheet that controls the mapping of HTML elements as block or inline.

  • viewsource.css This defines how source looks when edited in Firefox.

These are style sheets used by default in Firefox. However, the important style sheets are those that define themes. Because themes are packaged as JAR files, you don't usually see the .css files that make up a theme. A typical complete theme that is well-designed might contain as many as 100 CSS files, along with image files for each visual object (such as buttons, backgrounds, and so on) and other files. In fact, a well-done theme will have 300 or more files. Most of the files for themes are image files (either .gif or .png files).

In Chapter 15, "Creating Your Own Theme," you will create a simple theme. The theme you create won't have this many files and CSS, however.

The two CSS files users might find they want to make changes in are userChrome.css and userContent.css.


The userChrome.css file is the easiest tool for you to modify the way Firefox looks. Almost anything you might want to set to quickly modify the look of Firefox can be set in this file.

Mozilla provides a sample userChrome.css file (see Listing 14.1). This sample file has a few modifications already written for you. You can take a look at this file and see exactly how the CSS affects the way Firefox looks. (I have reformatted comment lines in the listing to make it more readable.)

Listing 14.1. userChrome.css

 /* Edit this file and copy it as userChrome.css into your profile-directory/chrome/ */ /* This file can be used to customize the look of Mozilla's user interface  * You should consider using !important on rules which you want to override default  settings. */ /* Do not remove the @namespace line   it's required for correct functioning */ @namespace url(""); /* set default namespace to XUL */ /* Some possible accessibility enhancements: */ /* Make all the default font sizes 20 pt:*  * * {  *   font-size: 20pt !important  * }  */ /*  * Make menu items in particular 15 pt instead of the default size:  *  * menupopup > * {  *   font-size: 15pt !important  * }  */ /*  * Give the Location (URL) Bar a fixed-width font  *  * #urlbar {  *    font-family: monospace !important;  * }  */   /*  * Eliminate the throbber and its annoying movement:  *  * #throbber-box {  *   display: none !important;  * }  */   /* For more examples see */ 

Taking a close look at the listing, you see that you can set the font size for everything:

{   font-size: 20pt !important } 

In this small piece are two important parts of a CSS. The first is a definition of the font size (font-size: 20pt), and the other is the !important that specifies that this particular setting must be used unless you (the user) say otherwise in another setting.

The same is true for this part of the CSS file:

menupopup > * {   font-size: 15pt !important } 

The first line specifies that you are modifying the pop-up menu font size, setting it to 15 points, from whatever the default was (see Figure 14.6). This only affects the pop-up menus, and not the top-level menu, as Figure 14.6 shows.

Figure 14.6. Notice the size difference between the word View in the top-level menu and the items in the pop-up menu.

This change makes things quite large, so a bit of fine-tuning is in order. You could also specify a color:

menupopup > * {   font-size: 15pt !important;   color: red !important } 

Although it's difficult to see in the figure, the pop-up menu items are in red. Notice how we separated each of the attributes we set with a semicolon. Also, each attribute name has a colon following it, and each attribute has its own !important specification.

Following the same concept one step further, consider this code:

menupopup > * {   font-size: 15pt !important;   background: green !important;   color: red !important } 

Now the pop-up menus will be red text on a green background. Perhaps that's a bit hard to read (both colors have about the same luminosity, or brightness). Therefore, you might be more inclined to make the background a lighter gray and the text a darker color.


The supplied userContent.css example (userContent-example.css) lets you change the way default items in a web page appear. Again, in Listing 14.2, I've reformatted the comments so the listing won't be too large.

Listing 14.2. userContent-example.css
 /* Edit this file and copy it as userContent.css into your profile-directory/chrome/ */ /* Each example is commented out in this example */ /* This file can be used to apply a style to all web pages you view  * Rules without !important are overruled by author rules if the author sets any.  * Rules with !important overrule author rules. */ /* example: turn off "blink" element blinking  *  * blink { text-decoration: none ! important; }  *  */   /* example: give all tables a 2px border  *  * table { border: 2px solid; }  */   /* example: turn off "marquee" element  *  * marquee { -moz-binding: none; }  *  */   /* For more examples see  */ 

Looking at this example, the first change it makes is to the blink tag. Perhaps you don't like blinking text on web pages. If you're an Internet Explorer user, you probably don't (yet) know what blink is because Internet Explorer does not support blinking text. But, you can set blink to off:

* blink { text-decoration: none ! important; } 

First, you have the tag's keyword, blink. Then you set text-decoration to none. You can set text-decoration to any of these values:

  • none Specifies that the text won't have any special attributes.

  • underline The text will have an underline.

  • overline The text will have an overline.

  • line-through The text will have a line through it.

  • blink The text will blink.

Not all these values are exclusive; the text could blink and have an underline, overline, or line-through. Naturally, setting text-decoration to none precludes setting any of the other attributes.

Another example from userContent.css is shown here:

/* example: turn off "marquee" element  *  * marquee { -moz-binding: none; }  *  */ 

This example deserves special attention because it has a nonstandard setting: "-moz-binding:". This property is used to associate a URI and is used to specify that the property is to be inherited, or is set to none.

     < Day Day Up > 

    Firefox and Thunderbird. Beyond Browsing and Email
    Firefox and Thunderbird Garage
    ISBN: 0131870041
    EAN: 2147483647
    Year: 2003
    Pages: 245

    Similar book on Amazon © 2008-2017.
    If you may any questions please contact us: