[PhilJ]

Better looking search result pages pagination, easy to customise, v4.0.x and v4.1.x

http://www.xcartmods.co.uk/images/nav.jpg

1) Replace...

skin1/customer/main/navigation.tpl

with...

{* Better looking navigation.tpl - www.xcartmods.co.uk *}
{assign var="navigation_script" value=$navigation_script|amp}
{if $total_pages gt 2}
<div class="navigation">
<ul>
 {if $current_super_page gt 1}
 <li><a href="{$navigation_script}&page={math equation="page-1" page=$start_page}"  title="{$lng.lbl_prev_group_pages}">&laquo;&laquo;</a></li>
 {/if}
 {section name=page loop=$total_pages start=$start_page}
 {if %page.first%}
 {if $navigation_page gt 1}
 <li><a href="{$navigation_script}&page={math equation="page-1" page=$navigation_page}" title="{$lng.lbl_prev_page}">&laquo;</a></li>
 {/if}
 {/if}
 {if %page.index% eq $navigation_page}
 <li title="{$lng.lbl_page} {%page.index%}"><a href="#" class="currentpage">{%page.index%}</a></li>
 {else}
 <li><a href="{$navigation_script}&page={%page.index%}" title="{$lng.lbl_page} {%page.index%}">{%page.index%}</a></li>
 {/if}
 {if %page.last%}
 {math equation="pages-1" pages=$total_pages assign="total_pages_minus"}
 {if $navigation_page lt $total_super_pages*$config.Appearance.max_nav_pages}
 <li><a href="{$navigation_script}&page={math equation="page+1" page=$navigation_page}" title="{$lng.lbl_next_page}">&raquo;</a></li>
 {/if}
 {/if}
 {/section}
 {if $current_super_page lt $total_super_pages}
 <li><a href="{$navigation_script}&page={math equation="page+1" page=$total_pages_minus}" title="{$lng.lbl_next_group_pages}">&raquo;&raquo;</a></li>
 {/if}
</ul>
</div>
{/if}

2) In...

skin1/skin1.css

and

skin1/skin1_admin.css

add...

/* Better looking navigation START - www.xcartmods.co.uk */
.navigation{
 padding: 5px;
}
.navigation ul {
 margin: 0;
 padding: 0;
 text-align: center;
 font-size: 1.0em;
}
.navigation li {
 list-style-type: none;
 display: inline;
 padding-bottom: 1px;
}
.navigation a, .navigation a:visited {
 padding: 4px 4px 4px 4px;
 border: 1px solid #9aafe5;
 text-decoration: none;
 color: #2e6ab1;
 font-weight: bold;
}
.navigation a:hover, .navigation a:active {
 border: 1px solid #2b66a5;
 color: #000;
 background-color: #E2E9F1;
 font-weight: bold;
 text-decoration: none;
}
.navigation a.currentpage {
 background-color: #2e6ab1;
 color: #FFF !important;
 border-color: #2b66a5;
 font-weight: bold;
 cursor: pointer;
 font-weight: bold;
 text-decoration: none; 
}
.navigation a.currentpage:hover, .navigation a.currentpage:active {
 background-color: #2e6ab1; 
 border-color: #9aafe5;
}
/* Better looking navigation END - www.xcartmods.co.uk */