Das Standardlayout anpassen – Teil 2

Im ersten Teil dieser Mini-Tutorial-Serie wurde bereits gezeigt, wie Sie das Standardlayout Ihrer Webseite anpassen können. Der Fokus lag dabei vor allem darauf, wie sich Module auf der Seite von Position zu Position verschieben lassen. Damit erreicht man zwar schon ein gewisses Maß an Flexibilität, das Ende der Fahnenstange ist damit aber natürlich längst noch nicht erreicht. In diesem Tutorial-Part tauchen Sie nun in die Welt der möglichen Modulpositionen ein.

Wir empfehlen:
Joomla!-Training

Wie sich Module fast beliebig positionieren lassen, haben Sie gesehen bzw. können Sie im ersten Teil dieses Tutorials nachlesen. Welche Positionen stehen denn aber eigentlich innerhalb eines Templates zur Verfügung? Diese Frage ist natürlich enorm wichtig, schließlich kann man Module nur dann an der richtigen Stelle anordnen, wenn man die im Template vorhandenen Positionen kennt. Um sich die möglichen Modulpositionen anzeigen zu lassen, ruft man Erweiterungen/Module auf und wählt dort ein beliebiges Modul. Die im Auswahlfeld Position angezeigten Positionen sind innerhalb des aktuellen Templates nutzbar.

An dieser Stelle darf der Hinweis nicht fehlen, dass in den unterschiedlichen Templates zumeist auch andere Positionen anzutreffen sind. So werden Sie vielleicht ein Template haben, in dem zwar left, dafür aber nicht right existiert. Welche Positionen tatsächlich vorhanden sind, legen die Template-Entwickler fest.
Interessant ist nun die Frage, wo und wie eigentlich definiert wird, welche Positionen in einem Template verfügbar sind. Das geschieht an zwei Stellen:

  • index.php
  • templateDetails.xml

Innerhalb der index.php werden die Positionen allerdings lediglich mit Inhalten gefüllt. Wollen Sie beispielsweise den <head>-Bereich der Seite ausgeben, in dem Metatags, Seitentitel usw. automatisch von Joomla! eingetragen werden, müssen Sie die folgende Syntax verwenden:

<head>
 <jdoc:include type="head" />
</head>

Über das type-Attribut wird der zu ladende Typ, in diesem Fall also head, angegeben. Wenn Sie sich den generierten Quellcode im Frontend anzeigen lassen, sehen Sie, dass eine Menge an Kopfdaten eingefügt wurde.

Die Syntax für Komponenten sieht ähnlich aus.

<div id="m_content">
   <jdoc:include type="component" style="xhtml"   />
</div>

Die folgende Übersicht zeigt, wie Joomla!-Elemente in Templates eingefügt werden können:

Code

Beschreibung

<jdoc:include type="module" name="search" />

Suche

<?php echo $mainframe->getCfg('sitename');?>

Seitenname

<img src="templates/<?php echo $this->template ?>/images/[IMG]" alt="" title="" />

Grafik

<?php echo JHTML::Date($this->date_field, "%A, %d. %B %Y"); ?>

Datum

<jdoc:include type="module" name="breadcrumbs" />

Breadcrumb-Menü

<jdoc:include type="modules" name="banner" style="" />

Banner

<jdoc:include type="modules" name="left" style="" />

Module links

<jdoc:include type="modules" name="right" style="" />

Module rechts

<jdoc:include type="component" />

Hauptteil

<?php echo $mainframe->getCfg('sitename');?>

Seitentitel

<jdoc:include type="modules" name="user1" style="" />

Modul User1

<jdoc:include type="modules" name="user2" style="" />

Modul User2

<jdoc:include type="modules" name="top" style="" />

Modul Top

<jdoc:include type="modules" name="bottom" style="" />

Modul Bottom

Beachten Sie, dass in weiteren Tutorials noch ausführlich auf das Erstellen von Templates eingegangen wird. An dieser Stelle ist zunächst einmal nur das Grundverständnis wichtig, dass ein Zusammenhang zwischen der index.php (dort werden die Komponenten/Module) eingebunden und der templateDetails.xml (dort werden die Positionen definiert) besteht.
Die eigentliche Definition findet in der templateDetails.xml statt. Für das bekannte Template RHUK Milkyway sehen die Einträge für die Positionen folgendermaßen aus:

<positions>
   <position>breadcrumb</position>
   <position>left</position>
   <position>right</position>
   <position>top</position>
   <position>user1</position>
   <position>user2</position>
   <position>user3</position>
   <position>user4</position>
   <position>footer</position>
   <position>debug</position>
   <position>syndicate</position>
</positions>

Innerhalb des <position>-Bereichs werden die vom Template verwendeten Positionen angegeben. Dazu wird jeweils in einem <position>-Element die entsprechende Position notiert. Wie Sie effektiv mit Positionen arbeiten können, lässt sich am besten anhand eines Beispiels zeigen. Und zwar soll oberhalb des Joomla!-Logos das Suchen-Feld angezeigt werden. Insgesamt sollte die generierte Seite dann folgendermaßen aussehen:
 

