The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

pagination style

View previous topic View next topic Go down

Solved pagination style

Post by xiaomah01 on December 30th 2011, 11:45 pm

how to use this pagination style into forums?

demo:
http://johor.forumn.org/h39-page#?page=2

css:

Code:


.manu {
   PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
.manu A {
   BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #036cb4; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid; TEXT-DECORATION: none
}
.manu A:hover {
   BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid
}
.manu A:active {
   BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid
}
.manu .current {
   BORDER-RIGHT: #036cb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #036cb4 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #036cb4 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #036cb4 1px solid; BACKGROUND-COLOR: #036cb4
}
.manu .disabled {
   BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}


Last edited by xiaomah01 on December 31st 2011, 3:03 pm; edited 1 time in total

xiaomah01
Forumember

Male Posts : 206
Reputation : 7
Language : English|Chinese|malay
Location : malaysia

http://johor.forumn.org/

Back to top Go down

Solved Re: pagination style

Post by Guest on December 31st 2011, 10:48 am

Post a link to your forum that tave multiple pages.

Guest
Guest


Back to top Go down

Solved Re: pagination style

Post by xiaomah01 on December 31st 2011, 11:33 am

Gassy wrote:Post a link to your forum that tave multiple pages.

no ,i mean Replaced default that

Spoiler:

change new one

xiaomah01
Forumember

Male Posts : 206
Reputation : 7
Language : English|Chinese|malay
Location : malaysia

http://johor.forumn.org/

Back to top Go down

Solved Re: pagination style

Post by Guest on December 31st 2011, 12:39 pm

I understanded first, just give the topic link form that image

Guest
Guest


Back to top Go down

Solved Re: pagination style

Post by Omu on December 31st 2011, 1:04 pm

Search in vinewtopic_body :
Code:
 {PAGINATION}
And replace with:
Code:
<div class="pagination-edited">{PAGINATION}</div>
Now go to CSS Stylesheet and put this:

Code:
.pagination-edited {
margin: 1px;
color:#fff;
float:left;
text-transform: uppercase;
margin-left: 5px;
font-size:10px;
font-weight: bold!important;}

.pagination-edited a,.pagination-edited b {
padding: 4px;
color: #0061b0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #DCDCDC;
background: #f1f1f1;}

pagination-edited a:last-child,.pagination-edited a:first-child {
padding:2px!important;}

.pagination-edited b {
padding: 4px;
color: #0061b0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #DCDCDC;
background: #f1f1f1;}

Omu
Active Poster

Male Posts : 1019
Reputation : 86
Language : Romanian, English, French
Location : Romania

http://supportdrops.com/

Back to top Go down

Solved Re: pagination style

Post by xiaomah01 on December 31st 2011, 2:53 pm

Gyzmo wrote:Search in vinewtopic_body :
Code:
 {PAGINATION}
And replace with:
Code:
<div class="pagination-edited">{PAGINATION}</div>
Now go to CSS Stylesheet and put this:

Code:
.pagination-edited {
margin: 1px;
color:#fff;
float:left;
text-transform: uppercase;
margin-left: 5px;
font-size:10px;
font-weight: bold!important;}

.pagination-edited a,.pagination-edited b {
padding: 4px;
color: #0061b0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #DCDCDC;
background: #f1f1f1;}

pagination-edited a:last-child,.pagination-edited a:first-child {
padding:2px!important;}

.pagination-edited b {
padding: 4px;
color: #0061b0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #DCDCDC;
background: #f1f1f1;}

is work cheers

thanks u so many thumleft salut thumleft


Last edited by xiaomah01 on December 31st 2011, 3:03 pm; edited 1 time in total

xiaomah01
Forumember

Male Posts : 206
Reputation : 7
Language : English|Chinese|malay
Location : malaysia

http://johor.forumn.org/

Back to top Go down

Solved Re: pagination style

Post by xiaomah01 on December 31st 2011, 2:54 pm

Gassy wrote:I understanded first, just give the topic link form that image

sorry maybe i misunderstanding salut salut

xiaomah01
Forumember

Male Posts : 206
Reputation : 7
Language : English|Chinese|malay
Location : malaysia

http://johor.forumn.org/

Back to top Go down

Solved Re: pagination style

Post by xiaomah01 on January 1st 2012, 7:22 am

Solved¡£¡£¡£thanks move it salut

xiaomah01
Forumember

Male Posts : 206
Reputation : 7
Language : English|Chinese|malay
Location : malaysia

http://johor.forumn.org/

Back to top Go down

Solved Re: pagination style

Post by Sanket on January 1st 2012, 9:56 am

Topic Solved & Locked

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum