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 nice pagination buttons, and some don't. If your template doesn't, you'll see pagination controls like the ones on the right. That's because, by default, Joomla builds pagination controls as an HTML Unordered List, and without any additional CSS, that will look like the list shown on the right.

One solution is to choose a commercial site template that supports pagination. Alternatively, you can add pagination support to any template and style the buttons the way you like.

In Joomla 3, when Joomla renders a pagination list, it looks for a file called pagination.php in the site template's html override directory:

/templates/template_name/html/pagination.php

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.

In Joomla 4, this method no longer works, and although it is possible to use layouts to override the pagination rendering, it is also now possible to use a pure CSS solution to directly render the Unordered List.

Our Demo Template

In Joomla 3, the template that we use on our demonstration sites makes the pagination buttons look like this:

In Joomla 4, it makes the pagination buttons look like this:

You can download our demo template below and copy its pagination support into your own template:

• 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-xxx.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.

This is a simple template but perfectly usable for most sites. We use it on all our Joomla 3 and Joomla 4 demo sites. It comes with a selection of top images and the title and some of the colours are parameters that you can change in the template configuration. It's designed for a vertical menu in the left panel, and is responsive. It works well with our Simple Responsive Menu, or our Simple Responsive Menu Pro.