Damit das klappt, sind vier Schritte nötig.

  1. Es wird eine neue Position definiert.
  2. Die Position des Suchen-Moduls wird geändert.
  3. Die index.php wird um den Eintrag für das Suchen-Feld erweitert.
  4. Für die Positionierung müssen Stylesheet-Angaben ergänzt werden.

Diese Abfolge müssen Sie übrigens immer einhalten, wenn Sie eine neue Position definieren und darin Inhalte anlegen wollen. (Die Reihenfolge bleibt hingegen Ihnen überlassen.) Noch ein wichtiger Hinweis: Gerade bei den ersten Schritten in den Template-Dateien sollte man sich von denen unbedingt ein Backup anlegen. Denn erfahrungsgemäß verzettelt man sich anfangs gerne mal im Quellcode der Seite. Dank Datensicherung lässt sich der Originalzustand dann wieder rasch herstellen.
Los geht es also mit der Anpassung der templateDetails.xml. Wenn Sie das Template RHUK Milkyway ändern wollen, dann finden Sie diese Datei im Verzeichnis templates/rhuk_milkyway Ihrer Joomla!-Installation. Fügen Sie nun in diese Datei ein zusätzliches <position>-Element mit dem Inhalt suche ein.

<positions>
   <position>breadcrumb</position>
   <position>left</position>
   <position>right</position>
   <position>top</position>
   <position>user1</position>
   <position>user2</position>
   <position>user3</position>
   <position>user4</position>
   <position>footer</position>
   <position>debug</position>
   <position>syndicate</position>
   <position>suche</position>
</positions>

An welcher Stelle dieses neue Element eingefügt wird, spielt für die Anzeige keine Rolle. Im aktuellen Beispiel wurde es einfach als letztes Element definiert. Der erste Schritt ist damit schon mal gemacht. Joomla! bzw. das Template kennt jetzt die suchen-Position. Die nächste Aufgabe besteht nun darin, der neuen Position das Feld zuzuweisen. Das geht ganz einfach über Erweiterungen/Module und einen Klick auf Suche. Interessant ist in dem sich öffnenden Dialogfenster der Details-Bereich.

Dort wählen Sie aus dem Position-Feld suche aus.
Erledigt ist die Sache aber auch damit noch nicht. Denn jetzt muss innerhalb der Template-Datei die Stelle definiert werden, an der das Suchen-Feld erscheinen soll. Los geht es mit dem Anpassen der CSS-Datei. Das können Sie in einem CSS-HTML-Editor oder direkt in Joomla! tun. Für letztere Variante rufen Sie Erweiterungen/Templates auf und klicken auf den betreffenden Templatenamen. Über die Schaltfläche CSS bearbeiten werden die zum Template gehörenden CSS-Dateien angezeigt. 

Wie viele das letztendlich sind, hängt vom Template ab. Sollten für das Template mehrere CSS-Dateien vorhanden sein, dann müssen Sie die Änderungen möglicherweise auch an mehreren Dateien vornehmen. (Das ist abhängig davon, wofür die CSS-Dateien da sind.) Ob für ein Template mehrere CSS-Dateien existieren, zeigt auch ein Blick in die Verzeichnisstruktur des Templates.
 

Nachdem Sie also die gewünschte bzw. relevante CSS-Datei (bei dem Standard-Template ist das übrigens die template.css) geöffnet haben, wird dort die CSS-Syntax eingetragen. Im aktuellen Beispiel wird später ein <div>-Element mit der ID suche erzeugt. Der CSS-Code sieht folgendermaßen aus:

div#suche {
   float: left;
   width: 298px;
   height: 75px;
   margin-left: 30px;
   margin-top: -10px;
}

Es handelt sich hierbei um eine recht einfache Syntax, durch die aber bereits das Suchen-Feld positioniert wird.
Im nächsten Schritt muss nun noch der HTML-Code angepasst werden. Auch das kann entweder in einem HTML-Editor oder direkt in Joomla! gemacht werden. Für letztere Variante rufen Sie über Erweiterungen/Templates das gewünschte Template auf und wählen in der Werkzeugleiste HTML bearbeiten. Passen Sie den Code folgendermaßen an:

<div class="center" align="center">
   <div id="wrapper">
      <div id="wrapper_r">
         <div id="suche">
            <jdoc:include type="modules" name="suche" />
         </div>

      <div id="header">
         <div id="header_l">
         <div id="header_r">
            <div id="logo"></div>
               <jdoc:include type="modules" name="top" />
            </div>
         </div>
      </div>

Wichtig ist hier der <div>-Bereich, mit der ID suche.
 

Innerhalb dieses Bereichs wird dann das Suchen-Modul folgendermaßen eingebunden:

<jdoc:include type="modules" name="suche" />

Damit ist die Arbeit auch schon erledigt, was ein abschließender Blick ins Frontend eindrucksvoll zeigt:
 

Sie haben gesehen, dass es gar nicht so schwer ist, Templates um zusätzliche Positionen zu erweitern. Lediglich eine Kombination aus (etwas) PHP und XML, sowie HTML und CSS sind dafür nötig.

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