Joomla! 2.5 (Teil 27): Template-Stile und -Parameter

Zusätzliche Templates lassen sich ganz einfach installieren. Wie aber kann man das Aussehen seiner Webseite individuell gestalten? Dafür gibt es in Joomla! ganz unterschiedliche Möglichkeiten. Da wäre zunächst natürlich der klassische Weg: Man entwickelt ein eigenes Template. Sollte euch das jedoch zu aufwendig sein, gibt es noch eine andere Option: Denn vorhandene Templates können über Template-Stile und definierte Template-Parameter – zumindest bis zu einem gewissen Grad – personalisiert werden.

Wir empfehlen:
Joomla!-Training

Bereits mit Joomla! 1.6 wurden die sogenannten Template-Stile eingeführt. Diese Stile ermöglichen es, aus einem Template verschiedene Designs zu machen. Dabei hängen die Stile eng mit den altbekannten Template-Parametern zusammen. Einen Template-Stil könnt ihr euch als einen Satz gespeicherter Template-Parameter vorstellen.

Stile kopieren

Ihr könnt ganz einfach vorhandene Stile kopieren und diese dann euren Wünschen entsprechend verändern. Ruft dazu Erweiterungen>Templates auf und aktiviert das Kontrollkästchen, das vor dem zu kopierenden Template-Stil angezeigt wird.

In der Werkzeugleiste muss auf Kopieren geklickt werden. Joomla! weist den kopierten Stilen einen Standardnamen zu, den man anpassen sollte. Nur so kann man später – wenn sehr viele Stile angelegt werden – nämlich gleich auf den ersten Blick sehen, welcher Stil für welchen Zweck da ist. Um den Stilnamen zu verändern, klickt man diesen an. Im Details-Bereich kann man den neuen Namen eintragen.

Nach dem Speichern wird der neue Stil in der Übersicht angezeigt. Um Änderungen am Stil vorzunehmen, klickt ihr auf dessen Namen. Jetzt kann beispielsweise eine andere Hintergrundfarbe angegeben werden.

Template-Parameter

Dank Parametern lassen sich die Templates teilweise sehr stark individualisieren. Wie stark, hängt letztendlich davon ab, wie viele Parameter ein Template mitbringt. Die Anzahl der verfügbaren Parameter ist dabei übrigens sehr unterschiedlich. Wenn man beispielsweise ein Template von einem der Template-Clubs installiert, das auf dem Gantry-Framework basiert, ist fast das gesamte Layout über Parameter steuerbar.

Um euch die Funktionsweise der Parameter näher zu bringen, greife ich auf das mit Joomla! ausgelieferte Standard-Template Beez 2.0 zurück.

 

Dieses Template soll über die Parameter verändert werden. Größter Vorteil dabei: Änderungen am HTML- oder PHP-Code sind hierbei nicht nötig. Legt zunächst eine Kopie des Standard-Stils an. Somit habt ihr später immer noch das Originaldesign. Ruft dazu Erweiterungen>Templates auf und aktiviert das Kontrollkästchen, das vor dem Eintrag Beez2 – Default angezeigt wird. Klickt anschließend in der Werkzeugleiste auf Kopieren.

Joomla! legt daraufhin eine Kopie des Template-Stils an. Klickt den Namen Beez2 – Default (2) an und weist der Kopie einen neuen Namen (z.B. Beez2 – PSD-Tutorials.de) zu. Stellt diesen Stil anschließend als Standard-Stil ein.

 

Die interessanten Optionen gibt es im rechten Fensterbereich unter Basisoptionen. Dort sind die zu diesem Template verfügbaren Parameter aufgeführt.

 

Bei den meisten Templates werden zu den jeweiligen Parametern Hilfetexte angezeigt, die kurz beschreiben, was es mit den Parametern eigentlich auf sich hat. Zu sehen sind diese, wenn ihr mit dem Mauszeiger über den Text fahrt, der vor den jeweiligen Optionsfeldern angezeigt wird.

 

Bei vielen Templates gibt es mindestens einen Parameter, über den sich die Farbeinstellungen anpassen lassen. Das ist auch bei Beez2 so. Der Parameter nennt sich dort Templatefarbe.

Dieser passt nicht den Seitenhintergrund im Allgemeinen an, vielmehr geht es dabei um die Farbe des Templates. Das betrifft Teile der Schrift und des Logohintergrunds. Stellt zunächst Natur ein, speichert die Änderungen und seht euch das Ergebnis im Frontend an.

