You can customize how sites appear by editing the usercontent.css file to apply a stylesheet rule to all websites. The UserContent.css file is located in your profile directory.

• How to find your profile directory

By default the UserContent.css file is not installed. There is an example file located in the profile directory though.

You can make the css applicable to specific sites and urls by using the mozilla specific “@-moz-document” rule.

syntax (ref):

@-moz-document url(http://www.w3.org/),
                         url-prefix(http://www.w3.org/Style/),
                         domain(mozilla.org)
{
  /* CSS rules here apply to:
     + The page "http://www.w3.org/".
     + Any page whose URL begins with "http://www.w3.org/Style/"
     + Any page whose URL's host is "mozilla.org" or ends with
       ".mozilla.org"
   */

  /* make the above-mentioned pages really ugly */
  body { color: purple; background: yellow; }
}

To prevent cluttering your UserContent.css file with lots of site specific css nested in @-moz-document statements you should use the @import rule. Create a style sheet for the particluar task you want to acheive and save it in the profile folder. Then add an @import rule to your UserContent.css file o use that stylesheet.

Note that you can not nest an “@import” inside a “@-moz-document” rule.

So this in your UserContent.css is wrong:

@-moz-document domain(SomeSite.com) {
@import url(SomeSite.css);
}

This means that you need to use the @-moz-document rule inside the imported stylesheet.

Example UserContent.css:

@import url(SomeSite.css);

Example SomeSite.css:

@-moz-document domain(SomeSite.com) {
/* the css to customize the site */
background-color: pink;
}

Other things:

• To override rules that are inline on a page use the !important attribute
• To implement any changes you make need to restart Firefox after saving your stylesheet. Someone needs to make a plug in to fix this.

What can I use this for?

I use it to:

• Highlight nofollow links
• Apply standard theme to forums ( vbulletin and phpbb themes are usually similar enough so you can use a standard css file to override a sites default theme)

Cool Ideas:

• Host your UserContent.css imported files on your website… then you can easily make your preferences portable.
• Have a service that saves peoples preferences online then they change their UserContent.css to pull from the service. They can log in to the service and add other popular style sheets on the fly. Write a plug in that edits their UserContent.css automatically to load the css from the service. If you make this give me a shout out! ;-)

Like it? Subscribe to the blog if you haven't already

Comments »