Customizing Your Own Outline Template
activeRenderer tutorial - part 3
Step 1: start from your #template.txt file in Radio's www folder.
The only reason why the outlines you have published so far look the way they do is that I'm lazy.
When I needed a new template for the outlines in s l a m, I just copied my www:#templates.txt file to the www:outlines folder, and started working on it.
Later, I just copied the result as a part of activeRenderer, to use as the default ouline template.
So why don't you do the same ?
Start by making a backup copy somewhere of the #template.txt file that currently lives in www:outlines (or www\outlines depending on your system :-)
Then copy the #template.txt found in www to the outlines subfolder, replacing the one you've just backed up.
It's not mandatory to use the template in www of course.
You may have a better suited template in the stories subfolder of www for instance, or somewhere else.
You may also start from the #homeTemplate.txt file in www and rename it #template.txt in outlines.
#homeTemplate.txt defines the general layout of your weblog.
Step 2: add links to the outline JavaScript code and CSS stylesheet.
You need to open the #template.txt in outlines with a text editor.
My personal favorite is BBEdit for MacOS X.
On Windows systems, I simply use NotePad (usually found with Accessories).
Any program that can read and more important write plain ASCII text goes, even Microsoft Word if you save in plain text mode :-)
Then you need to insert the links in the header section of the template.
The header section is delimited by the HEAD and /HEAD tags.
A good insertion point is above the title definition line. The links depend on your home page's URL, but you do not have to enter them litteraly, since this is a template.
activeRenderer comes with the handy activeRendererHeader macro, which generates the proper links at rendering time.
So all you need to insert is: <%activeRendererHeader () %>
If you are afraid of typing mistakes (I am), just copy the above tag and paste it into your template.
You can do the same thing from the default template you backed up in step 1 (you did it, right ?)
Step 3: add the collapse all/expand all widget.
Easy, activeRenderer includes the activeRendererFunctions macro, just for that purpose.
activeRendererFunctions generates the proper text and links at rendering/upstreaming time.
So all you have to do is locate a good emplacement in the body section of your template, presumably in one of the sidebars.
Sidebars are often created with tables, so you should insert the macro call in an already existing table cell, delimited by TD and /TD tags.
If you're Joe Jennett, or under his influence, your sidebar is probably included in a DIV box. This tutorial's template is TABLE free, but a DIV defines the whole left pane.
If I've managed to confuse you, take a look at the original template (I told you to make that backup, didn't I ?)
Then insert: <%activeRendererFunctions () %>
The activeRendererFunctions macro actually has a number of interesting parameters to control the HTML output, so you probably want to check out the Macros Reference for more information.
Step 4: that's it, save the updated template.
Then (re)publish an outline, and take a look at the result after Radio has upstreamed the HTML version. Make corrections if needed, and repeat the process.
If you want to add the XML white on orange button, check the storyBox macro in the reference.
storyBox is part of activeRenderer, so all you have to do is insert the call somewhere in your template.
If you want to add an OPML coffee logo, check the espressoCup macro in the reference
espressoCup is also part of in activeRenderer.
Step 5: use different templates for different outline layouts.
All your outline files do not have to sit in the same outlines subfolder of www.
Just as with the categories and stories folders, you can create different subfolders in outlines, and include customized versions of #template.txt and #prefs.txt in them.
These tutorials for instance are stored in the tutor subfolder of an outlines folder that happens to sit in the categories\activerenderer subfolder of www, where as most of the other activeRenderer related outlines are stored in the aR subfolder.
I hope you found the customizing process as easy as I did. To spice things up a bit, you can render external OPML files as directories or navigation bars in your outline with the activeRoll macro. More on that subject in part 4.
