Rheinwerk Computing :: Joomla! 3 - Layout und Design anpassen

10.5 Template anpassen

Man verbringt Stunden mit der Suche nach dem idealen Template, und doch gibt es immer wieder kleinere Aspekte, die nicht zu den idealen Vorstellungen passen. Das ist normal, denn kein Templateentwickler kann alle Layout- oder Formatierungsszenarien, die einer Website abverlangt werden, voraussehen. Haben Sie das Template installiert, das den Anforderungen am nächsten kommt, nutzen Sie deshalb Joomla!- und template-spezifische Mechanismen, um an den Feinheiten zu feilen. Auf den folgenden Seiten lernen Sie, wie man einfache Modifikationen in den Template-PHP-Dateien vornimmt, zusätzliche CSS-Styles auf das vorhandene Design anwendet und, schließlich, wie sich das komplette Layout und Design bearbeiten lässt.

Achtung: Dokumentieren Sie alle Änderungen am Template

Für Templates gibt es keinen Mechanismus, der Modifikationen vor einem Überschreiben bei einer Templateaktualisierung schützt. Dokumentieren Sie deshalb Ihre Änderungen akribisch, und legen Sie Sicherheitskopien der modifizierten Dateien an. Idealerweise arbeiten Sie mit einer Kopie des Templates wie in Abschnitt 10.5.4, »Template-Overrides einsetzen«, beschrieben.

Hinweis: Template-Updates gibt es zwar selten, und sie sind noch seltener sicherheitskritisch. Ignorieren Sie sie jedoch nicht, denn insbesondere komplexere Templates (z. B. bei Verwendung eines Template-Frameworks) können Sicherheitslecks aufweisen, die wie bei jeder anderen Erweiterung gestopft werden müssen.

10.5.1 HTML-Code ergänzen

In manchen Fällen möchten Sie HTML-Code im Template ergänzen, z. B. für die Einbindung von JavaScript- oder CSS-Frameworks, zusätzlichen Meta-Header-Tags (Stichwort Fav- und Touchicons), Google-Analytics-Tracking-Codes oder vielleicht einer zusätzlichen Icon-Schrift. Professionelle Templates erlauben solche Ergänzungen über ihre Templatekonfiguration, z. B. über sogenannten Custom Code. Bietet Ihr Template diese Option jedoch nicht, kommen Sie nicht darum herum, direkt in den HTML-Code des Templates einzugreifen.

Templates bestehen zwar gemittelt aus Dutzenden Dateien, jedoch gibt es eine zentrale Anlaufstelle, die das fundamentale HTML-Gerüst bereitstellt: die Datei index.php, die Sie im Hauptverzeichnis des Templates (vom Joomla!-Hauptverzeichnis ausgehend unter /templates/IHR-TEMPLATE-NAME/) finden.

Öffnen Sie die Datei index.php mit einem Texteditor, sehen Sie ein auf den ersten Blick chaotisches Durcheinander von PHP und HTML. Aber das System ist simpel: Grundsätzlich handelt es sich bei der index.php um eine ganz normale HTML-Seite, die zusätzlichen Platzhaltercode enthält. Mit PHP werden diese Platzhalter während der Seitengenerierung zur Laufzeit durch echte Inhalte aus der Datenbank von Joomla! ersetzt. In der Datei erkennen Sie solche Includes z. B. am Tag <jdoc:include type="modules" name="position-0" style="none" />. Weiterer PHP-Code dient vornehmlich dazu, das Auffüllen der Platzhalter vorzubereiten.

Sie behandeln die index.php also wie eine normale HTML-Seite und durchforsten sie auf der Suche nach dem per <head> und </head> definierten HTML-Header. Zwischen diese Tags setzen Sie dann beispielsweise die eingangs erwähnten Fav- und Touchicons; ein Quellcodebeispiel im Protostar-Template:

<head>
   […]
   <!--[if lt IE 9]>
      <script src="<?php echo $this->baseurl; ?>/media/jui/js/html5.js">
      </script>
   <![endif]-->
   <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
   <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
   <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="96x96">
</head>

Oder möchten Sie vielleicht die Copyright-Zeile dauerhaft aus dem Webseitenfooter des Protostar-Templates entfernen? Scrollen Sie ans Ende der index.php, und entfernen Sie einfach den kompletten <p>-Paragrafen, der mit dem Copyright-Zeichen © beginnt.

[…]
         <p>
            &copy; <?php echo date('Y'); ?> <?php echo $sitename; ?>
         </p>
      </div>
   </footer>
   <jdoc:include type="modules" name="debug" style="none" />
