Customizing Firefox Default Styles

Firefox allows you to specify default styles so that you can alter the appearance of all web pages that use a particular element or combination of elements. For example, I like to see when links have nofollow applied to them instead of having to check them manually. The CSS file for doing this is called userContent.css, and it is part of your Profile. (Note that near the beginning of the article you can specify which OS you are using.) By default this file does not exist. You must rename or copy userContent-example.css to userContent.css, then you can make changes/additions, save the file, then restart Firefox to see the effects. Note that you’ll need to restart Firefox every time you save changes in order to see them.

What follow are some useful (maybe) examples. Note that these could affect any sites that use the same style names, so be careful / forewarned. Also these may cease to function if the sites change their own structures.

Here is a style for putting right-side and bottom borders on links with nofollow applied:

a[rel~=”nofollow”] {
border-right: thin dashed firebrick ! important;
border-bottom: thin dashed firebrick ! important;

Here is one for cleaning up the clutter of YouTube, courtesy of Google Blogoscoped:

.hpSideBlock, #baseDiv #footer, .feedmodule-promoted, #hpMainContent h1 {
display: none !important

Turn off AdWords ads atop search results:

#tads {
display: none ! important;

Turn off AdWords ads besides search results:

#mbEnd {
display: none ! important;

Let us know if you think of more.

Bookmark and Share

One Response to “Customizing Firefox Default Styles”

  1. Josh Freedman Says:

    The above technique for highlighting nofollow links will not work for regular links on pages with a global nofollow setting. I’m not aware of a way to do this with CSS. There are other tools / plug-ins for Firefox that will accomplish this, notably SEO Book’s “SEO for Firefox”.