Das Standardlayout anpassen – Teil 1

Joomla! wird standardmäßig mit dem Template RHUK MILKYWAY ausgeliefert. Dieses Template hat zunächst einmal den Vorteil, dass es gut funktioniert und relativ neutral gehalten ist. Beide Aspekte führen dazu, dass man es eigentlich überall einsetzen kann. Einen Haken gibt es aber natürlich: Wer RHUK MILKYWAY auf seiner Webseite ohne entsprechende Anpassungen verwendet, wird nicht gerade einen Innovationspreis gewinnen. Denn schließlich wird jeder (zumindest die, die sich mit Joomla! auskennen) sehen, dass Sie es sich einfach gemacht und das Standard-Template eins zu eins übernommen haben.

In diesem und dem nächsten Tutorial wird gezeigt, wie Sie mit ein paar Handgriffen das Standardlayout von Joomla! Ihren Bedürfnissen entsprechend anpassen können.

Wir empfehlen:
Joomla!-Training

Zunächst müssen Sie sich die Frage stellen, welche Elemente eigentlich an welcher Position der Seite angezeigt werden sollen. Soll beispielsweise das Hauptmenü links oder rechts stehen? Wohin soll das Suchen-Feld eigentlich? Ein Blick in das Frontend der Seite hilft hier weiter.

Wenn Sie noch keinerlei Anpassungen am Template gemacht haben, wird die Seite bei Ihnen etwa so aussehen. Es geht zunächst einmal darum, die einzelnen Seitenelemente den passenden Positionen zuzuordnen. Denn genau diese Positionen sind es, die Joomla! so flexibel machen. Es ist nämlich problemlos möglich, das Element Wer ist online anstelle auf der rechten auf der linken Seite anzeigen zu lassen.
Innerhalb jedes Joomla!-Templates lassen sich explizit die Positionen angegeben, an denen später Module angezeigt werden sollen. Wie das Joomla!-intern geregelt wird, zeigt ein Blick in den Quelltext der Template-Datei. Zu finden ist diese index.php im Verzeichnis templates Ihrer Joomla!-Installation innerhalb des entsprechenden Template-Verzeichnisses.

Um ein "Gefühl" für diese Datei zu bekommen, sollten Sie sich deren Quelltext ansehen. Das geht entweder in einem Text- oder HTML-Editor oder ganz einfach auch in Joomla!.Dort müssen Sie nur Erweiterungen/Templates aufrufen. Innerhalb der Template-Übersicht klicken Sie nacheinander auf den betreffenden Template-Namen und auf HTML bearbeiten.

Hier mal eine gekürzte Fassung der index.php von RHUK MILKYWAY.
...
<jdoc:include type="head" />

---
   <div id="header_l">
      <div id="header_r">
         <div id="logo"></div>
         <jdoc:include type="modules" name="top" />
         </div>
      </div>
   </div>
...
   <td class="pill_m">
      <div id="pillmenu">
         <jdoc:include type="modules" name="user3" />
      </div>
   </td>

...

   <div id="search">
      <jdoc:include type="modules" name="user4" />
   </div>

   <div id="pathway">
      <jdoc:include type="modules" name="breadcrumb" />
   </div>

 ...

   <div id="area">
      <jdoc:include type="message" />

   <div id="leftcolumn">
      <?php if($this->countModules('left')) : ?>
      <jdoc:include type="modules" name="left" style="rounded" />
      <?php endif; ?>
   </div>

   <?php if($this->countModules('left')) : ?>
      <div id="maincolumn">
      <?php else: ?>
      <div id="maincolumn_full">
      <?php endif; ?>
      <?php if($this->countModules('user1 or user2')) : ?>
      <table class="nopad user1user2">
         <tr valign="top">
            <?php if($this->countModules('user1')) : ?>
            <td>
              <jdoc:include type="modules" name="user1" style="xhtml" />
                               </td>
                                                                                                                                                               <?php endif; ?>
      <?php if($this->countModules('user1 and user2')) : ?>
                        <td class="greyline">&nbsp;</td>
      <php endif; ?>
      <?php if($this->countModules('user2')) : ?>
                               <td>
              <jdoc:include type="modules" name="user2" style="xhtml" />
                               </td>
                                                                                                                                                               <?php endif; ?>
          </tr>
      </table>

   <div id="maindivider"></div>
   <?php endif; ?>

   <table class="nopad">
      <tr valign="top">
         <td><jdoc:include type="component" />
           <jdoc:include type="modules" name="footer" style="xhtml"/>
         </td>

         <?php if($this->countModules('right')
         and JRequest::getCmd('layout') != 'form') : ?>
             <td class="greyline">&nbsp;</td>
                     <td width="170">
         <jdoc:include type="modules" name="right" style="xhtml"/>
                     </td>
   <?php endif; ?>
      </tr>
   <table>