Es haben sich tatsächlich nicht nur die Template-Farben verändert, auch die Modulpositionen wurden angepasst.

Somit sieht die Seite jetzt schon mal völlig anders aus. Das Template hat aber noch weitere Parameter zu bieten, dank denen sich das Design noch weiter anpassen lässt. Ein sehr interessanter Parameter, der so übrigens bei sehr vielen Templates vorhanden ist, betrifft das Logo. So kann man auch beim Beez2-Template sehr einfach das eigene Logo in die Seite einfügen. Ohne entsprechenden Parameter müsste man dazu manuell in den Quellcode der Seite eingreifen.

 

Der Parameter im Beez2-Template ermöglicht übrigens nicht nur das Einblenden eines Logos. Wer kein Logo hat, kann das vorhandene Logo auch einfach ausblenden. Klickt dazu innerhalb der Basisoptionen beim Feld Logo auf die Leeren-Schaltfläche und speichert die Änderungen ab. Ein erneuter Blick ins Frontend liefert nun schon ein anderes Bild.

 

Nicht mehr das Logo ist zu sehen, stattdessen wird ein Text angezeigt. Dieser Standardtext lässt sich natürlich ebenfalls anpassen. Entscheidende Bedeutung kommt den beiden Feldern Seitentitel und Seitenbeschreibung zu.

Denn das Template greift automatisch auf die Werte zu, die innerhalb dieser Felder stehen, um daraus den Logo-Text zu generieren. Angenommen, ihr habt ins Seitentitel-Feld PSD-Tutorials.de eingetragen. Im Feld Seitenbeschreibung steht Die besten Tutorials. Die Ausgabe würde in diesem Fall folgendermaßen aussehen:

Selbstverständlich könnt ihr anstelle eines Textes aber auch ein echtes Logo einbinden. Achtet dabei jedoch unbedingt auf die Hintergrundfarbe des Templates. Entweder müsst ihr eurer Logo transparent gestalten, oder ihr weist ihm dieselbe Hintergrundfarbe wie die des Templates zu. Ebenso solltet ihr auf die Größe des Logos achten. So sollte beim Beez2-Template das Logo beispielsweise nicht größer als der dafür vorgesehene Bereich sein.

 

Passt die Größe des Logos am besten immer an, bevor ihr es auf den Server ladet. Eine passende Skalierung findet nämlich praktisch bei keinem Template statt. Anschließend könnt ihr es hochladen. Beim Beez-Template klickt man dazu innerhalb der Basisoptionen im Bereich Logo auf Auswählen. Über den Bereich Dateien hochladen kann das Logo ausgewählt werden. Klickt auf die Datei-suchen-Schaltfläche, sucht das Logo und bestätigt die Auswahl mit Öffnen und Hochladen starten.

Das hochgeladene Bild muss anschließend angeklickt werden. Daraufhin werden automatisch Bildname und Pfad in das Feld Bild Webadresse übernommen. Markiert nun das Logo und klickt auf Einfügen. Nachdem die Einstellungen gespeichert wurden, liefert ein Blick ins Frontend das gewünschte Ergebnis.

 

Das Beez2-Template bietet euch darüber hinaus auch noch die Möglichkeit, die Position der Navigation zu verändern. Der Wert des Parameters Position der Navigation ist standardmäßig auf vor dem Inhalt gesetzt. Das bedeutet, dass die Navigation links vom normalen Seiteninhalt angezeigt wird.

 

Dieses Layout lässt sich verändern. Soll die Navigation beispielsweise am rechten Rand angezeigt werden, stellt ihr bei dem Parameter Position der Navigation den Wert nach dem Inhalt ein.

Auf diese Weise könnt ihr das Template also bereits durchaus passabel individualisieren.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Joomla! für Einsteiger und Aufsteiger

Joomla! für Einsteiger und Aufsteiger

Was liegt wo und ist wie, mit welchem Inhalt verknüpft?! Nach diesem Kurs ist das keine Frage mehr! Mit Joomla! erstellst du Webseiten und behältst deren Inhalte jederzeit im kontrollierenden und koordinierenden Blick.

  • 28 Lektionen in über fünf Stunden Video-Training zum praktischen Umgang mit Joomla!
  • Lerne das CMS von Grund auf kennen und verwalte damit deine redaktionellen Webseiten-Inhalte
  • Praxisnah lernen: inklusive Arbeitsmaterialien zum Mitmachen und Nachvollziehen
  • Auf dem neuesten Stand: Optimiert für die aktuelle Joomla!-Version 3.6

Zum Training