NAVIGATION
This is an old revision of the document!
Es besteht die Möglichkeit, Artikel aus der Listendarstellung heraus zu paginieren, z.B. von 6 vorhandenen Artikeln jeweils 3 auf einer Seite anzuzeigen.
Frontendausgabe 02: Spiel mit Parametern siehe conf.template_default.inc.php (Little play)
Annahme: 6 Artikel vorhanden, 3 sollen pro Seite angezeigt werden.
ADMIN → Seitenstruktur → Kategorie
Dazu wird bei eingeschalteter Paginierung eine eigene Navigation eingeblendet.
Diese Navigation wird in der Datei /config/phpwcms/conf.template_default.inc.php konfiguriert:
// Original // $template_default['article_paginate_navi'] = '<div class="paginate paginate-{POS}">{PREV:«} {NEXT:»} page #/##, result ###-####, {NAVI:1-3, |<span>|</span>}</div>'; // {NAVI:123, // Little play $template_default['article_paginate_navi'] = '<div class="paginate paginate01-{POS}"> [ {PREV:«} -- {NEXT:»} ] [Seite (page) # von (off) ##] [Resultat (result) ###-####] [{NAVI:1-3,> ↔ <|<span><|></span>}]</div>'; // {NAVI:123, $template_default['article_paginate_show'] = 'top bottom rt{RT}'; //where should the navi be shown - possible values: top and/or bottom and/or rt:{RT}
/* Article pagination -------------------- */ div.paginate{ width: 603px; height:16px; border: 1px solid #ccc; margin-bottom: 5px; font-size: 110%; } div.paginate-top{ background: yellow; } div.paginate-bottom{ background: lightgreen; clear: both; } /* Little play --------------- */ div.paginate01-top{ background: gold; } div.paginate01-bottom{ background: aquamarine; clear: both; }
Annahme: Der umschließenden Container hat eine Breite von 700px.
Die Container für jeden Artikel haben eine Breite von 300px. Mit float: left; reihen wir nun diese Container aneinander, bis das Breitenmaß des umschließenden Containers erreicht ist.
/* Article list --------------------------- */ .phpwcmsArticleListEntry { clear: both; } /* Article list float --------------- */ .phpwcmsArticleListEntry-float { float: left; width: 288px; height: 170px; border: 1px solid #ccc; background: #eee; padding-left: 10px; margin: 0 5px 5px 0; } .phpwcmsArticleListImage { float: left; margin-right: 10px; margin-bottom: 10px; padding-top: 3px; } .phpwcmsArticleListImageCaption { padding-top: 5px; } .phpwcmsArticleListEntry-float { float: left; width: 288px; height: 170px; border: 1px solid #ccc; background: #eee; padding-left: 10px; margin: 0 5px 5px 0; } /* ---------------------------------------- */