...

   <div id="footer_r">
      <p id="syndicate">
         <jdoc:include type="modules" name="syndicate" />
      </p>
   </div>
...

Wer bislang wenig Erfahrung mit HTML oder/und PHP gemacht hat, wird möglicherweise erschreckt zurückzucken. Dabei ist es eigentlich ganz einfach. Denn für die Positionierung sind die Einträge relevant, die folgendem Schema folgen:

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

Diese Code-Zeile bestimmt, an welcher Position das betreffende Modul eingeblendet werden soll. Das Modul ist in diesem Fall user1. An dieser Stelle gleich noch ein Hinweis für diejenigen unter Ihnen, die sich bereits „früher“ mit der Syntax der index.php auseinandergesetzt haben. Sie werden feststellen, dass es in Joomla! 1.5 syntaktische Änderungen gegeben hat. Man hat sich hier nämlich von der altbekannten Mos-Syntax verabschiedet, die folgendermaßen aussah:

<?php mosLoadModules('user1',-2);?>

In Joomla! 1.5 wird auf die JDoc-Syntax gesetzt. Nun können Sie den Quellcode der index.php Ihren Wünschen entsprechend anpassen. Wenn Sie allerdings zunächst einmal wissen wollen, welche Positionen innerhalb des Templates aktiv genutzt werden, dann können Sie das aber auch optisch tun.
Dazu rufen Sie Erweiterungen/Templates auf und klicken auf den Template-Namen. Über Vorschau wird eine spezielle Ansicht geöffnet.

Hier sehen Sie rot markierte Bereiche. Dabei handelt es sich um die Positionen, die von dem Template genutzt werden. Auf diese Weise können Sie erkennen, welches Modul eigentlich wo eingebunden wird. (Interessant ist das zum Beispiel auch, wenn Sie später Anpassungen an den CSS-Dateien vornehmen wollen.)

Nachdem nun klar ist, wie Sie die Template-Positionen einblenden können, geht es jetzt darum, dieses Wissen für die Anpassung Ihres Templates zu nutzen. Zeigen lässt sich das am besten anhand eines typischen Beispiels. Und zwar soll anstelle des Menüs Anderes Menü das Umfragen-Modul eingeblendet werden.
Voraussetzung dafür ist, dass zunächst einmal das Anderes Menü ausgeblendet wird. Dazu rufen Sie Erweiterungen/Module auf und suchen dort nach Anderes Menü

Durch Anklicken des grünen Pfeils in der Aktiviert-Spalte wird das Menü deaktiviert. Das zeigt dann auch ein Blick in das Frontend.

Im nächsten Schritt wird dafür gesorgt, dass das Umfragen-Modul von seiner angestammten Position in den rechten Fensterbereich wegwandert. Dazu rufen Sie Erweiterungen/Module auf und klicken auf Umfragen. Interessant ist hier der Bereich Position.

An dieser Stelle gleich noch der Hinweis, dass im zweiten Teil dieses Tutorials ausführlich auf die Positionen eingegangen wird. Für das aktuelle Beispiel ist jedoch nur wichtig, dass Sie den Wert des Position-Feldes auf left setzen. Übernommen werden die Einstellungen abschließend mit Speichern. Ein erneuter Blick in das Frontend liefert nun folgendes  Bild:

Die Umfrage wird jetzt unterhalb des Menüs angezeigt. Auch daran lässt sich etwas ändern. Denn in der Tat ist Joomla! so flexibel, dass die Modul-Reihenfolge mit wenigen Mausklicks angepasst werden kann. Dazu braucht man nur Erweiterungen/Module aufrufen.

Innerhalb der Reihenfolge-Spalte klicken Sie nun bei dem Umfrage-Modul auf den Aufwärtspfeil. So lässt sich die Reihenfolge der Menüs ganz nach Belieben verändern. (Sie können natürlich auch bei dem Menü auf den Abwärtspfeil klicken. Wichtig ist, dass die Umfrage bei Reihenfolge einen niedrigeren Wert als das Menü hat.) Ein erneuter Blick auf die "fertige" Seite zeigt nun Folgendes:

Wie Sie sehen, befindet sich die Umfrage jetzt tatsächlich im linken Fensterbereich und wird unterhalb des Menüs eingeblendet.

Dieses Tutorial hat gezeigt, wie Sie mit einfachen Mitteln Ihre Seite anpassen können. Im zweiten Teil geht es dann noch einmal ausführlich um die Möglichkeiten zur Positionierung und dabei vor allem um die Definition neuer Positionen in der XML-Konfigurationsdatei.

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