Les Arbres Web Solutions

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 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 you can render the pagination controls using custom code in this file:

/templates/template_name/html/pagination.php

In Joomla 4 and 5, you can use a custom layout to override the pagination rendering, or you can use CSS to directly style the list.

Our Demo Template

In Joomla 3, our demo template uses a custom pagination.php file to make the pagination buttons look like this:

In Joomla 4 and 5, it uses CSS to make 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 many sites, and a good starting point if you want to create your own template. We use it on all our 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.

Demo Site Template Joomla 3Version 14.05
Demo Site Template Joomla 4 & 5Version 16.01