How to apply custom CSS on pagination?

Permalink July 18, 2014 at 3:20 PM

Hi to all,

I am working on pagination styling, but no matter what I do, I can't style individual page numbers. To see what I mean, please check the code below:

<?php if ($paginate && $num > 0 && is_object($pl)): ?>
      <div id="pagination" style="margin:0 auto; text-align:center;">
         <?php
         $summary = $pl->getSummary();
         if ($summary->pages > 1):
            $paginator = $pl->getPagination();
         ?>
            <span class="pagination-left" style="display:none;">« <?php echo $paginator->getPrevious('Newer Posts'); ?></span>
            <span class="pagination-right" style="display:none;"><?php echo $paginator->getNext('Older Posts'); ?> »</span>
            <span style="color:#000; font-size:14px;"><?php echo $paginator->getPages(); ?></span>
          <?php endif; ?>
      </div>
   <?php endif; ?>

In a way, I'm only interested in this piece of code:

<?php echo $paginator->getPages(); ?>

I've tried surrounding it with a span tag, but then I can only control the block CSS. My intention is to style numbers with CSS, but I'm stuck and not sure how to proceed further.

If you have any suggestions, it would be very helpful.

Mellow replied on Jul 19, 2014 at 11:26 am Permalink Reply

Another method that I've tried is using a SPAN tag, but it doesn't work on individual numbers:

<?php echo $paginator->getPages('span'); ?>
<span style="padding-left:20px"></span>

I am sure I'm missing something here..

Steevb replied on Jul 19, 2014 at 6:10 pm Permalink Best Answer Reply

Just apply mods to the theme CSS.

Example:

.pagination {float:right;margin:0 10px;clear;both;width:100%;text-align:right}
.pagination  span{margin:0 3px}
.pagination span.currentPage{background-color:#efb700 !important;padding:2px 6px;color:#fff}

Mellow replied on Jul 19, 2014 at 7:23 pm Permalink Reply

Thanks for reply.

I've included it in CCM.BASE.CSS file, but it doesn't work..
Should I modify PHP script that calls pagination?

Mellow replied on Jul 22, 2014 at 4:42 pm Permalink Reply

Managed to fix it. For some reason c5 won't let me to declare two classes at once, so I had to do it separately and it worked. Thanks for helping me.

Post Reply

Delete Post

You are allowed to delete your post for 5 minutes after it's posted.

Delete

Mark Post as Spam

Are you sure you would like to mark this post as spam?

Mark as Spam

Destroy Spammer

This script will report this post as spam and add a permanent IP ban for this user, type "DESTROY" below to continue.

DESTROY SPAMMER

Sign In?

You must have a user account and be signed to perform this action.

This website stores cookies on your computer. These cookies are used to improve your website experience and provide more personalized services to you, both on this website and through other media. To find out more about the cookies we use, see our Privacy Policy.

Forums

Editing (v7+)