Current page issue in pagination

#1 / Nov 13, 2012 9:50pm

MikeCJ

47 posts

I am using the following code for pagination (within the Solspace “tag” module):

{tag_paginate}
  
{tag_pagination_links}
         <ul class="pages">
                {first_page}
                        <li><a href="http://{pagination_url}" class="page-first"> First </a></li>
                {/first_page}

                {previous_page}
                        <li><a href="http://{pagination_url}" class="page-previous"> Previous </a></li>
                {/previous_page}

                {page}
                        <li><a href="http://{pagination_url}" class="page-{pagination_page_number} {if current_page}active{/if}">{pagination_page_number}</a></li>
                {/page}

                {next_page}
                        <li><a href="http://{pagination_url}" class="page-next"> Next </a></li>
                {/next_page}

                {last_page}
                        <li><a href="http://{pagination_url}" class="page-last"> Last </a></li>
                {/last_page}
        </ul>
{/tag_pagination_links}
   {/tag_paginate}

Everything is displaying properly except that the current page number is not rendered in bold type with the tag. This makes it very difficult for the user to know what page he or she is on. Where and how do I fix this. I’ve tried:

<strong>{pagination_page_number}</strong>

as shown in the EE docs, but it had no effect.

Please advise.

Thanks,
MikeCJ

EE 2.5

#2 / Nov 14, 2012 10:10am

glenndavisgroup
436 posts

Hi MikeCJ,

Do you have CSS defined for your pagination? If so, can you post it here so we can have a look.

Thank you,

Mike

#3 / Nov 14, 2012 10:34am

MikeCJ
47 posts

Here’s the CSS I created in an external file:
ul.pages { list-style-type: none; } .pages li { display: inline; }

I didn’t know how to do external CSS when the
class="page-{pagination_page_number} {if current_page}active{/if}"

class has both variables and conditionals. So I put the CSS inline in the {page}{/page} tags (I just noticed that the forum “code” tags had kicked this out of the code I previously posted):
style="color: #6e6e6e; padding: 5px;"

I was under the impression that the <strong></strong> tags must be added somewhere within the pagination code, since I couldn’t get those tags to work within my HTML code.

Thanks,
MikeCJ

#4 / Nov 14, 2012 11:01am

glenndavisgroup
436 posts

Not sure if you have this in there but add the following to your CSS:

...some other styles .pages li a.active { font-weight: bold; ...some other settings here }

I hope that helps.

Mike

#5 / Nov 14, 2012 11:40am

MikeCJ
47 posts

That fixed it. I added a few other touches and it’s now very easy to see which page your’re on.

Thanks so much,
MikeCJ

#6 / Nov 14, 2012 11:51am

glenndavisgroup
436 posts

Any time. Glad it worked for you.

Mike

#7 / Nov 15, 2012 2:20pm

Shane Eckert
7174 posts

Hey there MikeCJ,

I am glad that Mike was able to help out. That’s awesome!

If you need anything else, please just let me know by opening a new thread.

Cheers,

Thread

MikeCJ

glenndavisgroup

MikeCJ

glenndavisgroup

MikeCJ

glenndavisgroup

Shane Eckert

Username

Password

Thread