Next/prev page links revisited

This is the smarty and html code used in serendipity by default.

{if $footer_prev_page}
<a href="{$footer_prev_page}">&laquo; {$CONST.PREVIOUS_PAGE}</a>&#160;&#160;
{/if}

{if $footer_info}
({$footer_info})
{/if}

{if $footer_next_page}
<a href="{$footer_next_page}">&raquo; {$CONST.NEXT_PAGE}</a>
{/if}

As you can see from this, if a previous page exists it will print the previous page link, and similarly if the next page exists it will print the next page link. However if the pages do not exist the {if} statement simply exits without printing anything.

Adding the greyed out link text
Now how could we change the smarty code so that instead of skipping the link text, it actually inserts the greyed out version? Relatively easily as the following code demonstrates;

{if $footer_info}
{if $footer_prev_page}
<a href="{$footer_prev_page}">&laquo; {$CONST.PREVIOUS_PAGE}</a>&#160;&#160;
{else}
<span class="grey">&laquo; {$CONST.PREVIOUS_PAGE}</span>&#160;&#160;
{/if}
{/if}

{if $footer_info}
({$footer_info})
{/if}

{if $footer_info}
{if $footer_next_page}
&#160;&#160;<a href="{$footer_next_page}">{$CONST.NEXT_PAGE} &raquo;</a>
{else}
&#160;&#160;<span class="grey">{$CONST.NEXT_PAGE} &raquo;</span>
{/if}
{/if}

You'll notice immediately that I've inserted an additional {if} statement for both the previous and next link code. You'll also notice that I've included an {else} statement within the second if statement.

Let me take you back a step and explain a little more about the page footer. The footer info text is only generated for overview pages, it does not appear in detail pages. This is important to know if you're going to play around with the serendipity template files. Knowing this, it makes sense that if you want to alter the default method code you also need to make sure your user is on an overview page. Forget this step and the greyed out previous link text could appear on a detail page. Ah, so you could put some extra text into the detail page as well, yup, you can, but lets stick to dealing with the overview page footer links for now.

The first {if} statement in my page footer asks the question, are we on an overview page, and if the answer is yes, serendipity will then start to process the second if statement. If the answer is no, then we exit the {if} statement and continue on to the footer info text that appears between the links.

The second {if} statement is very similar to the code in the default method, except that it includes an {else} statement. What happens now is that if a previous page exists we insert the link exactly as normal, but if this doesn't exist, then we leave out the <a href...> text, and place a <span> around the link text, and at the same time added the class .grey so that my link text isn't the same color as the footer info text.

My last step is to add the new style to the theme stylesheet, like this;

.grey {
color:#999; }