Change how Firefox displays Websites

Did you know that it is possible to override the way websites are displayed by default in the Firefox web browser? This can be useful for instance if a webmaster decided to use CSS code to remove the underlining of links, change the color for links that open in new windows or display additional information for certain file type downloads.

The first thing that you need to do is locate or create the file usercontent.css in your Mozilla Firefox profile directory. It can usually be located in %appdata%\Mozilla\Firefox\Profiles\chrome in Windows where xxx is a random number and yyy the name of the profile (default for instance). It can be found under ~/.mozilla/firefox//chrome in Linux.

Create the file userContent.css if it does not exist already in the chrome folder and open it in your favorite text editor. If the file exists simply append the code that is of interest to the end of it.

1. Always underline links, even visited ones and those that that have no underline because the webmaster used CSS to remove the underline.

:link, :visited {text-decoration: underline ! important };

2. Remove Marquee and Blink

marquee { display: none !important; }
blink { text-decoration: none !important; }

3. Display file type after link. This example is for pdf, you can change it to suit other file types such as .doc, .avi or .zip

a[href$=".pdf"]:after {
font-size: smaller;
content: " [pdf]";}

4. Change cursor for links that open in a new window

:link[target="_blank"]:after, :visited[target="_blank"]:after, :link[target="_new"]:after, :visited[target="_new"]:after {
font-size: smaller;
content: " [new]";}

5. Display if the link has the nofollow attribute (great for webmasters)

a[rel~="nofollow"] {
border: 1px dashed #f00!important;
background: #f66!important;
}

6. Increase the minimum height and width of textarea forms

textarea {
min-width: 50ex !important;
min-height: 12em !important;
}

7. Add a keyword field when adding bookmarks.

#keywordRow { display: -moz-grid-line !important; }

8. Highlight JavaScript links

:link:hover[onClick],
:link:hover[onfocus],
:link:hover[onmousedown],
:link:hover[onmouseup],
:visited:hover[onClick],
:visited:hover[onfocus],
:visited:hover[onmousedown],
:visited:hover[onmouseup] {
background-color: #7fffd4 ! important;
color: #b22222 ! important;
}