Dave Winer is the guru of outlining. He is the person who moved outlines from English class onto the computer in the eighties. He's done a lot of other things, too. But, his development tool Frontier was a game changer for me. I eventually had to leave it behind because my brain needs color. I need code coloring when I'm programming and I need color cues to work productively with an outliner (everything else, too; my emails alway have colored sections).
His newest outline, Fargo, is very cool (at http://fargo.io). It runs in a web browser and saves your files into your Dropbox. Awesome. Unfortunately, it's also black and white and serif type face. I don't like that and, honestly, I have a hard time working with black type if there is very much of it. I tried it out. Liked it. I continued to use Omni Outliner. (If I could get Frontier to use Omni's formatting, I would be so happy.)
Lately I've been working on a very outline intensive project and now I want to work on it with other people. But, it really needs to be an active outline with expanding and collapsing sections.
I discovered that I could export the outline from Omni into OPML, the basic data structure Dave uses for Fargo. I copied the OPML into the Dropbox file Fargo uses and, boom!, I had Fargo functionality.
To my eye, it was ugly but it turns out that Dave did a BEAUTIFUL THING. He made it so that you can execute Javascript from the outliner. No kidding. You just type some JS into the outline, hit cmd-/ and it runs.
Here's what I did:
$('body').prepend("<script src='http://static.tqwhite.org/iepProject/formatFargo.js'>");
That's right, I loaded a chunk of JS from my static server. That code changes this:
to look like this..
It took a fair amount of reverse engineering to figure it out but, it works like a charm.
Here's the code:
(I think the colorized picture is easier to read.)
And here it is if you want to do your own colorizing:
var colorize = function() {
$('.concord .concord-node .concord-wrapper .concord-text').css({'font-family': 'sans-serif'});
$('.concord-level-1-text').css({'color': 'black'});
$('.concord-level-2-text').css({'color': '#664F58'});
$('.concord-level-3-text').css({'color': '#456D72'});
$('.concord-level-4-text').css({'color': '#AD9470'});
$('.concord-level-5-text').css({'color': '#D3AF74'});
$('.concord-level-6-text').css({'color': '#90967E'});
$('.concord-level-7-text').css({'color': '#778'});
$('.concord-level-8-text').css({'color': '#788'});
$('.concord .concord-node > .concord-wrapper').css({'background': 'white'});
$('.concord .concord-node.selected > .concord-wrapper').css({'background': 'rgb(245,250, 250)'});
$('.concord .concord-node.selected').find('li .concord-wrapper').css('background', 'rgb(245,250, 250)')
}
$('body').bind('keyup', colorize);
$('body').bind('click', colorize);
colorize();
document.styleSheets[0].insertRule(".selected { background:rgb(245,250, 250); }", 0);
document.styleSheets[0].insertRule(".selected div { background:rgb(245,250, 250); }", 0);
document.styleSheets[0].insertRule(".selected div { color:normal; }", 0);
document.styleSheets[0].insertRule(".selected i { background:rgb(245,250, 250); }", 0);