Pagination Slot Combination

[Former Member]

Hello, can someone please give me code which makes each pagination number slot get surrounded by the same circle like this:


instead of this:




If anyone can help it would be extremely appreciated.

Thank you.

[Former Member]

bump

[Former Member]

Jan 22, 2019 17:27:59 GMT -8 @smithj said:

bump

bump Todge 

[Todge]

Jan 21, 2019 12:55:47 GMT -8 @smithj said:

Hello, can someone please give me code which makes each pagination number slot get surrounded by the same circle like this:


instead of this:




If anyone can help it would be extremely appreciated.

Thank you.

Try adding this to your forums' CSS Styling...

.ui-pagination { 
    border: 1px solid black;
    border-radius: 12px;
    background-color: #ffffff;
    padding: 0px!important;
}
.ui-pagination li > a {
    border: 0px;
}

[Former Member]

Jan 24, 2019 14:51:16 GMT -8 Todge said:

Jan 21, 2019 12:55:47 GMT -8 @smithj said:

Hello, can someone please give me code which makes each pagination number slot get surrounded by the same circle like this:


instead of this:




If anyone can help it would be extremely appreciated.

Thank you.

Try adding this to your forums' CSS Styling...

.ui-pagination { 
    border: 1px solid black;
    border-radius: 12px;
    background-color: #ffffff;
    padding: 0px!important;
}
.ui-pagination li > a {
    border: 0px;
}

Hmm, doesn't seem like it does much. . Can you maybe make all the number links in one slot please?

[Todge]

Jan 24, 2019 17:36:29 GMT -8 @smithj said:

Jan 24, 2019 14:51:16 GMT -8 Todge said:

Try adding this to your forums' CSS Styling...

.ui-pagination { 
    border: 1px solid black;
    border-radius: 12px;
    background-color: #ffffff;
    padding: 0px!important;
}
.ui-pagination li > a {
    border: 0px;
}

Hmm, doesn't seem like it does much. . Can you maybe make all the number links in one slot please?

It should work.. At least on the standard layout...



I assume you have a custom theme? If so can I please have a link to a guest friendly thread with multiple pages..

Thanks.

[Former Member]

Jan 26, 2019 4:43:34 GMT -8 Todge said:

Jan 24, 2019 17:36:29 GMT -8 @smithj said:

Hmm, doesn't seem like it does much. . Can you maybe make all the number links in one slot please?

It should work.. At least on the standard layout...



I assume you have a custom theme? If so can I please have a link to a guest friendly thread with multiple pages..

Thanks.

Well, I don't want all the slots to be combined, only the number slots.
And this is is for the top of the threads list.
And if you register you can look at the theme this is on. 
brickmessage.boards.net/

[Todge]

Jan 26, 2019 16:53:13 GMT -8 @smithj said:

Jan 26, 2019 4:43:34 GMT -8 Todge said:

It should work.. At least on the standard layout...



I assume you have a custom theme? If so can I please have a link to a guest friendly thread with multiple pages..

Thanks.

Well, I don't want all the slots to be combined, only the number slots.
And this is is for the top of the threads list.
And if you register you can look at the theme this is on. 
brickmessage.boards.net/

So it does work but is not doing as you want it to?
I assumed it was for the top of the theads list, as was the image I posted showing it working
And sorry, no.. I use to register to forums to help out with coding etc., but it got a bit ridiculous, so I'll not do that now..

What you are asking is a little more involved as you have to separate the thread numbers from the next and prev buttons, but I'll see what I can do.

[Todge]

Hi @smithj, sorry for the late reply..

Try putting this in you GLOBAL FOOTER...

<script type="text/javascript">
   // Change Pagination Layout...

   $(document).ready(function(){
       var plinks = $('.ui-pagination-slot a');
   
       $(plinks[0]).attr('style','border-right: transparent; border-radius: 5px 0px 0px 5px');
       $(plinks[0]).parent().css('margin-right','0px');
   
       for(p=1; p<plinks.length-1; p++)
       {
           $(plinks[p]).attr('style','border-left: transparent; border-right: transparent; border-radius: 0px');
           if($(plinks[p+1]).html().match(/[\.|\d]/))
           {
               $(plinks[p]).parent().css('margin-right','0px');
           }
           else
           {
               break;
           }
       }
   
       $(plinks[p]).attr('style','border-left: transparent; border-radius: 0px 5px 5px 0px');
   });
