Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Change position of Prev/Next links

Featured Lock Resolved Issue
In the Zaara template, with the Joomla Content - Page Navigation plugin enabled, the "< Prev" and "Next >" links display vertically on the left side of the article, like this:


< Prev
Next >

What needs to be changed in the template so that these links will display on the same line, with "< Prev" at the left margin, and "Next >" at the right margin?

6 Answers

Jakir hasan - Staff

More than a month ago #Permalink
Hi, Could you share the website URL?

Thanks

Sakaane

More than a month ago #Permalink
Here is a sample page:

http://solitarypilot.incyanity.net/index.php/104-holoreel-convention5

As you can see, the presentation of page links for a single article is not that great either.

I also notice that the "Prev" and "Next" text is actually backwards. "Prev" actually goes to the next newest article rather than the next oldest, and "Next" goes to the next oldest instead of the next newest.

Jakir hasan - Staff

More than a month ago #Permalink
Hi, put the below css in the typography.css

.pager ul li{display: inline-block;}

Thanks

Sakaane

More than a month ago #Permalink
That helped with formatting the article page numbers, but the "Prev" and "Next" links are still stacked vertically.

The page numbers are also all preceded by a bullet. This isn't so bad as a separator but the first entry in the list (either "1" or "Start" depending on which article page is being viewed) shouldn't have that showing.

I also now notice that the page numbers do not have any differentiation for the page you're looking at versus the other pages that can be navigated to. Eg, the "1" for page 1 looks the same as all the other page numbers even when you are already on page 1. It should not display or be a different color when on page 1.

Thanks for your help!

Jakir hasan - Staff

More than a month ago #Permalink
Hi, open joomla.css line no. 121

ul.pagenav li {display: inline-block;margin-right: 20px;}

Thanks

Sakaane

More than a month ago #Permalink
That only sort-of achieves what I'm looking for.

However, in looking at this CSS and the source code, the original line 121 combined with line 122 suggests that the formatting is actually intended to be at each margin like I want.

The problem might be the template is inserting both the "pager" and the "pagenav" classes into the ul element for these links, so they aren't playing nice together. If I'm right, the solution is actually to delete "pager" from the ul class in whatever template file generates the block of code for the "Prev" and "Next" links.

(I tried posting the actual code using the [ code ] button but it wouldn't display...)

Getting closer!


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 112
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 108
Toufiq

Toufiq

Total Accepted Answers: 37
Pavel

Pavel

Total Accepted Answers: 4
J

johnny

Total Accepted Answers: 3

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us