To include navigation links automatically in your pages, use the following line somewhere in the template file:
<!-- archive:navigation -->
You're not stuck with buttons on every page that uses this template, though. You can turn navigation on or off on a per-job basis through the Kipper interface.
Alternatively, you can mark the navigation in the template to be excluded in particular folders or pages.
For example, to include navigation in every page except for index.php:
<!-- ifnot:index:start -->
<!-- archive:navigation -->
<!-- ifnot:index:end -->
Keep in mind that this would exclude the navigation from any page called index, in every folder.
To exclude navigation from an entire directory:
<!-- ifnotdir:folder:start -->
<!-- archive:navigation -->
<!-- ifnotdir:folder:end -->
For maximum flexibility, Kipper does not try to insert graphic navigation, but plain text links. To gussy them up, you should use styles. We'll presently have a small gallery of CSS navigation button ideas.
Here are the DIV tag IDs you need to use:
We explain the styles, here, but you can also look at some of our templates to see examples of navigation button CSS. Plain Jane is an example of simple text buttons, and Button Nose shows how to use graphic buttons.
The "x" styles are invoked when the link is applicable. The first page, for example, would include both xfirst and xprev.
Scroll down to the Auto Last Link section for information on "fornow".
Here's what some normal output code looks like:
<div id="navigation">
<div id="first"><a href="20010523.php">First</a></div>
<div id="xprev"><span>Previous</span></div>
<div id="next"><a href="20010525.php">Next</a></div>
<div id="last"><a href="20010619.php">Last</a></div>
</div>
The buttons at the bottom of this page were formatted with this CSS:
#navigation {
margin:0 auto 0 auto;
padding:0;
text-align:center;
}
#first a, #prev a, #next a, #last a,
#xfirst span, #xprev span,
#xnext span, #xlast span {
display:inline;
float:left;
font:14pt arial, san-serif;
font-weight:bold;
text-transform:uppercase;
width:120px;
border:#000 5px solid;
margin:.25em;
padding:.5em;
overflow:hidden;
background-color:#000;
background-image:url(hilite.png);
background-repeat:repeat-x;
color:#fff;
}
#first a:before, #xfirst span:before {
content:"▲";
}
#prev a:before, #xprev span:before {
content:"◄";
}
#next a:after, #xnext span:after {
content:"►";
}
#last a:after, #xlast span:after {
content:"▼";
}
#first a:hover, #prev a:hover, #next a:hover, #last a:hover {
border:#7F0000 5px solid;
background-color:#7F0000;
color:#fff;
}
#first a:active, #prev a:active,
#next a:active, #last a:active {
border:#f00 5px solid;
background-color:#f00;
color:#fff;
}
#xfirst span, #xprev span,
#xnext span, #xlast span {
color:#999;
}
We'll need to expand this, but the least you need to know: to use images to replace the text links, you would basically set the height and width of the DIV tags to match your buttons, specify that the anchor and span tags within them are hidden, then include the graphics as background images. This technique works surprisingly well.
In the settings, select "yes" for Auto Last Link, if you are using Kipper to maintain an active archive.
Kipper isn't a "live" content manager, like WordPress, and it doesn't automate nightly updates like Autokeen. It doesn't try to manage things unless you are actively pressing buttons and pulling levers.
To provide for future posts--stuff that you don't want your visitors to see until a later date--we insert a dynamic code that tells your navigation when to stop. To do this, we have to make two assumptions: first, that your pages are PHP pages; and that the first eight digits of your filename are formatted as yyyymmdd.
Auto Last Link also prints a line underneath the navigation buttons of the last page, announcing if there are future updates sitting in the queue. For example, if today is the 21st, the dynamic button will stop readers on the 21st, and announce:
The next update is loaded for Sunday, 2009 February 22.
Use the CSS ID "fornow" to adjust this line. If you do not wish it to appear on your pages:
#fornow {
display:none;
}
If you like the little feller, however:
#fornow p {
clear:left;
font-weight:bold;
}
You can also personalize it by adding text before or after.
#fornow p:before {
content:"That's all for now! ";
}
#fornow p:after {
content:" See you then!";
}
This only works with modern browsers, however.
So that regular visitors can't guess the location of your next page, you merely have to include random digits or some text after the date.
One caution: our basic RSS feed does not currently hide future posts. We're working on a Brilliant Idea, but, uh, we haven't had it, yet.
