Joomla page break css stijlen
Een pagina met veel inhoud kan worden opgesplitst in meerdere delen. We hebben voor de voorbeeld website een pagina in tweeën geknipt.
Zonder aanvullende stijling ziet deze pagina er als volgt uit.
De structuur van de pagina ziet er als volgt uit.
table.contentpaneopen
td.contentheading a.contentpagetitle Pagina artikel td.buttonheading (align:right width:100%) a img pdf_button.png td.buttonheading (align:right width:100%) a img printButton.png td.buttonheading (align:right width:100%) a img emailButton.png
table.contentpaneopen
td span.small Geschreven door...
td.createdate Datum
td table.contenttoc
th Inhoudsopgave
td a.toclink.active Pagina artikel
td a.toclink nieuwepagina
td a.toclink Alle Pagina's
td
div.pagenavcounter Pagina 1 van 2
content artikel
div.pagenavbar
div Vorige a Volgende
td.modifydate Laatst aangepast ...
span.article_separator
Stijlen
De volgende stijlen zijn reeds behandeld bij voorpagina blog layout: table.contentpaneopen td.contentheading a.contentpagetitle td.buttonheading span.small td.createdate td.modifydate span.article_separator
table.contenttoc Deze stijl geeft de mogelijkheid om de tekst "inhoudsopgave" links te laten lijnen en de tekst wat groter te maken. Bovendien willen we iets meer marge boven en onder bij deze koptekst.
table.contentpaneopen td table.contenttoc th {
text-align: left;
font-size: 14px;
padding: 5px 0 5px 0;
}
a.toclink.active De links zijn al gestijld in de algemene stijlen, echter de actieve link kan hier bold worden gestijld.
table.contentpaneopen td table.contenttoc td a.toclink,
table.contentpaneopen td table.contenttoc td a:visited.toclink { }
table.contentpaneopen td table.contenttoc td a:hover.toclink { }
table.contentpaneopen td table.contenttoc td a.active {
font-weight: bold;
}
div.pagenavcounter Voor deze stijl willen we iets meer ondermarge.
div.pagenavcounter {
margin: 0 0 10px 0;
}
div.pagenavbar We hoeven deze stijlen voor de voorbeeld website niet verder in te vullen.
div.pagenavbar {}
div.pagenavbar a,
div.pagenavbar a:visited { }
div.pagenavbar a:hover { }
Na stijling ziet de pagina er als volgt uit.
|
kolom 1 standaard navigatie.
kolom 2 artikel
kolom 3 de inhoudsopgave of paginatie
een pagebreak module of iets dergelijks?
joomla 1.5 wel te verstaan