</script>

[Former Member]

Feb 16, 2019 16:32:53 GMT -8 Todge said:

Hi @smithj , sorry for the late reply..

Try putting this in you GLOBAL FOOTER...

<script type="text/javascript">
 // Change Pagination Layout...

 $(document).ready(function(){
 var plinks = $('.ui-pagination-slot a');

 $(plinks[0]).attr('style','border-right: transparent; border-radius: 5px 0px 0px 5px');
 $(plinks[0]).parent().css('margin-right','0px');

 for(p=1; p<plinks.length-1; p++)
 {
 $(plinks[p]).attr('style','border-left: transparent; border-right: transparent; border-radius: 0px');
 if($(plinks[p+1]).html().match(/[\.|\d]/))
 {
 $(plinks[p]).parent().css('margin-right','0px');
 }
 else
 {
 break;
 }
 }

 $(plinks[p]).attr('style','border-left: transparent; border-radius: 0px 5px 5px 0px');
 });
</script>

It makes it closer together, but not in the same circle.

[Todge]

Feb 16, 2019 20:37:46 GMT -8 @smithj said:

Feb 16, 2019 16:32:53 GMT -8 Todge said:

Hi @smithj , sorry for the late reply..

Try putting this in you GLOBAL FOOTER...

<script type="text/javascript">
 // Change Pagination Layout...

 $(document).ready(function(){
 var plinks = $('.ui-pagination-slot a');

 $(plinks[0]).attr('style','border-right: transparent; border-radius: 5px 0px 0px 5px');
 $(plinks[0]).parent().css('margin-right','0px');

 for(p=1; p<plinks.length-1; p++)
 {
 $(plinks[p]).attr('style','border-left: transparent; border-right: transparent; border-radius: 0px');
 if($(plinks[p+1]).html().match(/[\.|\d]/))
 {
 $(plinks[p]).parent().css('margin-right','0px');
 }
 else
 {
 break;
 }
 }

 $(plinks[p]).attr('style','border-left: transparent; border-radius: 0px 5px 5px 0px');
 });
</script>

It makes it closer together, but not in the same circle.

It sounds like the CSS for your theme is overriding the CSS in the code I gave you..

I see you put the code in your global header instead of the footer, try moving it to the global footer to see if that then will replace the CSS in your theme.

[Former Member]

Feb 17, 2019 9:59:55 GMT -8 Todge said:

Feb 16, 2019 20:37:46 GMT -8 @smithj said:

It makes it closer together, but not in the same circle.

It sounds like the CSS for your theme is overriding the CSS in the code I gave you..

I see you put the code in your global header instead of the footer, try moving it to the global footer to see if that then will replace the CSS in your theme.

I'm afraid it's the same as the above picture.

[Todge]

Feb 17, 2019 17:16:02 GMT -8 @smithj said:

Feb 17, 2019 9:59:55 GMT -8 Todge said:

It sounds like the CSS for your theme is overriding the CSS in the code I gave you..

I see you put the code in your global header instead of the footer, try moving it to the global footer to see if that then will replace the CSS in your theme.

I'm afraid it's the same as the above picture.

OK.. Can you please try replacing the code I gave you with this modified version...

<script type="text/javascript">
   // Change Pagination Layout...

   $(document).ready(function(){
       var plinks = $('.ui-pagination-slot a');
   
       $(plinks[0]).attr('style','border-right: transparent; border-radius: 5px 0px 0px 5px!important');
       $(plinks[0]).parent().css('margin-right','0px');
   
       for(p=1; p<plinks.length-1; p++)
       {
           $(plinks[p]).attr('style','border-left: transparent!important; border-right: transparent!important; border-radius: 0px!important');
           if($(plinks[p+1]).html().match(/[\.|\d]/))
           {
               $(plinks[p]).parent().css('margin-right','0px');
           }
           else
           {
               break;
           }
       }
   
       $(plinks[p]).attr('style','border-left: transparent; border-radius: 0px 5px 5px 0px!important');
   });
</script>

[Former Member]

Thank you so much! It works!

[Former Member]

Feb 19, 2019 6:07:39 GMT -8 @smithj said:

Thank you so much!  It works!

Todge one problem. On a threads list that has one page, the pagination doesn't look good: