Kopf- und Fußbereich der Seite anpassen

Es wurde bereits gezeigt, wie sich mit HTML- und CSS-Grundkenntnissen das Grundlayout von Joomla!-Webseiten anpassen lässt. Die Möglichkeiten, die dabei beschrieben wurden, sind allerdings nur die Spitze des Eisbergs. Denn natürlich gibt es noch viel mehr Schrauben, an denen man drehen kann. Zwei weitere Anpassungsoptionen werden in diesem Tutorial behandelt. Denn für die meisten Seitenbetreiber gehört es – übrigens völlig zu recht – zum guten Ton, dass auf ihrer Seite ein Logo angezeigt wird. Und genau darum geht es: Sie erfahren, wie Sie den Kopf- und den Fußbereich des Joomla!-Standard-Templates anpassen können.

Wir empfehlen:
Joomla!-Training

Werfen Sie zunächst noch einmal einen Blick auf das Standardlayout von Joomla!.

Es wird deutlich, dass innerhalb des Kopfbereichs der Seite das Joomla!-Logo angezeigt wird. Das mag für den Anfang ganz nett sein, früher oder später möchte man dort aber natürlich sein eigenes Logo (oder etwas anderes) präsentieren. Das ist aber nicht der einzige Bereich, bei dem Anpassungen nötig sind. Auch der Fußbereich der Seite ist so für einen Praxiseinsatz nämlich nur bedingt geeignet.

Na gut, die Information Powered by Joomla!. valid XHTML und CSS ist interessant und kann unter Umständen erhalten bleiben. (So trägt man auch gleich noch etwas zum Bekanntheitsgrad und zur Verbreitung von Joomla! bei.) Alles in allem ist der Fußbereich allerdings ungenutzter Raum.

In diesem Tutorial wird gezeigt, wie Sie Kopf- und Fußbereich des Standard-Templates anpassen können. Wie Sie die Bereiche modifzieren, bleibt zunächst einmal Ihnen überlassen. Im einfachsten Fall öffnen Sie Erweiterungen/Module, suchen sich ein Modul aus und platzieren dieses im Kopf- oder Fußbereich. Das funktioniert zwar, irgendwann sind die Möglichkeiten aber ausgeschöpft. Zudem bietet diese Variante nicht genügend Gestaltungsspielraum.

Interessanter wird es, wenn man direkt in den Quellcode des Templates eingreift. Genau darum geht es in diesem Tutorial. Für diese Anpassungen sind Grundkenntnisse in HTML und CSS zwar gut, werden aber nicht unbedingt benötigt. (Das gilt zumindest dann, wenn Sie den hier verwendeten Code kopieren und in Ihrem Template verwenden.)
Los geht es oben, also mit dem Kopfbereich. Um den anzupassen, rufen Sie Erweiterungen/Templates auf, klicken auf den Template-Namen (rhuk_milkyway) und dann auf HTML bearbeiten.

Sie können den Quelltext natürlich auch in einem HTML-Editor bearbeiten, die einfache Joomla!-Variante tut es aber ebenfalls. Interessant für den Kopfbereich ist jetzt das <div>-Element mit der ID header.

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

Alles, was sich innerhalb dieses Elements befindet, wird im Kopfbereich der Seite angezeigt. Bei einem zweiten Blick auf den Quellcode fällt auf, dass es ein Element <div id="logo"></div> gibt. Dieses Element ist offenkundig für die Anzeige des Logos zuständig. Nun stellt sich vielleicht der ein oder andere die Frage, wie denn eigentlich das Logo eingebunden wird. Denn klassischerweise ist dafür in HTML das <img />-Element verantwortlich. Das ist allerdings nur eine Möglichkeit, um Grafiken zu integrieren. Eine andere bieten Stylesheets. Und so wurde es auch in Joomla! gemacht. Um die CSS-Datei anzupassen, gehen Sie genauso wie beim Ändern der HTML-Datei vor, klicken aber in der Werkzeugleiste auf CSS bearbeiten. Sie werden sehen, dass dort eine Vielzahl an CSS-Dateien angeboten wird. Standardmäßig wird vom Template die template.css geladen. (Die anderen sind zum Beispiel dafür da, wenn bei den Template-Parametern Rot, Grün usw. eingestellt wird.)

Wie einfach sich Templates anpassen lassen, wird hier anhand von RHUK Milkyway gezeigt. Das allgemeine Vorgehen lässt sich so aber natürlich auch auf jedes andere Template übertragen. Um die CSS-Syntax anzupassen, rufen Sie Erweiterungen/Templates auf, klicken auf den Template-Namen und in der Werkzeugleiste auf CSS bearbeiten.

Für die Anzeige des Joomla!-Logos ist also der CSS-Code verantwortlich. Der relevante Part sieht folgendermaßen aus:

div#logo {
   position: absolute;
   left: 0;
   top: 0;
   float: left;
   width: 298px;
   height: 75px;
   background: url(../images/mw_joomla_logo.png) 0 0 no-repeat;
   margin-left: 30px;
   margin-top: 25px;
}

