Hello peeps
I know you all wondering how do I get a good looking pagination?
Well it pretty simple and easy to do and I'm going to tell you how
![Smile]( "Smile")
Here a screen shot of what we going to achieve
![.png]()
pag.png (Size: 2.62 KB / Downloads: 1)
First off the templates
Quote:Home » Template Sets » themename Templates » Multipage Pagination Templates
in here we have
Quote:multipage
multipage_breadcrumb
multipage_end
multipage_jump_page
multipage_nextpage
multipage_page
multipage_page_current
multipage_page_link_current
multipage_prevpage
multipage_start
so we start with
multipage
The code should be something like this:
Code:
<div class="pagination">
<span class="pages">{$lang->multipage_pages}</span>
{$prevpage}{$start}{$mppage}{$end}{$nextpage}{$jumptopage}
</div>
we need to replace this with this
Code:
<div class="pagination">
<ul class="pagination">
{$prevpage}{$start}{$mppage}{$end}{$nextpage}{$jumptopage}
</ul>
</div>
multipage done.
multipage_breadcrumb
we dont need to do any changes in this one.
multipage_end
We dont need to do any changes to this one too.
multipage_jump_page
That right you guess it nothing to do on this one too.
multipage_nextpage
The code should be like something like this:
Code:
<a href="{$page_url}" class="pagination_next">{$lang->next} »</a>
we need to change it to this
Code:
<li class="previous"><a href="{$page_url}"><strong>{$lang->next}</strong></a></li>
multipage_nextpage done.
multipage_page
The code should look like this:
Code:
<a href="{$page_url}" class="pagination_page">{$i}</a>
we need to change it to this:
Code:
<li><a href="{$page_url}">{$i}</a></li>
multipage_page done.
multipage_page_current
The code should look like:
Code:
<span class="pagination_current">{$i}</span>
we going to change that to this:
Code:
<li class="active"><a href="#">{$i}</a></li>
multipage_page_current done.
multipage_page_link_current
The code should look this:
Code:
<a href="{$page_url}" class="pagination_current">{$i}</a>
We going to change it to this:
Code:
<li class="active"><a href="{$page_url}">{$i}</a></li>
multipage_page_link_current done.
multipage_prevpage
The code should look like this:
Code:
<a href="{$page_url}" class="pagination_previous">« {$lang->previous}</a>
We going to change that to this:
Code:
<li class="disabled"><a href="{$page_url}" class="previous"><strong>{$lang->previous}</strong></a></li>
multipage_start
And the last template we going to change
The code should look like this:
Code:
<a href="{$page_url}" class="pagination_first">1</a> {$lang->multipage_link_start}
And we going to change it to this:
Code:
<li><a href="{$page_url}">1</a> {$lang->multipage_link_start}</li>
Multipage_start done
So now we done the templates we now going to the theme css part
To do this go to:
Quote:Home » Themes » themename
here we have
global.css this is where we going to put in the css
Quote:click global.css and then click Edit Stylesheet: Advanced Mode
and scroll to the bottom
so at the bottom we want to put in the following:
Code:
@media (min-width: 768px)
.pagination {
display: inline-block;
height:41px;
}
.pagination {
position: relative;
display: block;
height:41px;
}
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
height:41px;
}
.pagination>ul {
display: inline-block;
padding: 0;
margin: 0;
color: #FFF;
word-spacing: -.5px;
background: #2c3e50;
border-radius: 6px;
height:41px;
}
.pagination li {
display: inline-block;
margin-right: -3px;
word-spacing: normal;
vertical-align: middle;
height:41px;
}
.pagination li.previous>a, .pagination li.next>a, .pagination li.previous>span, .pagination li.next>span {
min-width: auto;
padding: 12px 17px;
font-size: 16px;
background-color: transparent;
border-right: 2px solid #e4e7ea;
height:41px;
}
.pagination li:first-child>a, .pagination li:first-child>span {
border-left: none;
border-radius: 6px 0 0 6px;
height:41px;
}
.pagination li>a, .pagination li>span {
display: inline-block;
min-width: 41px;
min-height: 41px;
height:41px;
padding: 12px 10px;
font-size: 14px;
line-height: 16px;
color: #FFF;
text-align: center;
background: 0 0;
border: none;
border-left: 2px solid #e4e7ea;
outline: 0;
-webkit-transition: .25s ease-out;
transition: .25s ease-out;
}
.pagination li.active>a, .pagination li.active>span {
color: #fff;
background-color: #1abc9c;
border-color: #dfe2e5;
height:41px;
}
You can change your colors by editing pagination li.active and pagination>ul
hope that helps
![Big Grin]( "Big Grin")
