Site updates
Testing New System now...

User Stylesheets in Mozilla

Mozilla supports user stylesheets. These are powerful tool, which lets you add CSS of your choice to the webpages you visit.

So, where do I start?

First, find where your profile is kept. The release notes for your build will tell you where that is. Inside the /chrome subfolder, if userContent.css is not there, create it. There should also be a sample file.

What can I do with this?

Virtually anything, as long as you're familiar with CSS Selectors. The following samples are just for inspiration, hopefully you should achieve what you want!

Identifying Advertisers

If you'd like to know what network's serving up ads on a site, try snippets like this:

img[src*="doubleclick"]:before
{
content: "DC";
}

img[src*="burstnet"]:before
{
content: "BN";
}

Resizing a site with small text

For this example, the target site is bash.org. In general, you need to find something specific about the site to change.


p.qt
{
font-size: 13pt !important;
}

It is possible some other site I use will have a class qt somewhere. If so, a more specific selector could be made, such as:


p.qa + p.qt
{
font-size: 13pt !important;
}

I tried something, and it didn't work!

There are a number of reasons why a style hasn't worked, so try the following things and see if they help:

Re-read the specification, and check the selector does what you think
Make sure you saved the file, and re-started Mozilla
Set some other, very noticable styles, to see what you selected
Add an !important
Use different ways to express your style, e.g. set your font-size in pt rather than "larger"

Are there other sites with examples?

Mozilla.org sample codes

You haven't answered my question! I have something to add!

Use the "contact" link on the left to pester me.

Mozilla pages