Firefox Bookmarklets

I visit a wide range of sites for professional and personal purposes. Unfortunately, there are a lot of sites that have decent content, but are impossible to read. There are tools like Greasemonkey for Firefox that let you fix sites you regularly visit. However, many of the sites that cause me problems are a 1 time visit. As a result, I didn't want to have to set something permanent for each. I also didn't want to set up an overall permenant solution like Firefox's user_content.css file (which lets you force CSS settings for all pages) because there are some sites where I actually do like their design.

So, I used a combination of the ideas as well as the bookmarklet concept and made a bookmarklet that applies a user_content.css file to the current page. It formats the page to black text on a white background, mutes the images and otherwise sets it up like I like. I call the bookmarklet "Light CSS".

Here's an example site. If you just visit this site, unmodified, it's pretty much unreadable. One click of "Light CSS" and it's immediately cleaned up and more printer-friendly to boot.
http://www.bigmonkeypress.com/warren_haynes.htm

The first thing to do is to make up the CSS file. I based mine on one of the common user_content.css files out there. Put this CSS on a public web server if at all possible. We'll be invoking it via URL and it's nice to have the same URL for all of your Firefox installations.

CSS file referenced at http://localhost/firefox/userContent.css

/* userContent.css:  user cascading style sheet, overrides webpage spec */

/* Author:  Karsten M. Self and a cascade of
 * thousands.
 * Date: Tue Nov 12 22:39:12 PST 2002
 * License:  Freely distributable and modifiable.
 * NO WARRANTY:  This program is distributed WITHOUT ANY WARRANTY.
 */
/* Purpose:  override document settings to provide black text on a light
 * background (actually more ivory than white).
 */

BODY, td {
    background-color: #F8F8ED !important;
    background: none !important;
    background-image: none !important;
    font-color: #000000 !important;
    font-size: 10pt;
}

/* Universal properties -- inherit from parents, otherwise apply what's
 * here
 */
 * {
    font-family: "Helvetica", sans-serif;
    background-color: inherit !important;
    background-image: none !important;
    color: inherit !important;
}

/* Force *all* fonts, weights, and line heights to be normal by default
 * unless otherwise specified.
 *
 * This isn't quite working the way we'd like it to -- Megarad turns out
 * OK, FuckedCompany doesn't:
 *    http://www.megarad.com/  -- mostly black on white.
 *    http://www.fuckedcompany.com/  -- table and fonts not converted.
 */

FONT {
    font-color: #000000 !important;
    font-family: "Helvetica", sans-serif;
}

/*Set Heading sizes*/
h1{
	font-size: 16pt;
}
h2{
	font-size: 14pt;
}
h3{
	font-size: 12pt;
}

/* Anchors.  These override the above specs to privide typical anchor
 * properties.  I also use the 'hover' property to positively ID links,
 * and like the effect.
 *
 * Specify most of these as ':link' pseudo class so that poorly
 * specified named refs don't get highlighted
 */

A:* {
    color: #4D5E8C !important;
    font-face: inherit !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

A:link {
    color: #4D5E8C !important;
    font-face: inherit !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

/* Uniform visited link specifications. */
A:visited{
    color: #6479B5 !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

/* Hover -- when the pointer is placed over a link, change its
 * appearance.  This may be the single most useful link attribute to
 * specify as it doesn't interfere with page legibility, but does
 * clearly denote links.

 */
A:link:hover, A:visited:hover{
    color: #4D5E8C !important;
    /* Yellowish background */
    background-color: rgb(255,255,144) !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

/* Active (selected) link.  As "hover" above. */
A:link:active, A:visited:active {
    color: red !important;
    font-weight: bold !important;
    background-color: rgb(255,255,16) !important;
    text-decoration: underline !important;
}

/*Make links show icons, differentiate javascript URL's and those with onclick events*/
a[href^="mailto:"]:after {content: url("moz-icon://.EML?size=16")}
a[href$=".pdf"]:after {content: url("moz-icon://.PDF?size=16")}
a[href$=".exe"]:after {content: url("moz-icon://.EXE?size=16")}
a[href$=".doc"]:after {content: url("moz-icon://.DOC?size=16")}
a[href$=".xls"]:after {content: url("moz-icon://.XLS?size=16")}
a[href$=".zip"]:after {content: url("moz-icon://.ZIP?size=16")}

/*Make links show an indicator if the click is going to be handled by Javascript*/
/*a[onclick]:after { content: "(JS)"; }
a[href^="javascript:"]:after { content: "(JS)"; }*/

/* Show icon after links to common sites. These can be irritating on some sites.
Because the favicon.ico URL format is pretty standard, you can easily add others by just
using domain.com/favicon.ico.
*/
/*a[href*="mozilla.org"]:after
{ content: url(http://mozilla.org/images/mozilla-16.png) }
a[href*="slashdot.org"]:after
{ content: url(http://slashdot.org/favicon.ico) }
a[href*="google.com"]:after
{ content: url(http://www.google.com/favicon.ico) }  */

/*Make images semi-transparent except for those you need to click on.*/
img {
	opacity:0.3;
}

img[onclick] {
	opacity:1.0 !important;
}

/* This is meant to address the view-source feature.  Add linewrap. */

viewsource {
   * -moz-pre-wrap !important;
}

Once you have that CSS at a URL, copy the URL for use in the bookmarklet.

Bookmark Javascript is below. Make sure you put it back together on one line. Also change the URL toward the end that's set to http://localhost/firefox/userContent.css with where you actually keep the CSS file. To add it, go to "Manage Bookmarks" under Bookmarks and click New Bookmark. Name it Light CSS and put the one line of Javascript in as the URL. File it in the Personal Toolbar folder for easy access.

javascript:(function(){if (!document.getElementById('someuniqueid')){var objHead =
document.getElementsByTagName('head'); if (objHead[0]){if (document.createElementNS &&
objHead[0].tagName == 'head') var objCSS =
objHead[0].appendChild(document.createElementNS('http://www.w3.org/1999/xhtml', 'link')); else var
objCSS = objHead[0].appendChild(document.createElement('link')); objCSS.id = 'someuniqueid'; objCSS.rel = 'stylesheet'; objCSS.href = 'http://localhost/firefox/userContent.css'; objCSS.type = 'text/css';}}})()

Now, the next time you're on one of those scary looking sites that has good information, just hit this button and read the content without distraction.