Read this first !

Joomla 1.5 styles

Joomla 1.6 / 1.7 / 2.5 Styles

Sub Menus

Build your own template

Video Tutorials

Test Your Website

Project Support

Download

Visitors



43.3%Netherlands Netherlands
5.9%Germany Germany
5.9%United States United States
3.9%Belgium Belgium
3.9%India India
3.8%Spain Spain
3.3%Italy Italy
3.2%Poland Poland
2.6%France France
2.5%United Kingdom United Kingdom
2.3%Greece Greece
1.6%Russian Federation Russian Federation
1.2%Japan Japan
1.1%Australia Australia
1.1%Canada Canada

Today: 138
Yesterday: 332
This Week: 1924
Last Week: 2391
This Month: 6081
Last Month: 9098
Total: 25249


Pagination General

  • Print

This pagination is shown on blog and list pages. The pagination for Single articles is different.

 

Structure with classes and id's

 

p.counter
ul
	li.pagination-start
		span.pagenav

	li.pagination-prev
		span.pagenav

	li
		span.pagenav

	li
		a.pagenav

	li.pagination-next
		a.pagenav

	li.pagination-end
		a.pagenav

 

Print screen without additional CSS

 

Paginatie

 

CSS

 

/* -------------------
   General Pagination
--------------------- */
div.pagination {
	clear: both;
	text-align: center;
	margin: 15px 0 0 0;
}

div.pagination p.counter {
	font-style: italic;
}

div.pagination ul {
	list-style: none;
	padding: 0;
}

div.pagination ul li {
	list-style: none;
	display: inline;
	padding: 0 5px 0 5px;
}

 

Print screen after applying CSS

 

Paginatie

Comments (10)
  • 1901-12-13 20:45:52 |Unregistered| flashfs  - Thanks
    Thanks for the tip. Used it on my site.
    Reply
  • 1901-12-13 20:45:52 | |Unregistered| Rick Ortiz  - Exactly what I needed.
    Dude, you rock! This code was exactly what I needed. Thanks much!
    Reply
  • 1901-12-13 20:45:52 |Unregistered| Eclectic  - What I'm doing wrong?
    I'm developing a joomla 1.6 component using pagination, I've put this css code in the template.css file at templates -> beez_20 -> css (the template I'm using at the moment) but the pagination still displays vertical. What I'm doing wrong?. Thanks for help.
    Reply
  • 1901-12-13 20:45:52 |Unregistered| Keith Pickett  - Oops, filters got me
    The URL washer caught me. In the comment above, if your template directory is "mytemplate", then the path would be:
    webroot/templates/mytemplate/html/com_content/default.php or something like that.
    Reply
  • 1901-12-13 20:45:52 |Unregistered| Keith Pickett  - Works like a charm on J1.6
    Thanks! This is truly plug 'n play and works out of the box.
    One note, however, in answering Rui's question. Could you not create an HTML entry for com_content under /templates//html/com_content/ and then dupe the code for pagination and place it at the top? Just a thought.

    Thanks again,
    Keith
    Reply
  • 1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden  - Re: pagination duplication
    This is not possible with CSS. You have to adjust some core files of Joomla. Ask the question in the Joomla forum.
    Reply
  • 1901-12-13 20:45:52 |Unregistered| Rui  - pagination duplication
    Hi,

    First of all would like to thank you for all the information here. I would like to know how to duplicate the pagination links so that the navigation appears at the top and bottom of articles (now it only appear at the bottom of the article).

    Hope to hear from you soon, kind regards

    Rui
    Reply
  • 1901-12-13 20:45:52 |Unregistered| Wiyono  - Look this
    Thank you so much... and sorry my English not good..
    I was doing like your post...
    And i have so:
    http://misha-tattoo.de/content/general/joomla-6/referenzen

    What i have to do again...
    If many file you can send to my email...

    Thank you so much...
    Reply
  • 1901-12-13 20:45:52 | |Unregistered| Rob van Oudheusden  - Pagebreak
    The pagecounter is at the bottom of the text for the general pagination. Onliy for a single article with more than one page (pagebreak) is the pagecounter above the content. What do you want to change?
    Reply
  • 1901-12-13 20:45:52 | |Unregistered| wiyono  - im confused
    joomla 1.6
    page counter in top of text...
    and next and prev at the down of text..
    How to change that?

    Thank you
    Reply
Post a commment or ask a question!
Your Contact Details:
Comment:
Security
Please input the anti-spam code that you can read in the image.