Style outline with different colors and backgrounds

Q & A - getting started with Tinderbox
1

Hello!
I wonder what is possible in terms of styling outlines? I am thinking in the direction what Omnioutliner offers. See image. 51. For me such styling makes it easier to navigate my outline. I wonder why there is much more styling possible for maps? I can only see right now options in terms of typography and OutlineBackhroundColor. Are there any tricks or plans to enhance ouline styling?

2

There are a few attributes that control an outline’s appearance. These are the main ones to look at:

  • $Color
  • $OutlineTextSize
  • $OutlineBackgroundColor
  • $NameFont

Here’s what I got after a few minutes of messing around:

35
Screen Shot 2018-05-06 at 13.05.35.png1642×1052 124 KB

Ok, maybe it doesn’t look as slick as OmniOutliner, but Omni has consistently favored styling over functionality with OmniOutliner, so that’s not a huge surprise.

More importantly, you can set different styles that adjust automatically to outline depth. The “OutlineNote” prototype has an edict that does all the styling automatically:

if ($OutlineDepth == 1) {
  $Color=rgb(158,81,163);
  $OutlineBackgroundColor=rgb(241,230,241);
  $OutlineTextSize=230;
  $NameFont="Baskerville";
};
if ($OutlineDepth == 2) {
  $Color=rgb(45,151,164);
  $OutlineBackgroundColor=rgb(223,240,241);
  $OutlineTextSize=180;
  $NameFont="Baskerville";
};
if ($OutlineDepth == 3) {
  $Color=rgb(120,120,120);
  $OutlineBackgroundColor=rgb(242,242,242);
  $OutlineTextSize=120;
  $NameFont="Baskerville-Italic";
};
if ($OutlineDepth >= 4) {
  $Color=;
  $OutlineBackgroundColor=;
  $OutlineTextSize=100;
  $NameFont="Optima-Regular";
}

In addition, it has the following OnAdd action that ensures that any newly created children are also outline notes (and are thus also styled correctly):

$Prototype="OutlineNote"

Because styling is done by an edict, when you move an entire subtree, you will have to hit ⌃⌘= to restyle the subtree, but everything else works immediately.

Here’s the sample document (63.2 KB) that was used for the screenshot above, with this automatic styling in place.

3 Likes
3

Comparing the two screenshots above, it occurs to me that the appearance of Tinderbox’s outline mode would be much improved by drawing the entire background band of an outline item in $OutlineBackgroundColor, rather than only the section of the band where there is text. @eastgate, have you ever considered doing this?

4

@galen this is awesome. Exactly what I was looking for. Thanks a lot. I also agree the background could be nicer and a background band. Thanks a again, works like charm.

1 Like
5

I’ve just tweeted your interesting post and downloaded your file. Thanks for that suggestion!

1 Like