Change how Firefox displays Websites

Did you know that it is possible to override the way a website is displayed by default in Firefox. This can be useful for instance if a webmaster decided to use CSS code to remove the underline 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 and open it in your favorite text editor. If the file exists simply append the code that is of interest at the end of it.

• 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 };
• Remove Marquee and Blink
  
  marquee { display: none !important; }
blink { text-decoration: none !important; }
  
• 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]";}
  
  
• 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]";}
  
• Display if the link has the nofollow attribute (great for webmasters)
  
  a[rel~="nofollow"] {
border: 1px dashed #f00!important;
background: #f66!important;
}
  
• Increase the minimum height and width of textareas
  
  textarea {
min-width: 50ex !important;
min-height: 12em !important;
}
  

• Reddit
• StumbleUpon
• Delicious
• Digg
• Twitter

Tags: css hacks firefox, firefox mozilla, firefox usercontent, usercontent.css
Categories: Browsing, firefox

Read Related Posts

1. Change your bookmarks toolbar appearance in firefox
2. Fix Choppy Scrolling in Firefox
3. Download Panel Displays In Depth Information About Firefox Downloads
4. Mozilla Firefox About Protocol Links
5. Firefox: Edit Forms On Websites In External Editors
6. Redesign Google Web Search with Firefox
7. Interclue for Firefox
8. Change Firefox 3 Full Screen Mode

One Response to “Change how Firefox displays Websites”

1. Henrique says:

   July 9, 2007 at 8:30 pm

   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.

   Reply