</body>
</html>

Solche Anpassungen oder Tweaks an der index.php-Datei eines Templates haben allerdings ein Problem. Gibt es ein Update des Templates oder – im Falle von Protostar – von Joomla!, werden all Ihre Änderungen mit einer neuen Version der index.php-Datei überschrieben. Damit das nicht passiert, legen Sie daher, noch bevor Sie irgendwelche Templating-Tweaks durchführen, eine Kopie des Templates an, in der Sie freie Hand haben. Abschnitt 10.5.4, »Template-Overrides einsetzen«, geht näher auf diese Konvention ein und erklärt noch mehr zum Innenleben der Templates.

10.5.2 Personalisierte CSS-Dateien verwenden

Die einfachste Art und Weise, das Aussehen von Templates zu beeinflussen, ist die Verwendung eines CSS-Overrides, das Überschreiben existierender CSS-Styles. Das ist kein Joomla!-spezifischer Mechanismus, sondern Bestandteil der Funktionsweise von Cascading Stylesheets: Später geladene Style-Definitionen überschreiben zuvor festgelegte.

Verwendet das Template Ihrer Wahl ein Template-Framework, ist das Einbinden solcher benutzerdefinierter Styles einfach, da oft ein Mechanismus vorgesehen ist, der automatisch nach personalisierten CSS-Dateien sucht – man muss nur wissen, wie der Dateiname lautet. Beispiele bekannter Frameworks:

Gantry (RocketTheme)
/templates/IHR-TEMPLATE-NAME/css/IHR-TEMPLATE-NAME-custom.css
Gavern (Gavick Pro)
/templates/IHR-TEMPLATE-NAME/css/overrides.css (In den Framework-Einstellungen muss die Option Override CSS aktiviert sein.)
T3, Warp (YooTheme), Shape 5
/templates/IHR-TEMPLATE-NAME/css/custom.css

In diesen Dateien dürfen Sie nach Belieben schalten und walten, bis das Templatedesign Ihren Vorstellungen entspricht. Ist in Ihrem Template keine solche Datei vorgesehen, erzeugen Sie eine eigene und laden sie als letzte Position im HTML-Header der index.php-Datei Ihres Templates. Fügen Sie dazu diesen kurzen PHP-Block vor das </head>-Tag ein:

<?php
    JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template .
    '/css/my-custom-styles.css');
?>

Statt my-custom-styles.css dürfen Sie natürlich einen eigenen Dateinamen vergeben. Das Stylesheet muss nicht unbedingt im /css-Verzeichnis abgelegt sein, dort ist es aber gut aufgehoben.

Blicken Sie jetzt in den HTML-Code der neu geladenen Frontend-Seite, sieht der HTML-Header-Ausschnitt so aus:

<link rel="stylesheet" href="/templates/protostar/css/template.css" 
  type="text/css" />
<link rel="stylesheet" href="http://localhost:81/templates/protostar/css/   my-custom-styles.css" type="text/css" />
<link rel="stylesheet" href="/media/system/css/frontediting.css" 
  type="text/css" />
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>

Joomla! fügt das neue Stylesheet in die Liste zu ladender Stylesheets, unmittelbar bevor die externen JavaScript-Dateien geladen werden. Aber obwohl Sie das <link>-Tag als letzte Position eingefügt hatten, lädt danach ein weiteres Stylesheet. In diesem Fall die Datei frontediting.css, die im Frontend eingeloggten Benutzern das Bearbeiten von Beiträgen ermöglicht. Das passiert aber auch mit anderen Komponenten oder Plugins. Wenn also eine Style-Anpassung auch nach (F5) oder (Strg) + (F5) (OS X: (cmd) + (R) bzw. (cmd) + (ª) + (R)) nicht erscheint, existiert vielleicht in einer später geladenen Style-Datei die letzte kaskadierte und damit wirksame Style-Definition. Das Anhängen der Direktive !important an den entsprechenden Style ist hier Retter in der Not und zwingt den Browser, keine später folgenden Überschreibungen mehr zuzulassen.

Ein Beispiel:

h1 {
  font-size:42px !important;
}

10.5.3 CSS-Overrides anlegen

Sie wissen jetzt, wo Sie CSS-Overrides anlegen, aber noch nicht, wie. Dafür ist etwas Detektivarbeit notwendig: Am besten arbeiten Sie mit einer Firefox Developer Edition oder mit Chrome, diese Browser haben das notwendige Werkzeug bereits eingebaut. (In einem normalen Firefox installieren Sie das Add-on Firebug.)

