Styling the Concrete5 Pagination

If you had used CSS Frameworks like Bootstrap and Foundation4 you may noticed the default pagination tags that most frameworks used is ‘ul’ and ‘li’ tags, but Concrete5 renders pagination with ‘span’ tag as default. Also Concrete5 does not generate ‘a’ tag with href=# attribute for current pages, so it may become a challenge to get a neat pagination styled with Bootstrap or Foundation. For generating a cool pagination, open your page_list block template, and find where these codes resides and renders pagination:

<?php  if ($showPagination): ?>
    <div id="pagination">
        <div class="ccm-spacer"></div>
        <div class="ccm-pagination">
            <span class="ccm-page-left"><?php  echo $paginator->getPrevious('« ' . t('Previous')) ?></span>
            <?php  echo $paginator->getPages() ?>
            <span class="ccm-page-right"><?php  echo $paginator->getNext(t('Next') . ' »') ?></span>
        </div>
    </div>
<?php  endif; ?>

And replace this chunk of code with this:

<?php  if ($showPagination):?>
    <div id="pagination">
        <div class="pagination">
        <ul class="pagination">
            <li><?php  echo $paginator->getPrevious('« ' . t('Previous'), 'a') ?></li>
            <?php  echo $paginator->getPages('li') ?>
            <li><?php  echo $paginator->getNext(t('Next') . ' »', 'a') ?></li>
        </ul>
        </div>
    </div>
<?php  endif; ?>

Now you should be all well with both Bootstrap and Foundation4. The only issue with this code for Foundation4 users is that this does not highlight current page, for solve this issue just add this code at line 2 after "if ($showPagination):"

<?php 
$paginator->classCurrent='current';
?>

Comments