Joomla CSS - Uw bron voor CSS stjlen!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.

Page break zonder aanvullende stijling 

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.

Page break gestijld 

 

Commentaar (5)
  • Roy  - page break
    is het mogelijk om de paginatie in een module blok weer te geven? Ik heb een drie koloms layout.
    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
  • Rob van Oudheusden  - Pagebreak
    Een pagebreak knipt een (lange) pagina op in meerdere deelpagina's, die via de paginatie aan de onderzijde van het artikel kunt bereiken. De pagebreak is dus een functie en geen module. Je kunt de pagnatie dus niet in een andere module weergeven.

    Ik weet alleen niet of je dit bedoeld of wat het probleem is. Ik zal je nog een apart e-mailtje sturen met dit antwoord en wellicht wil je nog uitleggen wat de bedoeling is.

    Rob van Oudheusden
    Jooomla CSS
  • Peter  - pagebreak zonder inhoudsopgave
    Is het mogelijk om bij een in stukken geknipte pagina (d.m.v. pagebreak) de inhoudsopgave boven aan de pagina uit te zetten. Dus alleen via de paginatie aan de onder zijde van het artikel naar de volgende pagina van het desbetreffende artikel te gaan.

    vriendelijke groet,
    Peter
  • Rob van Oudheusden  - pagebreak
    De inhoudsopgave wordt gestijld met
    table.contenttoc

    Wanneer je deze niet wilt tonen maak je de volgende stijl.

    table.contenttoc { display: none }
  • Peter  - dank
    hartelijk dank voor het snelle antwoord, ik ga er snel mee aan de slag.

    geweldige site trouwens

    groet,
    Peter
Schrijf commentaar
Uw contact gegevens:
Commentaar:
Beveiliging
Voer de anti-spam code in die in het plaatje staat.