Lokalisieren Sie zunächst auf der Webseite das Element, das Sie manipulieren möchten. Für dieses Beispiel befindet sich das Suchmodul nicht in Protostars Modulposition Suche [position-0], sondern in der rechten Seitenleiste. Das Eingabefeld für den Suchbegriff ist nun so lang, dass es aus dem Modulkasten herausragt (siehe Abbildung 10.31). Ein CSS-Override soll das Feld verkürzen.

Abbildung 10.31 Platzieren Sie das Suchmodul im Protostar-Template in die rechte Seitenleiste, ist das Texteingabefeld zu lang – ein typischer Fall für einen CSS-Override.
Klicken Sie mit der rechen Maustaste auf das zu manipulierende Element, im Beispiel auf das Sucheingabefeld, und wählen Sie aus dem Kontextmenü Element untersuchen (englisch: Inspect Element), damit gelangen Sie in die Entwicklertools des Browsers.
Nun öffnet sich eine dynamische Quelltextansicht, die Sie, falls Sie mit zwei Monitoren arbeiten, auch aus dem Browserfenster entkoppeln können, um einen besseren Überblick zu behalten (siehe Abbildung 10.32 und Abbildung 10.33). Die Buttons dazu: (Chrome), (Firefox Developer Edition), (Firefox mit Firebug).
Idealerweise springt die Quelltextansicht automatisch zum richtigen Element, für das Sucheingabefeld also ein <input>-Tag.

Wurde bei Ihnen ein anderes Element markiert, bewegen Sie sich mit der Maus zwischen den umgebenden Elementen, und öffnen Sie gegebenenfalls über die kleinen grauen Pfeile HTML-Container, um die enthaltenen Elemente zu sehen. Die dynamische Quelltextansicht erleichtert Ihnen die Suche durch Hervorhebung des Elements in der Webseitendarstellung oberhalb des Quelltexts (oder auf dem anderen Monitor).

Abbildung 10.32 In dynamischen Quelltextansichten (hier: Chrome) sehen Sie links den HTML-Code und rechts die CSS-Kaskade zur Formatierung des mit der Maus markierten HTML-Elements.
Experimentieren Sie jetzt mit der Formatierung, bis Sie das gewünschte Resultat erlangen. Dazu klicken Sie im rechten Bereich der Quelltextansicht zwischen die beiden geschweiften Klammern des obersten Eintrags element. Hier geben Sie nach Herzenslust CSS-Styles ein, die sich direkt auf das Element auswirken. (Hintergrund: element befüllt das HTML-Attribut style und ist damit die letzte Instanz der CSS-Kaskade.) Für das Suchtextfeld genügt der Style width:150px;, um die Breite zu verkleinern.
Für das Anlegen des CSS-Overrides benötigen Sie die Element-ID und/oder den CSS-Klassennamen, um die eben recherchierten Styles anzuwenden. Sehen Sie sich dazu das HTML-Element auf der linken Seite der Quelltextansicht an. Das Eingabefeld des Suchmoduls beginnt mit <input id="mod-search-searchword" class="inputbox search-query" […] />. Das sind die Element- bzw. Klassennamen, die Sie im CSS-Override neu definieren.

Abbildung 10.33 Finalisieren Sie das gewünschte Styling in der dynamischen Quelltextansicht (hier: Firefox Developer Edition), bevor Sie das Ergebnis im Backend als CSS‐Override anlegen.
Ergänzen Sie nun die CSS-Override-Datei um die neue Style-Definition, die Kombination aus gefundener Element-ID und/oder CSS-Klasse und dem erprobten CSS-Style aus dem element-Element. Für das Suchtextfeld genügt beispielsweise diese Ergänzung:
```
#mod-search-searchword {
  width:150px;
}
```

