Page Class Suffix im Template Code verwenden

Das Joomla interne Pageclass Suffix ist eine hervorragende Möglichkeit um mittels weniger Klicks für Variation auf einer Joomla Website zu sorgen. In diesem Tutorial möchten wir Sie zunächst kurz mit den Grundlagen des Page Class Suffix´vertraut machen und Ihnen zeigen wie Sie diesen auch in Ihrem Template Code verwenden können.

Grundsätzliches zum Pageclass Suffix

Das Joomla Page Class Suffix funktioniert grundsätzlich ähnlich wie das Modul Class Suffix, nur gilt dieser eben nicht für Module sondern für Inhaltsseiten, also Artikel, Kategorie und Bereichs Übersichten, Startseite und teilweise auch für Komponenten.

Suffix bedeutet etwas Angehängtes, etwas Aufgestecktes. Umgangssprachlich könnte man es auch einfach als eine "Endung" bezeichnen. Der Seiten Klasse (Pageclass) wird demnach eine von Ihnen bestimmte "Endung" angehängt.

Mit dem Page Class Suffix ist es somit möglich das Layout oder die Formatierung einzelner oder mehrerer Unterseiten ganz oder teilweise zu ändern. Dies eröffnet eine - gerade für größere Webprojekte - sehr interessante Flexibilität.

Die Funktionsweise ist dabei denkbar einfach: hängen Sie einfach dem Menulink der auf die zu verändernde Zielseite (Artikel, Kategorieübersicht, Bereichsübersicht, Startseite, Komponente) verlinkt einen frei bestimmtbaren Suffix im dafür vorgesehenen Feld ("class-Zusatz der Seite") an.

• Menus
• Ihr Menu
• Menu-punkt
• Parameter - System

Screenshot Joomla Page Class Suffix:

Für gewöhnlich beginnt das Page Class Suffix mit einem Bindestrich (-) oder einem Unterstrich (_). Dies ist jedoch optional. Wie bei der Wahl des Suffixes selbst, sind Sie auch hier frei. Bedingung für die Funktionalität ist, dass sich der Suffix genau so, wie Sie ihn in den Menulink Parametern angegeben haben, auch in Ihrer template.css wiederfindet.

Zusätzlich müssen Sie bei der Wahl des Suffix´die allgemeinen Regeln für CSS Selektoren beachten: ein CSS Selektor darf nur aus Groß- oder Kleinbuchstaben, Ziffern, dem Unterstrich (_) und dem Bindestrich (-) bestehen.

Wirkung des Pageclass Suffix

Die Angabe des Suffix ruft nun folgende Änderungen im von Joomla generierten Quellcode hervor:

Ich erkläre Ihnen die Wirkung anhand der Artikel Überschriften:

Ausgabe ohne Pageclass Suffix

Ausgabe mit Pageclass Suffix

Wie Sie sehen verändern sich einzelne Klassen des Quellcodes, indem ihnen der Suffix angehangen wird. Jetzt haben Sie mittels CSS die Möglichkeit auf die veränderten Klassen zuzugreifen.

Nehmen wir an, wir wollen die Überschriften der Zielseite rot einfärben:

Auszug aus der template.css (rhuk_milkyway)

Da Joomla standardmäßig die Überschriften (noch) nicht in den dafür vorgesehenen H1-H6 HTML Tags ausgibt, greift nach Angabe des Suffixes weder der Selektor h2, noch .contentheading, so dass Sie neben Ihren Änderungen (rote Einfärbung) auch die übrigen Styleangaben (font-familiy, font-size etc.) der Ausgangsklasse in Ihren neuen Selektor (.contentheading-MeinSuffix) übernehmen müssen.

Durch die Joomla Template Overrides, mit denen Sie die Ausgabe selbst verändern können, können sie diesen "doppelten Code" auf ein Minimum reduzieren. Das Template BEEZ von Angie Radtke und Robert Deutz macht dies in wohldurchdachter Weise deutlich. 

Welche Elemente werden vom Pageclass Suffix verändert?

An nachfolgende Elemente wird der in den Menuparametern angegebene Suffix standardmäßig angefügt:

Diese Elemente lassen sich also auf Wunsch auf jeder Unterseite anders gestalten. Wenn Sie an die CSS "Nachfahren Regeln" denken, können Sie auch noch zahlreiche weitere - hier nicht aufgeführte Elemente ansprechen.

So könnten Sie beispielsweise das Erstellungsdatum eines Artikels (.createdate) auf einer bestimmten Unterseite fett formatieren:

Wie Sie sehen, kommen Sie mit dem Pageclass Suffix an sehr viele Elemente heran und können diese individuell gestalten. In Kombination mit den Joomla Template Overrides, können Sie auch weiteren Elementen den Suffix anfügen:

Fügen Sie dazu einfach folgenden PHP Code hinter den Namen der Klasse, die Sie damit ausstatten wollen.

Für Artikel:

Für Kategorie/Bereich und Startseite:

Wenn Sie diese Befehle geschickt einsetzen, sind Sie in der Lage fast alle Elemente der Website individuell zu gestallten.

Leider können Sie mit dem Pageclass Suffix jedoch nur solche Elemente ansprechen die von Joomla im Inhaltsbereich generiert werden. An die Elemente des Templates kommen Sie so jedoch nicht heran. Das bringt uns zu dem eigentlichen Anlass dieses Artikels.

Tipp: Mehrere Klassen vergeben und Code sparen

Gibt man im PageClassSufix Feld durch Leerzeichen getrennt weitere CSS Klassennamen an, bspw. "-MeinSuffix layout1", kann man auch diese seperat per CSS ansprechen und so eine Menge Code sparen.

Wie kann man den Page Class Suffix im Template verwenden?

Manchmal erscheint es notwendig für einzelne Unterseiten auch die Elemente des Templates (wie zB.: Header, Footer, linke Spalte, rechte Spalte, Inhaltsbereich etc.) anders zu gestalten. Das Pageclass Suffix kann hier eine Lösung sein.

Um auf den Suffix zuzugreifen, müssen Sie folgenden Code im Head der index.php (JoomlaRoot/templates/IhrTemplate/index.php) Ihres Templates einfügen:

Nun ist der Pageclass Suffix - sofern er angegeben ist - in der PHP Variabel $PageClassSfx gespeichert und wir können ihn an die Template Elemente weitergeben:

Am besten fügt man das neu gewonnenen Suffix natürlich an das BODY Element des Templates an, da man dann mit der "Nachfahren Regel" auf alle folgenden Elemente zugreifen kann:

Gleiches gilt für IDs:

Aber nicht nur das BODY Element, sondern prinzipiell jedes Element des Joomla Templates kann mit dem Suffix belegt werden:

Es eröffnen sich zahlreiche neue und individuelle Gestaltungsmöglichkeiten. So lassen sich (auch) auf diese Weise Spalten ein/ausblenden, Breiten und Höhen, Farben und Formatierungen, Abstände und Hintergründe sehr flexibel gestalten. Der Kreativität sind - wie so oft - keine Grenzen mehr gesetzt!

Gerade für größere Webprojekte hat sich diese Vorgehensweise für uns als äußerst hilfreich herausgestellt.

Zu guter letzt ein Tipp aus der Praxis: der CSS Code wird mit jeder Variation umfangreicher. Achten Sie daher auf sparsamen und intelligenten Code und nutzen Sie die CSS Vererbung soweit es möglich ist.