Verbesserte Seitennavigation

So könnte die Navigation aussehenDie Seitennavigation mosPageNav in Joomla! 1.0.x hat nur beschränkte Möglichkeiten zur Gestaltung per CSS. So sind z.B. abgerundete Buttons in variabler Breite nicht möglich. Ebensowenig kann man jedem Button eine eigene Grafik zuweisen. Dieser neue Core-Hack räumt damit auf. Jetzt kann die Navigation z.B. wie bei einem Video-Recorder aussehen.

Installation

Um dies zu erreichen wird die Datei /includes/pageNavigation.php einfach durch die neue Version ersetzt. Sie ist zu 100% API-kompatibel. Das bedeutet, dass alle Komponenten mit der veränderten Version genau wie mit dem Original arbeiten, ohne einen Unterschied zu bemerken.

Laden Sie die Datei herunter, falls Sie das noch nicht getan haben. Entpacken Sie die Datei auf Ihrem lokalen Rechner und laden Sie die Datei pageNavigation.php per FTP in das includes-Verzeichnis Ihrer Joomla!-Installation (Sicherungskopie nicht vergessen!). Ab sofort wird die neue Version verwendet.

CSS-Anpassung

Die neue Seiten-Navigation verwendet folgende CSS-Klassen:

Image

Für die einzelnen Buttons kommt das <a>-Tag zum Tragen, wenn ein Link vorhanden ist, ansonsten wird das <span>-Tag verwendet. Dadurch wird es möglich, aktive und inaktive Buttons zu unterscheiden und mit zwei Hintergrundbildern (links/rechts) auszustatten.

Sprach-Konstanten

Eine weitere Verbesserung wird durch die Einführung zweier neuer Sprachkonstanten erreicht. Dies sind 

  • _PN_PAGE_NX: Seite %1$d von %2$d
  • _PN_RESULTS_NX: Ergebnisse %1$d - %2$d von %3$d
Die Konstanten machen Gebrauch von Ersetzungen unter Berücksichtigung der Reihenfolge, wie im PHP-Manual unter sprintf beschrieben. Dadurch werden Formulierungen möglich, die sich nicht durch simples Aneinanderfügen ergeben. So könnten Sie z.B. in der Sprachdatei /language/german.php 
define( '_PN_RESULTS_NX', '%3$d Ergebnisse, angezeigt %1$d bis %2$d' );
festlegen, was bisher nicht möglich war. Wenn diese Konstanten nicht in der Sprachdatei definiert wurden, wird der alte Aufbau benutzt.

Beispiel

ImageFür dieses Beispiel wurden acht Grafiken im images-Verzeichnis des Templates hinterlegt; vier weiße (first.gif, prev.gif, next.gif und last.gif) für inaktive Buttons und vier blaue (first_a.gif, prev_a.gif, next_a.gif und last_a.gif) für aktive. Die CSS-Deklaration dafür sieht so aus: 

ul.pagenav {
  list-style: none;
  margin-top: 40px;
}
ul.pagenav li {
  float: left;
  margin-right: 8px;
}
ul.pagenav span {
  color: #FFFFFF;
  font-size: 10px;
  font-weight: normal;
  padding: 2px;
}
ul.pagenav li.first span {
  padding-left: 15px;
  background: url(../images/first.gif) left center no-repeat;
}
ul.pagenav li.prev span {
  padding-left: 13px;
  background: url(../images/prev.gif) left center no-repeat;
}
ul.pagenav li.num span {
  background: Transparent;
}
ul.pagenav li.next span {
  padding-right: 13px;
  background: url(../images/next.gif) right center no-repeat;
}
ul.pagenav li.last span {
  padding-right: 15px;
  background: url(../images/last.gif) right center no-repeat;
}
ul.pagenav a {
  color: #6B95F0;
  font-size: 10px;
  font-weight: bold;
  padding: 2px;
}
ul.pagenav a:active,
ul.pagenav a:hover {
  text-decoration: none;
}
ul.pagenav li.first a {
  padding-left: 15px;
  background: url(../images/first_a.gif) left center no-repeat;
}
ul.pagenav li.prev a {
  padding-left: 13px;
  background: url(../images/prev_a.gif) left center no-repeat;
}
ul.pagenav li.num a {
  background: Transparent;
}
ul.pagenav li.next a {
  padding-right: 13px;
  background: url(../images/next_a.gif) right center no-repeat;
}
ul.pagenav li.last a {
  padding-right: 15px;
  background: url(../images/last_a.gif) right center no-repeat;
}

Zudem wurden in der Sprachdatei folgende Zuordnungen gemacht: 

/** pageNavigation */
DEFINE('_PN_PAGE_NX', 'Seite %1$d von %2$d');
DEFINE('_PN_START', '');
DEFINE('_PN_PREVIOUS', 'Vorherige');
DEFINE('_PN_NEXT', 'Nächste');
DEFINE('_PN_END', '');
DEFINE('_PN_RESULTS_NX', 'Ergebnisse %1$d-%2$d von %3$d');

Viel Spaß mit Ihrer neuen Seitennavigation!