Change how Firefox displays Websites - gHacks Tech News

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.

Update: The easiest way to open the folder is to type about:support into the browser's address bar and hit enter. Here you find a profile folder button under Application Basics near the top that you can use to open the profile folder on the local system.

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;
}

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:

Comments

  1. Henrique said on July 9, 2007 at 8:30 pm
    Reply

    I just love your “security tip” about using IE and recommending FireFox. It’s funny, but when I use FireFox I get lots o Spyware and Virus (for years I don’t get virus through IE, using a simple AV program, Windows Firewall and no AntiSpam). Also, HTML in FireFox even with W3C rules, looks awfull and it’s a real pain to get the simpler format.

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

Please note that your comment may not appear immediately after you post it.