Hello,

I am facing the same issue. I incorporated the fix as suggested in this thread into my template.css for the template I have used (Modulus). However, despite that the issue persists.

You can view the issue on my website - www.the-5thelement.com/index.php/news-events/news

Also note that when I use the Article blog view, the pagination displays correctly and you can see the same here - www.the-5thelement.com/index.php/resources/videos

Kindly help. I am not expert with CSS hence need help.

- Anil

P.S.:- Note that in firebug if I change the div class and make it rt-pagination - then the display of the pagination is correctly horizontal as per what I need.

Hello,

I was able to find out some more information.

on the page where the articles list is displayed in list view, the CSS used is "libraries/gantry/css/gantry.css" and the div class used is <div class="pagination"> and I dont know where this div class pagination is coming from.

On the page where the articles list is displayed in blog view, the div class used is <div class="rt-pagination"> which is the correct one and comes from "libraries/gantry/css/joomla.css"

How can I make the articles list view pagination use the joomla.css instead of the default gantry.css?
Anil Dagia wrote:

Hello,

finally found it.

I found that the file "components/com_content/views/category/tmpl/default_articles.php" (and many more files) are using div class="pagination"

Where as the one which displays the pagination horizontally as desired is rt-pagination.

When I changed the php file to use rt-pagination, the pagination display works correctly,

Having done so - I am not sure if changing the php is a better way of handling or whether the CSS should have been changed to include the appropriate entries for div class="pagination" {by the way there are no entries for div class = pagination in any css file}.

Hence I would still seek advise on what would be the best way to handle. I think it would have been better to create entries in CSS file for div class="pagination" and that way any opther piece of php code which uses the same class will also work fine.

But I dont know how to add entries into CSS so that it will achieve the same result.

- AnilAnil Dagia wrote:

add this to your template.css and clear your cache:

div.pagination ul li {
display: inline;
padding-right: 5px;
padding-left: 5px;}

div.pagination ul,
div.pagination p.counter {
text-align: center;}

add this to your template.css and clear your cache:

div.pagination ul li {
display: inline;
padding-right: 5px;
padding-left: 5px;}

div.pagination ul,
div.pagination p.counter {
text-align: center;}