Scrollbar Tutorial

by pieterh on 07 Sep 2009 17:40

In this article I explain how to make a scrollbar (that let you navigate to the previous and next pages), such as the one used in this blog, the forum template site, and the blog template site.

First, we will use divisions to create three boxes, like this:

Link to previous page

Link to next page

Content of this page

Next, we use the ListPages module to select the previous and next pages. To do this we'll combine the range and limit selectors. For the previous page, we use a descending sort order. You can add any tag selectors you need, and by default this selects from the current category:

[[module ListPages range="after" limit="1" order="created_at desc" separate="no"]]
<< [/%%full_page_name%% %%title%%]
[[/module]]

To select the next page, we use exactly the same ListPages but with an ascending sort:

[[module ListPages range="after" limit="1" order="created_at" separate="no"]]
[/%%full_page_name%% %%title%%] >>
[[/module]]

Place these two inside the divisions where we had 'Link to previous page' and 'Link to next page'. I usually wrap these two in [[=]][[/=]] to center them. Finally, to place the content in the bottom box, use the %%content%% variable:

[[div style="text-align:justify; border: solid 1px #ccc; background:#eee; padding:0 1em 0 1em; margin-bottom:1em; margin-top:1em"]]
Created on ##gray|%%date|%e %B %Y, %H:%M%%##

%%content%%
[[/div]]

Comments: 11

Add a New Comment