Joomla Templates installieren

Um unser Joomla-Template installieren zu können, fehlen noch ein paar Dinge. Zum einen sollten wir noch das CSS in eine externe Datei schreiben und zum anderen müssen wir nach eine XML-Datei erstellen, in der die für die Installation notwendigen Dateien gelistet sind. Fangen wir mit dem CSS-Teil an.

CSS auslagern

Im Head der Seite finden wir eine Anweisung namens

Alles was innerhalb des style-Befehls gelistet ist, sind CSS-Anweisungen, die wir nun ausschneiden und in eine neue Datei einfügen. Diese speichern wir mit dem Namen "formate.css" im Ordner "css". Dieser Ordner sollte im gleichen Ordner liegen wie "images".

Site-Struktur

Im Quelltext von index.php bleibt dann noch

Diese Zeilen werden ersetzt durch einen Verweis auf die CSS-Datei:

Auch hier übernimmt ein php-Befehl die Zuordnung des richtigen Pfades zu unserem Template.

Erstellung der XML-Datei für die Installation

Theoretisch könnten wir jetzt schon die XML-Datei anlegen, doch zum guten Ton gehören noch zwei weitere Dinge:

Ein Vorschaubild
Ein verkleinertes Vorschaubild (Thumbnail)

Dafür erstellen wir von unserem Screendesign in Photoshop über "Datei - für Web speichern" zwei Versionen als png-Datei mit dem Namen template_preview.png und template_thumbnail.png in den Breiten 400px und 200px. Diese legen wir in den "site"-Ordner.

preview thumbnail

Datei-Struktur 2

Nun fehlt "nur" noch die XML-Datei. Diese hat folgenden Inhalt:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="2.5" type="template" client="site">
<name>Meine tolle Website</name>
<creationDate>18. März 2013</creationDate>
<description>Meine tolle Website</description>

<files>
<filename>component.php</filename>
<filename>error.php</filename>
<filename>index.html</filename>
<filename>index.php</filename>
<filename>offline.php</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>templateDetails.xml</filename>
<filename>css/formate.css</filename>
<filename>images/background.jpg</filename>
<filename>images/banner.jpg</filename>
<filename>images/logo.png</filename>

</files>

<positions>
<position>left</position>
<position>breadcrumb</position>
<position>search</position>
<position>right</position>
<position>footer</position>
</positions>

</extension>

Im wesentlichen werden hier alle Dateien (files) gelistet, die für das Template benötigt werden. component.php, error.php und offline.php sind Standard-Dateien, die Sie später hier laden können. Die Datei index.html ist leer - sie soll verhindern, dass jemand die Dateistruktur über den Browser ermitteln kann.

Die Datei templateDetails.xml ist der Text oben entsprechend gespeichert.

Die positions sind die Angabe, die wir mit "name" vergeben haben, um später unsere inhalte durch Joomla an bestimmte Stellen platzieren zu können.

Aus all diesen Dateien machen wir eine zip-Datei (nicht aus dem übergeordneteten Ordner "site", sondern durch markieren aller Daten). Wer das mit einem Mac macht, sollte unbedingt ein Komprimierungsprogramm nehmen und nicht das Kontextmenü des Finders benutzen! BetterZip ist ein Programm, was mir bisher gute Dienste dafür leistete.

Struktur 3

Hier das fertige Template zum Installieren: Template.zip

Installation des Joomla-Templates

So, nun machen wir die Probe aufs Exempel und rufen unsere Joomla-Installation auf. Wie man eine lokale Joomla-Installation unter MAMP macht, wird auf dieser Website gut erklärt. In Joomla 3 rufen wir den Menüpunkt Erweiterungen - Erweiterungen auf und wählen unser Zip-File an. Nach "Hochladen & Installieren" sollte eigentlich alles geklappt haben. Jedenfalls gab es bei mir nun keine Fehlermeldungen mehr (anfangs stimmte ein Dateiname nicht - ich hatte logo.jpg statt logo.png in der XML-Datei geschrieben).

Nach der Installation kann man unter Erweiterung - Templates das neue Template mit Klick auf den Stern aktivieren.

Joomla Backend Template Installation

Ein Blick ins Frontend zeigt, dass noch nicht alles perfekt ist:

Joomla Frontend

Zuerst richte ich jetzt das Bannerbild nach rechts aus. Dafür definiere ich eine Klasse ".rechts" und weise sie dem Bild in der index.php zu:

<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/banner.jpg" alt="Banner" class="rechts" />

Die Klassen-Definition schreibe ich in die css-Datei formate.css:

.rechts {
float:right;}

Wie man sieht, ist der Banner jetzt richtig gesetzt, allerdings stimmt nun die Höhe des Headers nicht mehr (roter Doppelpfeil).

Das liegt an dem eingesetzten float-Befehl. Er veranlasst das Bild, nach rechts zu fliessen und Raum nach links freizugeben. So kann der folgende Teil (der Content) links daneben hochrutschen. Mit Aufhebung des float-Befehls über clear wird nach dem Bild alles wieder auf normal gesetzt. Ich erstelle eine Klasse namens ".clearfloat", die ich dann einem br-tag zuweise. Br steht für Zeilensprung, doch durch die Formateigenschaften wird er nicht sichtbar sein:

.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

In der index.php-Datei wird dann folgender Code (kursiv fett) ergänzt:

<div id="header">
<a href="<?php echo $this->baseurl ?>"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" alt="Logo" /></a>
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/banner.jpg" alt="Banner" class="rechts" />
<br class="clearfloat" />
</div>

Der aktuelle geänderte Quellcode ist in diesem template (template2.zip) bereits integriert.

Cotent mit Lücke

Wie man sieht, ist jetzt nur noch die Lücke im Content zu beheben. Wenn man allerdings mit der Firefox-Erweiterung colorzilla diesen grünen Balken anklickt, wirft der Inspektor aus, dass es sich um den Footer handelt. Dieser wird demnach immer nach Abschluss des Inhalts gesetzt. Er sollte also nach dem Füllen der Seite unten stehen (solange die minimal Höhe von 650px unseres wraps erreicht wird, wenn nicht sollten wir diese entsprechend reduzieren). Vorerst lassen wir erstmal alles so und machen weiter mit der Integration der Navigation, der Breadcrumbs, der Suchfunktion und Inhalt für die einzelnen Navigationspunkte. Hier geht's weiter ->

nach oben