Interessant ist hier die Anweisung background:url(). Darüber wird dem so gekennzeichneten Bereich eine Hintergrundgrafik zugewiesen.  Mit no-repeat wird erreicht, dass die Grafik nicht gekachelt, also nur einmal angezeigt wird. Ebenfalls zu erkennen ist, dass die Grafik eine Breite von 298 Pixel und eine Höhe von 75 Pixel einnimmt. Am wenigsten Aufwand hat man, wenn die neue Grafik ebenfalls 75 Pixel hoch ist. Die Breite kann hingegen Variabel gestaltet werden, ohne dass man dafür großartige Veränderungen im Template vornehmen müsste.
Ebenfalls zu sehen ist, dass das Joomla!-Logo innerhalb des images-Verzeichnis des Templates liegt. Legen Sie das einzubindende Logo also in das Verzeichnis /templates/rhuk_milkyway/images. (Das gilt zumindest, wenn Sie rhuk:milkyway anpassen.)

Damit sind die Vorarbeiten abgeschlossen, und es kann ans Anpassen der CSS-Syntax gehen. Eine entsprechend veränderte Variante könnte beispielsweise folgendermaßen aussehen:

div#logo {
   position: absolute;
   left: 0;
   top: 0;
   float: left;
   width: 318;
   height: 75px;
   background: url(../images/bannerpsd.jpg) 0 0 no-repeat;
   margin-left: 30px;
   margin-top: 25px;
}

Der Blick ins Frontend zeigt die Auswirkungen.

Nun muss es natürlich nicht immer das ultimative Firmenlogo sein, das den Besuchern im Kopfbereich der Seite entgegen lächelt. Auch Text ist möglich. Dazu braucht man die CSS-Datei nicht zu verändern, lediglich ein kleiner Eingriff in die HTML-Syntax ist nötig.

In diesem Beispiel wird anstelle eines Logos einfach ein kurzer Begrüßungstext angezeigt. Ebenso ließe sich natürlich ein "Spruch des Tages" oder ähnliches umsetzen. Die angepasste HTML-Syntax sieht jedenfalls folgendermaßen aus:

<div id="header">
   <div id="header_l">
      <div id="header_r">
         <h1>Herzlich willkommen bei PSD-Tutorials</h1>
      </div>
   </div>
</div>

Der Kopfbereich ist damit schon mal etwas individueller gestaltet. Gleiches wird nun noch für den Fußbereich der Seite getan. Auch hier zunächst wieder ein Blick auf den originalen Quellcode.

<div id="footer">
   <div id="footer_l">
      <div id="footer_r">
         <p id="syndicate">
            <jdoc:include type="modules" name="syndicate" />
         </p>
         <p id="power_by">
            <?php echo JText::_('Powered by') ?>
            <a href="http://www.joomla.org">Joomla!</a>.
            <?php echo JText::_('Valid') ?>
            <a href="http://validator.w3.org/check/referer">
            XHTML</a>        
            <?php echo JText::_('and') ?>
            <a href="http://jigsaw.w3.org/css-validator/check/referer">
            CSS</a>.
         </p>
      </div>
   </div>
<div>

Innerhalb des linken Fußbereichs wird das Syndicate-Modul angezeigt. Der rechte Bereich gehört hingegen ganz der Ausgabe einfacher Textinformationen.
Hier kann man also ansetzen. Zunächst einmal braucht man das Syndicate-Logo nur, wenn man auch einen entsprechenden Service anbieten will. Wer das nicht tut, ersetzt Folgendes

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

durch diesen Code:

<p id="syndicate">
   <?php
      $timestamp = time();
      $datum = date("d.m.Y - H:i", $timestamp);
      echo $datum;
   ?>
</p>

In diesem Beispiel wurde einfacher PHP-Code definiert, durch den an der angegebenen Stelle das aktuelle Datum ausgegeben wird. Deaktivieren Sie zusätzlich das Syndication-Modul über Erweiterungen/Module.

Damit ist der linke Bereich schon einmal angepasst. Jetzt kann man sich noch an den rechten Fensterbereich wagen. Dort könnten nun die HTML-CSS-Joomla!-Hinweise ausgeblendet werden. Auch das ist wieder problemlos möglich. Wie eine angepasste Syntax aussehen kann, zeigt das folgende Beispiel:

<div id="footer">
   <div id="footer_l">
      <div id="footer_r">
         <p id="syndicate">
         <?php
            $timestamp = time();
            $datum = date("d.m.Y - H:i", $timestamp);
            echo $datum;
         ?>
         </p>                                           
      </div>
   </div>
</div>

Dieses Tutorial hat gezeigt, dass auch mit sehr wenig Aufwand eine Anpassung von Templates möglich ist. Dabei muss man weder die Template-Struktur verändern, noch sich großartig mit HTML und CSS auskennen. Unstrittig ist aber natürlich auch, dass größere Anpassungen auf diese Weise kaum machbar sind. Dazu muss man dann tiefer in die Joomla!-Template-Materie einsteigen. Mehr zu diesem – übrigens sehr interessanten – Thema, dann in weiteren Tutorials.

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