In der Praxis greifen auf diese Weise ermittelte Styles nicht immer, da die Abhängigkeiten und Vererbungen der CSS-Kaskade mitunter sehr komplex sind. In diesem Fall hilft es, sich langsam anzunähern. Versuchen Sie es zuerst mit der Element-ID (#mod-search-searchword) und dann mit der Klassenkombination (.inputbox search-query). Führt das immer noch nicht zum Erfolg, werfen Sie erneut einen Blick in den rechten Bereich der Quelltextansicht. Die Liste enthält alle Style-Definitionen, die das Format des markierten HTML-Elements beeinflussen. Die oben stehenden Definitionen greifen als Letztes und überschreiben weiter unten stehende Definitionen. Erscheint eine Definition durchgestrichen, wurde sie von einer darüber stehenden überschrieben. Suchen Sie nun aus dieser Liste weitere Kandidaten für die nächsten Zuweisungsversuche.

Tipp: Einen schmutzigen Trick gibt es, um mit einem Mausklick die korrekten Styles zu finden. Öffnen Sie in der Quelltextansicht mit der rechten Maustaste das Kontextmenü eines HTML-Elements, und suchen Sie einen Menüpunkt ähnlich CSS-Pfad kopieren oder Copy CSS path/Copy Unique Selector. In der Zwischenablage haben Sie nun eine Zeichenkette, die den exakten CSS-Weg zu diesem Element beschreibt. Schmutzig ist der Trick allerdings deshalb, da dieser Pfad nicht sonderlich generisch ist, sondern sich exakt auf dieses eine Element bezieht. Gegebenenfalls lässt sich hieraus aber eine allgemeinere Definition ableiten.

10.5.4 Template-Overrides einsetzen

Mit Template-Overrides stellt Joomla! ein mächtiges Werkzeug zur Verfügung, um größer angelegte Layout- und Designänderungen an einem vorhandenen Template vorzunehmen. In diesem Abschnitt lernen Sie den Mechanismus anhand von individuellen beispielhaften Änderungen am Protostar-Template kennen, das sich hervorragend als Grundlage für ein eigenes Template eignet, da es eine ideale HTML5- und CSS-Basis stellt und im Kern schon responsiv reagiert.

Um den Überblick und die Zielvorgabe nicht zu verlieren, eine kurze Zusammenfassung der anstehenden Aufgabe:

Ziel: Stellen Sie ein vom Webmaster ausgewähltes Icon aus der Icon-Schrift Font Awesome vor jeden Menüpunkt – siehe Abbildung 10.34.

Abbildung 10.34 Das Einfügen eines Icons vor Menüeinträge ist eine kleine über einen Template-Override umgesetzte Templatemodifikation.

Vorgehen: Sie erzeugen zunächst eine Kopie des Protostar-Templates, laden die Icon-Schrift aus dem Content Delivery Network Bootstrap CDN und verwenden das Feld CSS-Style für Link in der individuellen Menüeintragskonfiguration für die Auswahl des Icons.

Bearbeiten Sie vorab schon einige Menüeinträge, die als zukünftige Tests für die Templatemodifikation dienen. Dazu wechseln Sie zu Menüs • Main Menu und klicken auf beliebige Menüeinträge der obersten Ebene. Im Konfigurationsformular wechseln Sie zum Reiter Linktyp und ergänzen im Feld CSS-Style für den Link jeweils ein Font-Awesome-Icon nach dem Schema »fa fa-Icon-Name«, z. B. »fa fa-plane«, »fa fa-file-text-o« oder »fa fa-star« (siehe Abbildung 10.35). Die komplette Liste der Icons und ihrer Bezeichnungen finden Sie unter http://fortawesome.github.io, Menü Icons. Klicken Sie dort auf eines der Icons, und entnehmen Sie die Klassenbezeichnung dem Beispiel-Codeblock mit dem <i>-Tag.

Abbildung 10.35 Über das Feld »CSS-Style für Link« soll das Menü zukünftig wissen, welches Font-Awesome-Icon vor dem Menülink erscheint.

Arbeitskopie anlegen

Bevor Sie irgendwelche Änderung an einer Templatedatei vornehmen, gleichwohl welcher Natur, erzeugen Sie eine Kopie des Templates. So verhindern Sie, dass bei einem Template-Update Ihre mühevollen Tweaks verloren gehen.

Wechseln Sie zu Erweiterungen • Templates, und wählen Sie den Link Protostar aus der Spalte Template. (Vorsicht, nicht aus der Spalte Stil!)
Klicken Sie nun in der oberen Buttonleiste auf den Button Template kopieren, und vergeben Sie einen Namen für die Templatekopie, z. B. »Protostar-Reiseforum«, gefolgt von einem Klick auf den Button Template kopieren (siehe Abbildung 10.36).

Abbildung 10.36 Nehmen Sie Änderungen niemals am Originaltemplate vor, sondern erzeugen Sie zuvor Ihre eigene Kopie, damit Ihre Arbeit bei einem Template-Update nicht verloren geht.
Wechseln Sie jetzt über die Seitenleiste Stile zur Stilübersicht der Templates, und aktivieren Sie Ihre Kopie mit Klick in die Spalte Standard, sodass der gelbe Stern () hinter dem Eintrag protostar-reiseforum - Standard erscheint.

Ab jetzt ist Ihre Templatekopie im Frontend sichtbar geschaltet, sodass Sie die auf den folgenden Seiten durchgeführten Anpassungen sofort überprüfen können.

HTML-Templatebasis – »index.php«

Um die Icon-Schrift Font Awesome im Reiseforum-Template bereitzustellen, genügt die Ergänzung eines einzelnen Tags in der Templatebasis, der Datei index.php, die den HTML-Rahmen für sämtliche Ausgaben im Frontend bildet. Jedes Template enthält diese Datei in seinem Hauptverzeichnis.

Wechseln Sie im Dateisystem zum Verzeichnis /templates/protostar-reiseforum/, und öffnen Sie die Datei index.php zur Bearbeitung in einem Editor.
Suchen Sie die Zeile </head>, die das Ende des HTML-Headers anzeigt, und setzen Sie davor die Zeile, die Font Awesome (http://fortawesome.github.io) vom Content Delivery Network lädt. (Mehr Infos zu CDNs erhalten Sie in Abschnitt 23.4.10, »Use a Content Delivery Network (CDN) – CDNs einsetzen«.) Das Ende des HTML-Headers sieht nun so aus:
```
   <![endif]-->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/  4.3.0/css/font-awesome.min.css">
</head>
```
Speichern Sie die index.php-Datei, laden Sie eine Seite des Frontends neu, öffnen Sie die Quelltextansicht, und prüfen Sie, ob sich das neue <link>-Tag an der richtigen Stelle befindet. Falls nicht, sehen Sie noch mal nach, ob Sie unter Erweiterungen • Templates das richtige Template ausgewählt hatten.

Template-Override erzeugen

Mithilfe von Template-Overrides sind Sie in der Lage, die HTML-Ausgaben beliebiger Joomla!-Elemente, jedes Moduls und jeder Komponente, nach eigenen Anforderungen anzupassen. Das funktioniert ähnlich wie die Sprach-Overrides aus Abschnitt 12.3, »Individuelle Übersetzungen mit Overrides anlegen«. Dabei setzt Joomla! so lange die Originaldateien der Komponenten und Module ein, bis es eine Override-Datei findet (siehe Abbildung 10.37). Im Rahmen von Template-Overrides sucht Joomla! diese Dateien in Unterverzeichnissen des aktiven Templates. So liefert die eigentliche Komponente die grundsätzliche Darstellung, z. B. für das Menü. Hat das Template aber etwas Extravagantes mit dem Menü vor, kann es jederzeit in die Ausgabe eingreifen und die Darstellung der Komponente überschreiben.

Damit Joomla! erkennt, welche HTML-Ausgabe überschrieben wird, halten Sie eine einfache Konvention beim Anlegen der Template-Overrides ein: Innerhalb des Templateunterverzeichnisses /html/ erzeugen Sie weitere Unterverzeichnisse, die dem internen Namen der Komponente oder des Moduls entsprechen, z. B. /mod_menu/ für das Menü, /com_content/ für die Beitragsdarstellung oder /mod_login/ für das Loginmodul. Darin duplizieren Sie die exakte Dateistruktur des Unterverzeichnisses /tmpl/ des Originals.

Joomla! verwendet die Originaltemplates der Komponenten und Module, bis es im aktuellen Template einen Template-Override findet, dessen Zuordnung an der Ordnerstruktur erkennbar ist.

Abbildung 10.37 Joomla! verwendet die Originaltemplates der Komponenten und Module, bis es im aktuellen Template einen Template-Override findet, dessen Zuordnung an der Ordnerstruktur erkennbar ist.

Werfen Sie kurz einen Blick in das Verzeichnis /modules/mod_menu/tmpl/, finden Sie dort fünf PHP-Dateien, die die HTML-Ausgabe erzeugen. Der Template-Override muss sich folglich künftig unter /templates/protostar-reiseforum/html/mod_menu/ befinden. (Der Unterordner /tmpl/ wird nicht kopiert, da Joomla! klar ist, dass es sich im Templateordner um Templatedateien handelt.) Das Anlegen dieser Verzeichnisstruktur per Hand ist fehleranfällig, darum ist in Joomla! ein Mechanismus vorgesehen, der diese Struktur automatisch für Sie erzeugt.

Wechseln Sie zu Erweiterungen • Templates • Seitenleiste Template, und klicken Sie auf Protostar-reiseforum Details und Dateien. Diese Konfigurationsseite kennen Sie bereits von der Erzeugung der Templatekopie.
Wechseln Sie zum Reiter Overrides erstellen, und klicken Sie auf mod_menu. Damit legt Joomla! innerhalb des /html/-Ordners im Protostar-Templateordner ein Verzeichnis /mod_menu/ an, dessen Dateien Sie beliebig verändern dürfen.

Hinweis: Arbeiten Sie an dieser Stelle nicht mit einem Modul, sondern einer Komponente, ist die Verzeichnisstruktur tiefer verschachtelt, da Komponenten verschiedene Ausgabevarianten über sogenannte Views bereitstellen. Diese erkennen Sie aber unproblematisch an den Bezeichnungen ihrer Verzeichnisse, z. B. /html/com_content/article/ für die Ausgabe eines einzelnen Beitrags.

Tipp: Template-Overrides aktivieren sich ausschließlich durch die Existenz der überschreibenden Ordner und Dateien im Templateverzeichnis. Zur Entfernung eines Template-Overrides löschen Sie also lediglich das betreffende Verzeichnis im /html/-Ordner, es sind keine weiteren Anpassungen an anderer Stelle erforderlich.
Zur Bearbeitung der Template-Override-Dateien haben Sie zwei Möglichkeiten:
- Über den Reiter Editor (siehe Abbildung 10.38): Klicken Sie sich in der linken Spalte durch die Verzeichnisse, hier z. B. /html/mod_menu/, und bearbeiten Sie die Datei im rechten Editor.
  
  Abbildung 10.38 Über den Reiter »Editor« der Templatekonfiguration sind alle Templatedateien editierbar; schneller arbeiten Sie aber in Ihrem Lieblingseditor und bei direkter Bearbeitung der Dateien über das Dateisystem.
- Über FTP oder das Dateisystem: Das ist in der Regel schneller und komfortabler, da Sie lokal mit Ihrem Lieblingseditor arbeiten.
Öffnen Sie jetzt die Datei default_component.php innerhalb des /html/mod_menu/-Ordners zur Bearbeitung. Enthält ein Template-Override-Verzeichnis mehrere Dateien, erschließen Sie aus dem Kontext, welche Sie benötigen, manchmal ist auch Ausprobieren angesagt.
Sie sehen nun den Programmteil des Menümoduls, der für die Konstruktion der Links zuständig ist.

Suchen Sie den {}-Programmblock, der unmittelbar nach der Anweisung switch ($item->browserNav) folgt. Hier unterscheidet Joomla! die Einstellung der Dropdown-Liste Zielfenster der Menüeintragskonfiguration (Im gleichen Fenster, Neues Fenster mit oder ohne Navigation). Dann wird für jeden der drei Fälle der mit <a> beginnende und mit </a> endende Link zusammengebaut, genau die richtige Stelle für das Icon, damit es innerhalb des <a>-Tags anklickbar wird.
Betrachten Sie die Zeile zwischen case 0: und break;. Es handelt sich um einen Mix aus HTML- und PHP-Code, aus dem klar wird, worum es bei Templates im Grunde geht, nämlich um das dynamische Einfügen von Inhalten in das ansonsten statische HTML-Gerüst.
```
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
```
Das schließende und öffnende PHP-Tag am Anfang und am Ende der Zeile kurz außer Acht gelassen, wird das Einsetzen verständlich, wenn Sie sich die Bestandteile des Linktags einzeln ansehen:
```
<a <?php echo $class; ?>href="<?php echo $item->flink; ?>" <?php echo $title; ?>>
```
Das Linktag wird mit <a geöffnet, und sofort folgt ein PHP-Block, der den Inhalt der Variablen $class ausgibt. $class wird ganz oben im Quellcode definiert und enthält den über die Konfiguration des Menüeintrags eingetippten CSS-Style für Link, in diesem Fall die Font-Awesome-Icon-Bezeichnungen. Darauf folgt das bekannte href-Attribut, das ebenfalls dynamisch mit PHP befüllt wird.

echo $item->flink; gibt die URL des Menüeintrags aus. Anschließend erfolgt die Ausgabe des $titles, dessen Inhaltszuweisung Sie wieder oben im Quellcode finden: das title-Attribut mit dem Text aus dem Reiter Linktyp • Feld Title-Attribut für Menülink.
```
<?php echo $linktype; ?></a>
```
Darauf folgt die Ausgabe des Linktextes, der über dem switch-Block berechnet wird, denn er enthält u. U. nicht nur den Text, sondern auch ein Bild (Reiter Linktyp • Feld Bild zum Link). Schließlich wird das Linktag geschlossen.
Dies ist genau die richtige Stelle zur Platzierung des Font-Awesome-Icons. Die Klasse, die Icon-Bezeichnung, wird ja schon ausgegeben. Sie muss lediglich aus dem <a>-Tag entfernt und in ein eigenes <i>-Tag gesetzt werden, so wie es die Font-Awesome-Beispiele auf der oben genannten Website zeigen.

Ersetzen Sie die gesamte Programmzeile durch folgende:
```
?><a href="<?php echo $item->flink; ?>" <?php echo $title; ?>><i <?php echo $class; ?>></i>&nbsp;<?php echo $linktype; ?></a><?php
```
- Das <a>-Tag enthält nun keine Ausgabe der Variablen $class.
- Zwischen das öffnende Linktag und die Ausgabe des Menüeintragstitels fügt sich der Icon-Block <i <?echo $class; ?>></i> mit einem Leerzeichen ( ) für etwas Abstand zwischen Icon und Titel ein. Eine Beispielausgabe an dieser Stelle wäre <i class="fa fa-plane"></i> .

Wiederholen Sie diese Anpassung, also das Entfernen der $class-Ausgabe im Linktag und die Ergänzung des <i>-Tags für alle drei Fälle, case 0, case 1 und case 2. Achten Sie darauf, dass sich der Code leicht unterscheidet, um die verschiedenen Arten abzufangen, wie sich der Link öffnet (neuer Browsertab, im selben Fenster etc.). Kopieren Sie also nicht die gesamte Zeile, sondern arbeiten Sie sich Tag für Tag vor.

switch ($item->browserNav)
{
   default:
   case 0:

?><a href="<?php echo $item->flink; ?>" <?php echo $title; ?>><i <?php echo $class; ?>></i>&nbsp;<?php echo $linktype; ?></a><?php

      break;
   case 1:
   // _blank

?><a href="<?php echo $item->flink; ?>" target="_blank" <?php echo $title; ?>><i <?php echo $class; ?>></i>&nbsp;<?php echo $linktype; ?></a><?php

      break;
   case 2:
   // Use JavaScript "window.open"

?><a href="<?php echo $item->flink; ?>" onclick=
  "window.open(this.href,'targetWindow','toolbar=no,location=no,status=
  no,menubar=no,scrollbars=yes,resizable=yes');return false;" <?php echo
  $title; ?>><i <?php echo $class; ?>></i>&nbsp;<?php echo $linktype; ?>
  </a><?php

      break;
}

Listing 10.1 Angepasster »switch«-Block mit eingefügten Font-Awesome-Icons

Speichern Sie die Datei, und aktualisieren Sie eine Frontend-Seite, um die hinzugefügten Icons zu bewundern.

Auf diese Weise modifizieren Sie jedes Webseitenelement, an dessen Look and Feel Sie sich stoßen. Die Kunst ist, herauszufinden, wo der Template-Override eingesetzt wird, und das erfordert manchmal etwas Herumprobieren. Erster Ansatz ist, zu wissen, welche manipulierbaren Elemente es gibt. Dazu werfen Sie einen Blick in die Verzeichnisse /components/ und /modules/. Aus den Namen der Unterordner, die den internen Komponenten- und Modulbezeichnungen entsprechen, wird klar, welche Aufgabe sie erfüllen, z. B. /com_content/ für Beiträge, /mod_login/ für das Loginmodul oder /mod_breadcrumbs/ für die Ausgabe der Brotkrumennavigation. Zur Erzeugung der Template-Override-Dateien gehen Sie stets über Erweiterungen • Templates • Seitenleiste Template und klicken auf Details und Dateien des aktiven Templates. Wechseln Sie dann zum Reiter Overrides erstellen, und klicken Sie auf das betreffende Element.

Tipp: Per Template-Override Beitragstitel auf <h1> umstellen

Der Großteil aller Joomla!-Templates gibt Beitragstitel nicht als Dokumentüberschrift <h1>, sondern als Unterüberschrift <h2> aus, was nach semantischen HTML5-Richtlinien nicht korrekt ist. SEO-kritisch ist das insbesondere auf Beitragsdetailseiten, da auch hier die wichtigen Hauptüberschriften nur erscheinen, wenn Sie das Feld Seitentitel (steht für das <h1>-Tag) eines Menüeintrags ausfüllen. Aber nicht jeder Beitrag verfügt über seinen eigenen Menüeintrag.

Da kommen Template-Overrides gerade recht, um mit diesem Missstand aufzuräumen. Legen Sie einfach Overrides der Inhaltskomponente (com_content) an, durchforsten Sie alle kopierten .php-Dateien nach dem Anfang des Tags <h2, und ersetzen Sie diese Unterüberschrift durch <h1. Die Beitragsdarstellung befindet sich beispielsweise im View und damit im Unterverzeichnis /article/, Kategorieübersichten in /category/ und die Homepage-Elemente in /featured/.

Falsche <h2>-Überschriften korrigieren Sie ebenfalls per Template-Override, durchsuchen Sie insbesondere die Ausgaben der Komponente »com_content«.

Abbildung 10.39 Falsche <h2>-Überschriften korrigieren Sie ebenfalls per Template-Override, durchsuchen Sie insbesondere die Ausgaben der Komponente »com_content«.

Hinweis: Template-Override um Layout-Override erweitern

Layout-Overrides sind nicht mit Template-Overrides zu verwechseln, auch wenn die gleichen Templateverzeichnisse im Spiel sind. Ein Layout-Override ist die Bereitstellung eines alternativen Layouts für ein Modul, also einer vom Standard abweichenden HTML-Ausgabe. Im Administrations-Backend finden Sie die Einstellung über die jeweilige Modulkonfiguration • Reiter Erweitert • Dropdown-Liste Alternatives Layout. Nicht viele Templates machen von dieser Möglichkeit Gebrauch, da die Layoutumschaltung pro Modul erfolgt, ein Layout- oder Designwechsel aber meist global für die gesamte Website erwünscht und daher in die Templatekonfiguration integriert ist.

Für den Fall der oben dargestellten Icon-Ergänzung im Menü ist denkbar, dass es eine Menüvariante geben soll, die keine Icons darstellt. Über die Dropdown-Liste Alternatives Layout hat der Webmaster dann die Wahl, das Menümodul mit oder ohne Icons zu konfigurieren.

Abbildung 10.40 Mit Layout-Overrides weisen Sie einzelnen Modulen ein vom Standard abweichendes Layout oder Design zu.

Die Bereitstellung eines Layout-Overrides ist denkbar einfach, denn dazu vergeben Sie den Dateien eines Template-Overrides lediglich einen anderen, vom Original abweichenden Namen.

Im Falle des Menümoduls beginnen alle Dateinamen in Ihrem Templateverzeichnis unter /html/mod_menu/ mit default. Ersetzen Sie nun default durch z. B. icons, sodass am Ende im Template-Override-Verzeichnis die Dateien icons.php, icons_component.php, icons_heading.php, icons_separator.php und icons_url.php liegen. Daran erkennen Sie die einzige, aber wichtige Regel bei der Vergabe des Namens: Er darf keine Unterstriche enthalten, sonst kommt Joomla! bei der automatischen Dateinamenerkennung durcheinander.

Unmittelbar nachdem Sie die Dateien umbenannt haben, steht der Layout-Override im Administrations-Backend bereit. Klicken Sie sich über Erweiterungen • Module • Main Menu • Reiter Erweitert zur Dropdown-Liste Alternatives Layout, und wählen Sie zwischen Standard und icons. Das Standardlayout zieht sich Joomla! aus dem Originalverzeichnis /modules/mod_menu/tmpl/. Nun bearbeiten Sie den Programmcode der icons_-Dateien nach eigenen Vorstellungen.

Hinweis: Verschiedene Modulstile bereitstellen

Im Reiter Erweitert jeder Modulkonfiguration finden Sie am unteren Ende der Konfigurationsfelder eine weitere Möglichkeit, die Darstellung von Modulen zu beeinflussen. Über die Dropdown-Liste Modulstil legen Sie fest, in welche HTML-Tags der Modulinhalt eingebettet wird. Damit ist es beispielsweise möglich, den Inhalt als Popup-Fenster zu zeigen oder über ein aufklappbares Akkordeon abzubilden.

Abbildung 10.41 Das Purity-III-Template nutzt Modulstile für extravagante Darstellungen, z. B. als »Popover«.

Programmiert wird dieser Templatecode in der template-spezifischen Datei /html/modules.php, die für jeden Modulstil eine separate Funktion bereitstellt. Um mit eigenen Modulstilen zu experimentieren, kopieren Sie sich am besten die modules.php aus dem Protostar-Template und ergänzen eine eigene Funktion, indem Sie die vorhandene Funktion modChrome_well() kopieren und in der Kopie einen eigenen Namen hinter modChrome vergeben, z. B modChrome_reiseforumstil.

Die HTML-Ausgabe ins Template erfolgt über reguläre PHP-Anweisungen, wie z. B. echo.
Modulparameter stehen Ihnen über $params->get('Parametername') zur Verfügung, z. B. $params->get('moduleclass_sfx') für das Modulklassensuffix.
Modulüberschrift und -inhalt erhalten Sie über $module->title bzw. $module-> content.

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.