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


Page Break

  • Print

A Page Break splits an article into sub pages. Above the content of the article there is an article index, and below the article content there is a pagination.

 

Print screen without additional CSS

 

Pagina opsplitsing

 

For a visitor of the website it is not clear which pagination belongs to the page break and which belongs to the Single Article pagination. To solve this we want to hide the Single Article pagination. As a result, this pagination will not be visible anymore on other pages with a Single Article pagination.

 

CSS

 

ul.pagenav {
	display: none;
}

 

Now we only see the page break pagination.

 

Print screen without additional CSS

 

Paginatie Paginaopsplitsing

 

Structure with classes and id's

 

Article Index
-------------
div#article-index
	ul
		li a.toclink
		li a.toclink
		li a.toclink
		etc.
div.pagenavcounter

Pagebreak navigation
--------------------
div.pagination
	ul
		li
		li a

 

The structure and classes of the Page Break is almost the same as the General Pagination. To style this pagination we add the path to this pagination in the CSS statement (div.itempage) to style it unique.

 

/* ------------------------------
   Pagebreak
------------------------------ */
/* Article index */
div#article-index {
	padding: 0 0 5px 0;
}

div#article-index ul {
	list-style: none;
	padding: 0;
}


div#article-index ul li a.toclink {
	font-style: italic;
	text-decoration: none;
}

div#article-index ul li a:hover.toclink {
	font-style: italic;
	text-decoration: none;
}

div.pagenavcounter {
	padding: 0 0 15px 0;
}

/* Article index Pagination */
div.item-page div.pagination {
	float: left;
	margin: 15px 0 0 0;
}

div.item-page div.pagination ul li {
	float: left;
	border: 1px #888 solid;
	margin: 0 10px 0 0;
	padding: 1px 0 0 0;
	width: 100px;
	height: 18px;
	background-color: #e5e5e5;
}

div.item-page div.pagination ul li:hover {
	float: left;
	border: 1px #888 solid;
	margin: 0 10px 0 0;
	padding: 1px 0 0 0;
	width: 100px;
	height: 18px;
	background-color: #ccc;
}

div.item-page div.pagination ul li a {
	display: block;
	color: #555;
	font-style: italic;
	text-align: center;
	text-decoration: none;
}

div.item-page div.pagination ul li a:hover {
	display: block;
	color: #000;
	font-style: italic;
	text-align: center;
	text-decoration: none;
}

 

Print screen after applying CSS

 

Pagina opsplitsing

Comments (7)
  • 1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden  - RE Asking question
    This is a site for only CSS, not instructions about Joomla. Just look on www.joomla.org for manuals.
    Reply
  • 1901-12-13 20:45:52 |Unregistered| ratanak  - Asking a question
    Hi! I'd like to ask one question. How to make pagebreak in joomla 1.5?
    Reply
  • 1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden  - RE: Break page with background color
    You have to send me your website address for help.
    Send it to info@joomla-css.nl
    Reply
  • 1901-12-13 20:45:52 |Unregistered| Hung Tran  - Break page with background color
    How can I using break page and apply background color?
    I tried apply background color page.It is work for all page, but does not work for every single page.!!!
    Can You help me, Please ?
    Thank you .
    Reply
  • 1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden  - Re: Article TOC styling
    The pagebreak article index in Joomla 1.7 is a list of links at the top and a pagination at the bottom of the article.

    There is no way to creatie a dropdown list from the ul list at the top of the page with CSS. Post this topic on the forum of Joomla. Maybe they can help you.
    Reply
  • 1901-12-13 20:45:52 |Unregistered| Eyup Ozturk  - Artcile TOC styling - Examples
    For clarification :

    This is the Article TOC I had in J! 1.5 :
    http://muhendispc.com/index.php?option=com_content&view=article&id=191: solidworks-donanm-ihtiyac-ve-performans-testi&catid=48:cad-cam&Itemid=453

    This is what I have in J! 1.7 :
    http://fix.muhendispc.com/program/cad-cam/122-solidworks-donanim- performans.html

    thanks a lot.
    Reply
  • 1901-12-13 20:45:52 |Unregistered| Eyup Ozturk  - Article TOC styling
    Hi. Thanks for the great stuff here.I have a problem with Article TOC. All I wanted to have was a listbox showing the article pages, and ı did that by using J!1.5 component called ddtoc_break, it was problematic but it worked. On J!1.7 I do not have that component anymore. How can I syle the Article TOC ?
    I want a two colum, full width layout at the start of each page and a dropdown menu at the bottom of page. Can you help ? Thanks a lot.
    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.