Tuesday, November 10, 2009

Optional Additional Code for Salon Letter Filter beta

The following additional code can be added to the Salon Letter Filter beta greasemonkey script to correct deficiencies in the Salon formatting:

1) Mark visited links — The letter page formatting does not mark links that have been visited. This means that you cannot tell which pages of the letter commentary you have read and which you haven't. If you navigate away from the page or close your browser you have to remember which page you were on when you come back. This can be fixed with the following code, which can simply be copied and pasted at the end of the Salon Letter Filter beta script:

function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
addGlobalStyle('a:link {color:blue ! important; }');
addGlobalStyle('a:visited {color:orange ! important; }');


2) Remove Navigation panel at the bottom of letter pages — A huge amount of space at the bottom of each letter page is taken up with a navigation panel that will take you almost anywhere in Salon. For most people it is simply a distraction. It can be removed by adding the following line of code to the Salon Letter Filter beta script:

xpath("//div[@class='sitemap_wrap']",document).snapshotItem(1).innerHTML = "";

Be sure to copy the entire line of code since you can't see the end of it because of blogger's page layout.

3) Remove the second and third columns containing “Most Active Letter Threads” (the scoreboard) and “Currently in Salon” — The size of the letter area has been considerably reduced by the need of the “business model” to include graphic links to everything else on Salon. You can get rid of these two additional columns that are mostly merely distracting from the letters by adding the following code to the greasemonkey script:

var allCols, thisCol;
allCols = xpath("//div[@id='col2'] | //div[@id='col3']",document);
for (var k = 0; k < allCols.snapshotLength; k++) {
thisCol = allCols.snapshotItem(k);
thisCol.innerHTML = "";
}

Unfortunately, this will also remove the “Letters Help” box in the second column, which might actually prove useful, but you can't have everything. I'll try to find a way to put the “Letters Help” back somewhere unobtrusive.

4) Preserve the “Letters Help” box — the following code will preserve the help box for letters and place it unobtrusively before the letter archive:

var allBoxes, helplist,helpbox, letters;
allBoxes = xpath("//div[@class='box']",document);
helplist = allBoxes.snapshotItem(1).innerHTML;
helpbox = document.createElement('div');
helpbox.class = "box";
helpbox.innerHTML = helplist
letters = document.getElementById('letters_archive');
if (letters) {
letters.parentNode.insertBefore(helpbox, letters);
}

WARNING: This code must be placed before the code given in section 3) above. You have to snarf the letters help box before you trash column 2.

5) Remove the red background from the copyright notices at the bottom of the page — The hideous and stressful red background to the copyright notice at the bottom of the letter pages can be removed with the following two lines of code:

var foot = document.getElementById('footer_inner');
foot.style.backgroundColor = 'white';


6) Spread the letter text across the page — Now that columns 2 and 3 have been removed it is possible to spread the letters across the page to make them more readable. The following code will accomplish this:

addGlobalStyle('p {width:700px ! important; }');
addGlobalStyle('blockquote {width:700px ! important; }');
addGlobalStyle('h2 {width:700px ! important; }');

These lines will work only if the addGlobalStyle() function defined above in 1) has been included. Otherwise you will have to copy the function from 1) and paste it into the script before these lines will work.

I have set the width in pixels at 700. This is the width I find most comfortable for the browser width that I use. You can make the lines longer or shorter just by changing the number to suit your own preference.


That's all for now, but stay tuned for further developments.