Tuning Outlines Layout
activeRenderer tutorial - part 2
Step 1: Specifying the outline title.
Check out this screenshot, taken at an early stage of the tutorial part 1 redaction (click on the 'camera' wedge).
Now compare it with this later revision of the same page.
You can see I did some work on the title at the top of the page.
What I did is include a #title directive at the top of the outline : #title "Publishing Simple Outlines".
This #title directive is actually the first line of the outline, check out the opml original.
Adding a line at the very top of the outline is tricky: add it somewhere else, drag it above the first node until you see an up arrow instead of the regular triangular wedge, then drop it.
Directives all start with the pound sign (#).
Every directive is followed by an argument, which must be included in double quotes (").
Since the outline is saved in an XML format (OPML), all double quotes are automatically 'entity encoded'.
The " you see in the outliner appear as ampersand sign quot semicolon in the OPML file.
Step 2: Setting each outline node's initial expansion state.
activeRenderer publishes your outline in the state you leave it when you save the document in Radio's outliner.
Any node expanded at saving time will be published expanded, revealing the underlying nodes.
Any node collapsed at that time will be rendered collapsed.
So remember to review your outline's nodes state before final publication.
This outline was published with all top-level nodes (summits) collapsed.
Step 3: Modifying the outline's font and style.
Each node in your outline is rendered in HTML using a specific CSS class.
For additional information on CSS - Cascading Style Sheets - styling refer to:
The W3C official page (click on the 'page' wedge).
Eric Meyer's Cascading Style Sheets: The Definitive Guide at O'Reilly.
The name of the class for the main outline in the published page usually starts with the active text string.
active is then followed by a number, matching the indentation level of the node.
This node for instance, is rendered in HTML using an active3 class attribute.
All classes are specified in the activerenderer.css stylesheet, located in the activeRenderer subfolder of the www folder.
You can make all kinds of modifications to this file using a text editor.
If you so elect, remember to increment the version number you will find in the header of the stylesheet.
Use values above 99. This way, if I update aR's default stylesheet on the master server, your customized version will not get overwritten the next time you update your local copy.
You may also override those class definitions by modifying the template (the #template.txt file) that applies to your outline.
It is actually a better way of modifying the outline's font, since it will always override any modification to the default style in activerenderer.css
Insert a STYLE type="text/css" HTML tag in the template's header, followed by your custom class definitions and a /STYLE tag.
Quick tip: Since styles are 'cascading', modifying the font or style of the active1 span will modify the text for all the outline's nodes.
The #template.txt file that applies to your outline is either found directly in the same folder as your outline, or in the first parent folder that actually holds a template. Templates are 'cascading' too :-)
Of course, you can always embed regular HTML tags in your outline nodes.
This is displayed in bold, since I included it between B and /B tags.
Paolo Valdemarin has a great demo page using different HTML tags in an outline.
Step 4: Fixing the OPML mug.
This outline does not display an OPML espresso coffee cup on the right side any more.
It used to though, and your default outline probably displays an OPML coffee mug.
Whatever the container, it carries a link that subscribe the reader to your Radio instant outine.
To disable the mug display altogether:
Open the #prefs.txt file that aR placed in your outlines folder with a text editor.
outlines is a subfolder of Radio's www folder, remember ?
Remove the #flDisplayCup directive and save the result, then save your outline again.
To choose the type of container:
Include an #flDisplayCup directive at the top of your outline.
The second line of this outline was #flDisplayCup "cup".
It takes precedence over the #flDisplayCup "regular" directive in the #prefs.txt file.
Check the espressoCup macro documentation for a current list of containers.
Step 5: Adding an XML button.
If you look at the right pane of this page, you will notice a familiar XML white on orange button, that actually links to the OPML version of this document.
When you save an outline in the outlines folder, the original OPML version remains on your computer, and the HTML rendered version is upstreamed to the public site.
But if you have checked the " Mirror the 'outlines' and 'opml' sub-folders" option in the preferences, aR automatically creates a copy in the opml folder, creating subfolders matching the gems hierarchy along the way.
Thus, the version under opml is upstreamed in its original OPML format.
Whereas the copy under outlines is upstreamed in HTML format.
The pref being about mirroring, saving into opml will create an automatic copy in outlines of course.
Looking at the second line in the original version of this outline, you will notice a #opmlStory directive.
#opmlStory's argument is the URL to the original OPML version of the outline on the public site.
aR's default template includes a call to the storyBox macro, that inserts an XML button and link when a #opmlStory directive is included in the outline.
All these variations are possible using aR's default outline template. The next logical step is to create your own template, with a layout that closely matches the disposition of your weblog. More on this subject in part 3.
