Welcome Guest ! Please   Login or Register


Check out our latest Premium Themes, Majestic , Majestic - Dark and Musk Themes for MyBB 1.8 Click to Shop Now

Now open for Custom Theme requests : Click to Order Now


Poll: Was this useful?
Yes
No
[Show Results]
 



 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
1.8 HOW TO GET A NICE LOOKING PAGINATION

Tilby David Offline
Junior Member
**

Posts: 1
Joined: Sep 2015
Likes Received : 0

Nationality: United Kingdom

Mood: None

Points: 113.03Points
Post: #1
Smile HOW TO GET A NICE LOOKING PAGINATION

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

Here a screen shot of what we going to achieve
   

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} &raquo;</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">&laquo; {$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
(This post was last modified: 10-05-2015 01:34 AM by Tilby David.)
10-04-2015 11:14 PM
Find
0
Quote




dylanduffy Offline
Junior Member
**

Posts: 3
Joined: Jan 2016
Likes Received : 0

Nationality: United Kingdom

Mood: None

Points: 12.46Points
Post: #2
RE: HOW TO GET A NICE LOOKING PAGINATION

cheers - im going to use this
01-16-2016 07:14 PM
Find
0
Quote




Pasaris Offline
Junior Member
**

Posts: 2
Joined: Jan 2016
Likes Received : 0

Nationality: Pakistan

Mood: None

Points: 5.64Points
Post: #3
RE: HOW TO GET A NICE LOOKING PAGINATION

detailed tutorial very informative, thanks for sharing
01-29-2016 11:03 PM
Find
0
Quote




Subscription Offline
Junior Member
**

Posts: 1
Joined: Apr 2016
Likes Received : 0

Nationality: Undisclosed

Mood: None

Points: 77.86Points
Post: #4
RE: HOW TO GET A NICE LOOKING PAGINATION

Awesome guide on how to add a nice and clean looking pagination to your forum.




____________________________
WP Webinar Plugin
hidemyass coupon
negative seo tricks
04-25-2016 09:55 PM
Find
0
Quote





Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Thumbs Up Make A Nice Breadcrumb Navigation for your site myskins 24 10,818 12-16-2014 01:28 PM
Last Post: rida.rwp

Forum Jump:


User(s) browsing this thread: 1 Guest(s)

About Myskins

MySkins Studio is MyBB Themes Resource Website.

At MySkins Studio, We procreate MyBB Themes both custom MyBB Themes and premium Mybb Themes.We believe in quality and assure you the best MyBB themes at a very reasonable price , that suits your taste.

Feel free to drop in a request and get a quote.