Change how Firefox displays Websites - gHacks Tech News

ADVERTISEMENT

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

Advertisement

Previous Post: «
Next Post: »

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

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.