Tutorial: change page navigation to blog style

If you're interested in a cleaner look for your page navigation, consider changing up to a blog style navigation with just a "previous page" and "next page" button...very easy to do.

Step 1.

In showlistings.tpl at the bottom of the page

Delete this code:

Code:

{if $maxPage > 1 && ($sPagination==1 || $sPagination==3)}
<div class="pageNav">
{* display pagination *}
    <table class="pagination" cellpadding="3" cellspacing="1" border="0" align="right" style="margin-bottom:3px">
        <tr>
            <td class="navigationBack" style="font-weight:normal">{$smarty.const.LANG_SHOWING_PAGE} {$pageNum} {$smarty.const.LANG_SHOWING_PAGE_OF} {$maxPage}</td>
 
            {if $first<>""}
            <td class="paginationNum"><a href="{$file}?{$first}">{$smarty.const.LANG_FIRST}</a></td>
            {/if}
 
            {if $prev<>""}
            <td class="paginationNum"><a href="{$file}?{$prev}">{$smarty.const.LANG_PREVIOUS}</a></td>
            {/if}
 
            {foreach from=$pageNumber item="entry"}
                {if $entry.number==$pageNum}
                <td class="paginationNum"><strong>{$entry.number}</strong></td>
                {else}
                <td class="paginationNum"><a href="{$file}?{$entry.link}" class="paginationNum">{$entry.number}</a></td>
                {/if}
            {/foreach}
 
            {if $next<>""}
            <td class="paginationNum"><a href="{$file}?{$next}">{$smarty.const.LANG_NEXT}</a></td>
            {/if}
 
            {if $last<>""}
            <td class="paginationNum"><a href="{$file}?{$last}">{$smarty.const.LANG_LAST}</a></td>
            {/if}
 
        </tr>
    </table>
</div>
<br /><br />
{/if}

Replace it with this simple code:

Code:

{if $maxPage > 1 && ($sPagination==2 || $sPagination==3)}
<div class="pagenav">
    {if $prev<>""}
    <div class="previous">
        <a href="{$file}?{$prev}">&laquo; Previous Page</a>
    </div>
    {/if}
    {if $next<>""}
    <div class="next">
        <a href="{$file}?{$next}">Next Page &raquo;</a>
    </div>
    {/if}
</div>
{/if}

Step 2.

Style the buttons to whatever your website looks like, an example is below:

Code:

.pagenav {
    font: normal 14px Arial, Helvetica, sans-serif;
    overflow: hidden;
    margin-top: 20px;
}
.pagenav a {
    background-color: #000;
    border: 1px solid #6a6a6a;
    color: #ffc;
    display: block;
    line-height: 31px;
    width: 140px;
    text-align: center;
    text-decoration: none;
}
.pagenav a:hover {
    color: #fff;
}
.previous a {
    float: left;
}
.next a {
    float: right;
}

The final product:




Doing this simple modification gave me the look my customer wanted and was very easy to implement.