How to apply custom CSS on pagination?

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;">
         $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; ?>
   <?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.

View Replies: View Best Answer
Mellow replied on at 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 at Permalink Best Answer Reply
Just apply mods to the theme CSS.

.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 at 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 at 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.