How to style default Joomla! 1.5 Pagination with CSS

Most of the sites we design have plenty of fancy elements, but we always end up with a simple or unstyled page navigation list. The PSD always looks unique, but the web version falls short of the designers’ expectations. This is because there are no CSS selectors on the arrows, start, prev, next, end or numbers.

I probably looked at the custom pagination.php 100 times, before realizing how simple it was to add a CSS class to each element.

Ok, time for the good stuff. Here are the simple steps required to add CSS classes to your Joomla! page navigation (pagination) elements:

  1. Create a file named pagination.php in the “html” folder of your template directory. The file structure should be “/templates/yourtemplatename/html/pagination.php”.
  2. Copy the content of this file (pagination.txt) to your newly created pagination.php file.
  3. Open pagination.php and replace this:
    function pagination_item_active(&$item) {
    return "<li><a href=\"".$item->link."\" title=\"".$item->text."\">".$item->text."</a></li>";
    }
    function pagination_item_inactive(&$item) {
    return "<li><span>".$item->text."</span></li>";
    }

    with this:

    function pagination_item_active(&$item) {
    
    //Custom variable created to use as the element class
    $item_class = strtolower($item->text);
    if(is_numeric ($item_class)) {
    $item_class .= " number";
    }
    return "<li class=\"".$item_class."\"><a href=\"".$item->link."\" title=\"".$item->text."\">".$item->text."</a></li>";
    }
    
    function pagination_item_inactive(&$item) {
    
    //Custom variable created to use as the element class
    $item_class = strtolower($item->text);
    if(is_numeric ($item_class)) {
    $item_class .= " number";
    }
    return "<li class=\"".$item_class."\"><span>".$item->text."</span></li>";
    }

Now the li elements of each pagination item should have a class that matches the text of the element. In addition, the numbers should have a second class of “number.”

Your HTML should look like this:

<ul class="pagination">
    <li class="start"><span>Start</span></li>
    <li class="prev"><span>Prev</span></li>
    <li class="1 number"><span>1</span></li>
    <li class="2 number"><a title="2" href="/category/Page-2">2</a></li>
    <li class="3 number"><a title="3" href="/category/Page-3">3</a></li>
    <li class="next"><a title="Next" href="/category/Page-2">Next</a></li>
    <li class="end"><a title="End" href="/category/Page-3">End</a></li>
</ul>

Here is a live example of how I used this technique (along with CSS) to create a styled pagination: http://www.springmountainmotorsports.com/news-press

If you are deathly afraid of modifying code yourself, you can copy the completed code by clicking here.

Be Sociable, Share!
Tarik Assagai
Tarik (@tarik916) is a web developer and owner of ACS Digital Media, a Sacramento based web development agency specializing in open source CMS systems. If you are looking for support for your current or upcoming projects, visit www.acs-digital.com.

16 Comments

  1. Thanks for posting this. Styling pagination is a commonly perceived dead-end for people trying to build their first Joomla templates. Your solution is a quick fix but without being a cheap shortcut.

  2. Matthieu /

    I probably looked at the custom pagination.php 100 times, I was about to give up when I got acquainted with your tuto !
    Thank you !!

  3. Murder /

    Good job!

  4. Hi, I found this tutorial extremely useful; however, for some odd reason, my pagination is coming out backwards:( So it’s displaying as End – Next – 2 – 1 – Previous – Start.

    It’s like it’s reading right to left and I can’t figure out what’s going on. Do you have any idea?

    Please help –

    • tarik916 /

      I’m glad this was helpful. Backwards pagination is almost always due to incorrect CSS float formatting.

  5. Hi, extremely useful overview! I was searching for a solution for awhile now. I got the pagination.php covered, but where should i put the HTML? Thanks !

    • tarik916 /

      Sorry, I’m not sure what you mean by this. Once you have modified the pagination.php file, you can use CSS to manipulate the layout.

  6. Sean /

    Thanks Tarik,

    This is such an elegant solution. I wasted an hour before I searched for and found this.

    Thanks a lot,

    Sean.

  7. Sean /

    Just for the record, this worked very well on Joomla 2.5.x also…..without adding any css.

    Sean.

  8. Thanks a lot, I was in a great trouble of this paging issue. You will be happy to know that my issue was not in joomla but still the code helped me to get the correct pagination. Thanks

  9. Alberto /

    I have a problem with the pagination the next and prev appear but the numbers between them didn’t appear.. I need a help… would you please help me with that?

  10. Dirk /

    Many thanks. A very good idea and a simple realisation. Perfect.

    Dirk

  11. Thank you!!! It works!

Leave a Reply