Templates and Pagination
When you use pagination on the front end of a Joomla site for the first time, you might be surprised to see pagination controls like the ones shown on the right.
Pagination is managed by Joomla, but it's the site template that controls the button styles. Some templates come with built-in support for pagination, and some don't. If your template does not support pagination, you will see pagination controls like the ones on the right. That's because, by default, Joomla builds pagination controls as an HTML "Unordered List".
One solution is to choose a commercial site template that properly supports pagination. Alternatively, you can add pagination support to any template and style the buttons exactly the way you want.
When Joomla renders a pagination list, it looks for a file called pagination.php in the site template's html override directory:
If this file is present, the functions in it are used instead of Joomla's built-in default functions. This allows you to render the pagination controls using any HTML you choose.
Our Demo Template
The template that we use on our demonstration sites makes the pagination buttons look like this:
You can download our demo template below. It's a very small and simple template. You can either use it as a base to develop your own template (you will need to change the top image), or you can take the pagination support from it and add it into your own template. Here's how to do that:
- Download the template and unzip it to a temporary directory.
- Unzip your own template to another directory.
- Copy html/pagination.php from the demo template to the html directory in your own template.
- Edit css/template.css and copy everything after /* PAGINATION BUTTONS */ to your own template css.
- Copy the four "pag-*.png" images from the demo template images directory to the images directory in your own template. You might need to alter the CSS if the directory structure isn't an exact match.
- Edit the xml manifest file of your template and make sure the html folder is included in the list of folders to install.
- Re-zip your template and install it.
If you know a little CSS you can change the colours and other attributes of the buttons. We made our pagination buttons at buttonoptimizer.com.
|Demo Site Template||Version 7.00|