WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Solved Custom Pagination on Thu Jul 12, 2012 4:32 pm

symphony.roads

avatar
Registered Member
Registered Member
i find the original pagenation from here
and i've modified with this one

i put the HTML codes in viewtopic_body
here's the HTML codes:
Code:
<div class="pagination-edited">{PAGINATION}</div>

And here's CSS:
Code:
.pagination-edited {
body
    margin:0;
    padding:0;
}

.pagination-edited a,.header{
    padding:10px
}
.pagination-edited{
    text-align:left;
    background-color:#transparent;
    float:none;
    padding:10px;
    padding-left:100px;
}
.pagination-edited{
    text-align:left;
    background-color:teal;
    float:none;
    padding:10px;
    padding-left:100px;
}
.pagination-edited a,.button {
    background-color:transparent;
    background-image: url( 'http://i46.servimg.com/u/f46/17/06/83/25/btn_ri10.png' );
    background-repeat:no-repeat ;
    background-position:top right;
    color: #fff;
    display:block; /*opera*/
    display:inline-block; /*ie*/
    display:-moz-inline-box; /*ff*/    /*font: bold 12px arial, sans-serif;*/
    font: normal 13px arial, sans-serif;
    height: 32px;
    margin-right: 0px;
    padding-right: 10px;
    text-decoration: none;
}

.pagination-edited a,.button span {
    background-color:transparent;
    background-image: url( 'http://i46.servimg.com/u/f46/17/06/83/25/btn10.png' );
    background-repeat:no-repeat ;
    display: inline-block;
    line-height: 21px;
    padding: 3px 0 8px 10px;
}

.pagination-edited a,.button span img{
    margin-left:-5px;
    margin-top:-2px;
    padding-right:5px;
}
.pagination-edited a:hover {
    background-image: url( 'http://i46.servimg.com/u/f46/17/06/83/25/btn_ho11.png' );
    color: #fff;
    outline: none;
}

.pagination-edited a:hover span {
    background-image:url( 'http://i46.servimg.com/u/f46/17/06/83/25/btn_ho10.png');
}
.pagination-edited a,.orange {
    background-image: url( 'http://i46.servimg.com/u/f46/17/06/83/25/btn_ri10.png' );
    display:block; /*opera*/
    display:inline-block; /*ie*/
    display:-moz-inline-box; /*ff*/}
.pagination-edited a,.orange span {
    background-image: url( 'http://i46.servimg.com/u/f46/17/06/83/25/btn10.png' );
}

..pagination-edited a:hover {
    background-image: url( 'http://i46.servimg.com/u/f46/17/06/83/25/btn_ho11.png' );
}
.pagination-edited a:hover span {
    background-image: url( 'http://i46.servimg.com/u/f46/17/06/83/25/btn_ho10.png' );
}


and Ooops like this


help me please Very Happy



Last edited by symphony.roads on Tue Jul 24, 2012 4:39 am; edited 1 time in total

2Solved Re: Custom Pagination on Thu Jul 12, 2012 11:22 pm

ankillien

avatar
Administrator
Administrator
Hi,

The pagination buttons need to be wrapped in <span> tags for proper styling. Try adding this javascript via admin panel javascript management...

Code:
$(function(){
    $('.paging a').each(function(){
        $(this).wrapInner('<span></span>');
    });
});

Add it for all pages. It might solve the issue to an extent.

3Solved Re: Custom Pagination on Fri Jul 13, 2012 3:57 am

symphony.roads

avatar
Registered Member
Registered Member
thanks ankillien for your reply, Smile
i've try to add the JS, but the pagenation still same Sad


i think CSS is wrong study

4Solved Re: Custom Pagination on Fri Jul 13, 2012 9:57 am

ankillien

avatar
Administrator
Administrator
The CSS looks fine, the problem is with the HTML. The pagination style is created for different kind of markup than what Forumotion has.

Can you give me link to the forum where you have added the codes?

5Solved Re: Custom Pagination on Fri Jul 13, 2012 11:07 pm

symphony.roads

avatar
Registered Member
Registered Member

6Solved Re: Custom Pagination on Sat Jul 14, 2012 5:44 pm

symphony.roads

avatar
Registered Member
Registered Member
bump sos

7Solved Re: Custom Pagination on Tue Jul 17, 2012 12:53 am

symphony.roads

avatar
Registered Member
Registered Member
bump sos

8Solved Re: Custom Pagination on Tue Jul 17, 2012 12:14 pm

ankillien

avatar
Administrator
Administrator
I'm working on it. The HTML of Forumotion and your script are very different.

It may take some time. I'll let you know one I get it solved Smile

9Solved Re: Custom Pagination on Fri Jul 20, 2012 1:09 am

symphony.roads

avatar
Registered Member
Registered Member
ankillien wrote:I'm working on it. The HTML of Forumotion and your script are very different.

It may take some time. I'll let you know one I get it solved Smile

how i can get fix this problem Rolling Eyes

10Solved Re: Custom Pagination on Sun Jul 22, 2012 8:59 am

ankillien

avatar
Administrator
Administrator
The markup of Forumotion and the script you use differ alot and the CSS is not compatible with Forumotion version. I think you have to mimic the style using your own CSS codes as the CSS codes given on that site won't work on Forumotion.

11Solved Re: Custom Pagination on Tue Jul 24, 2012 4:26 am

symphony.roads

avatar
Registered Member
Registered Member
ankillien wrote:The markup of Forumotion and the script you use differ alot and the CSS is not compatible with Forumotion version. I think you have to mimic the style using your own CSS codes as the CSS codes given on that site won't work on Forumotion.


many thanks ankillien for your explanation Very Happy
maybe I should look for another pagination Razz

solved. request closed Very Happy

12Solved Re: Custom Pagination on Tue Jul 24, 2012 9:45 am

ankillien

avatar
Administrator
Administrator
Solved | Locked

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

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