Firefox Bookmarklets

Originally published on: 7/28/2005 7:25:53 PM

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

[code language="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.

[code language="javascript"]

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.

Comments

LetterJ
commented on 8/3/2005 While it may not be the reason, you should grab the CSS file again. Wordpress was trying to be "helpful" and turned the original CSS author's email address into a tag and tried to complete it, thus messing the file up.

Steve Robinson
commented on 8/3/2005 Hi:

This seems like a useful little tool. Thanks for putting it together.

I tried it on my Windows XP machine, using a local web server (so that the CSS file was at http://localhost/firefox/userContent.css) and entering the Javascript into the location field of my 'Light CSS' bookmark (after ensuring that I had copied the whole segment of code in as a single line).

I visited the above-mentioned difficult-to-read website and activated the bookmark, but nothing happened.

I wonder how I can figure out what I've done wrong?

Thanks,

Steve

Steve Robinson
commented on 8/6/2005 Et voila!

I regrabbed the CSS and it's all working fine now.

Thanks again,

Steve

Sean
commented on 2/8/2008 Hi there - I was looking for a bookmarklet that can change any pages stylesheet to an arbitrary stylesheet and found yours. It looked close to what I was looking for, so I tried it out. I've copied the entire javascript code into one line, and the CSS is on my server at http://www.ensbell.net/forgen/CSS/easyread.css, but nothing seems to happen when I click the link!

Also, I am having quite a bit of trouble reading your site (ironic, eh?) - the code text and some of the regular text is all running into your right hand column (firefox 2.0+).

Thanks for the script - could you provide a link with the script in it that we could drag directly to the toolbar to get rid of "removing the line breaks " errors? Thanks!

Richard
commented on 3/16/2008 hi,

Came across your interesting page during a search on wrap-to-window. Could this CSS trick be used to force any page to wrap to my window-width?

I find 'hard coded width' pages INTENSELY irritating...as I suspect most laptop-users do.

thanks much,

Richard

Neil Rashbrook
commented on 5/15/2009 I don't know where you got that viewsource CSS from, but if you want the view source window to wrap then simply select the View - Wrap Long Lines menuitem.

Peter
commented on 2/27/2010 I too have tried this.

- I transferred your css code (http://localhost/firefox/userContent.css) to a public web site http://www.wix.com/p1k2b3/LightCSS

- I've copied the javascript in the 'location' of bookmarklet 'Light CSS' as follows:

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

- Now I tried to view the website:

http://www.bigmonkeypress.com/warren_haynes.htm

- Click on Bookmarklet 'Light CSS' but nothing happens!

- what am I doing wrong?