Im Downloadcenter auf time4mambo stehen die drei Grunddateien zum Download bereit (index.php, templateDetails.xml, template.css).
Leider verändert Joomla immer wieder gern den eingegebenen Code und lässt wichtige Zeilen verschwinden, bzw. ersetzt sie ungefragt mit den tatsächlichen Daten. Es wird also der Code ausgeführt, obwohl er eigentlich hier zur Ansicht eingestellt ist.
Da ich dieses Phänomen nicht wirklich lösen kann, stelle ich zu Beginn dieses Tutorials einen Screenshot vom Orginalcode der index.php hier ein. Im PDF-Tutorial ist hingegen der korrekte Code.
Um ein eigenes Template zu erstellen, wird folgende Verzeichnisstruktur benötigt:
In der "index.php" steht die Grundstruktur des Templates. Also der eigentliche HTML-Code.
Die "templateDetails.xml" wird zum installieren benötigt und gibt auch u.a. die möglichen Positionen wider.
Im Verzeichnis "css" steht die CSS-Datei und im images-Verzeichnis evt. Grafiken, die für das Template benötigt werden.
index.php
Dieser Teil verhindert, dass die index.php einfach so augerufen wird. Beispielsweise um schädlichen Code einzuschleusen. Wer keine Rechte zum editieren hat, kann die index.php nicht verändern. Dabei geht es nicht um einen Schutz gegen unberechtigten Einblick in den Quellcode. Das kann hiermit nicht verhindert werden.
Die eingestellte Sprache wird automatisch eingeladen und verabreitet. Auch ein wichtiger Eintrag für mehrsprachige Websites. Die ausgewählte Sprache wird per PHP-Code automatisch eingeladen und angezeigt. Beide Angaben sind beispielsweise für den Browser wichtig.
Die Meta-Tags, die in den Artikeln angegeben werden, Erklärungen (Description), Autor und alles weitere, was wichtig in den Metatags sind, werden von Joomla entsprechend Ihrer Einstellungen zusammengestellt und automatisch zur Laufzeit hier ausgegeben
Zwei CSS-Dateien, die von Joomla für generelle Ausgaben benutzt werden.
In "$this->baseurl" steht der Domainname und gfls. das Joomla-Verzeichnis, wenn es nicht im Root untergebracht ist. In "$this->template" der Name des Template-Verzeichnisses, welches benutzt wird. Wird die URL auf diese Art eingeben, braucht man sich keine Gedanken mehr zu machen, wo denn nun die richtigen Dateien liegen. Joomla stellt automatisch das richtige Verzeichnis zusammen.
Ein eigenes Favicon kann geladen werden. Favicons sind die kleinen Icons, die in der Adresszeile des Browsers angezeigt werden. Meist auch im einzelnen TAB eines Browsers.
Das Ende des Kopfes der index.php
Zwischen den "body-Tags" kommt das grundsätzliche Aussehen des Templates und in der CSS-Datei wird das Template formatiert.
Übung mit einfachen Div-Design
Zur Übung wollen wir ein einfaches DIV-Template erstellen:
Der Code sieht folgendermaßen aus:
Und in die CSS-Datei (template.css) müssen diese Angaben rein:
Positionen
Um nun Inhalte in die einzelnen Bereiche zu bekommen, müssen sogenannte "Positionsangaben" gemacht werden. Positionsangaben sind nichts weiter als Platzhalter, an Stelle dieser später Inhalte ausgegeben werden.
Der Hautinhalt, der Content (Artikel, Komponenten) soll im Bereich "mitte" ausgeben werden. "links" soll das Menü hin, "oben" ein Header, "rechts" ein paar Module, wie beispielsweise das aktuelle Wetter und "unten" soll das Copyright stehen.
Die Inhalte erzeugen wir später im Backend (Adminbereich) von Joomla. In dem wir Artikel schreiben und Menüs anlegen. Das Copyright und den Header erstellen wir, in dem wir eigene Module definieren und das Wetter ist ein externes Modul, welches wir im Joomla installieren und dann an der Position "rechts" an Stelle des Platzhalters ausgeben.
Ein Platzhalter hat immer das gleiche Aussehen:
In type steht, um was es sich handelt. Bis auf wenige Ausnahmen (die wir gleich noch betrachten werden), sind das meistens "modules" - Module, die vom Platzhalter eingelesen werden sollen.
In name steht die eigentliche Position. Diese Position wird beim Modul ausgewählt und damit festgelegt, wo das Modul angezeigt wird. Werden mehrere Module für eine Position ausgewählt, werden die einfach untereinander angezeigt.
style gibt an, wie das Modul verarbeitet werden soll. Dazu stehen folgende mögliche Stile standardmäßig zur Verfügung:
- none
kein spezieller Stil soll augegeben werden. Diese Angabe kann auch weggelassen werden. Also einfach nur: - xhtml
Der Inhalt wird in DIV-Tags ausgegeben - table
Der Inhalt wird in TABLE-Tags ausgegeben (td) - horz
Der Inhalt wird horizontal ausgegeben - outline
Der Inhalt wird hervorgehoben (mit einer Hintergrundfarbe belegt) - rounded
Der Inhalt wird mit einem Rahmen und aberundeten Ecken versehen. Vorraussetzung ist allerdings, dass selbige auch in der CSS-Datei definiert sind. Sonst wird diese Angabe einfach ignoriert.
Besondere Positionen / Platzhalter
Ein paar Positionsangaben unterscheiden sich von den anderen:
component kennzeichnet den Hauptiunhalt. Also Artikel und Komponenten, die dann an der Stelle ausgegeben werden. In früheren Joomla- und Mamboversionen wurde diese Positionangabe mit "Main" gekennzeichnet.
message ist verantwortlich für etwaige Fehlerausgaben oder wenn man eine eMail in den Kontakten abschickt - dann wird an der Stelle der erfolgreiche Versand gemeldet.
Weit verbreitet sind diese Angaben, die aber nicht zwingend so vorgegeben sind. Man kann also seine Banner auch an Positionen mit anderen Namen ausgeben:
banner läßt schon vermuten, dass man damit das Bannermodul, bzw. deren Inhalte ausgeben kann.
Die breadcrumbs ist die jetztige Bezeichnung für den "Pathway". Also die Pfadangabe, wo man sich gerade befindet im Webauftritt.
Einfügen der Positionen ins Template
Die Platzhalter / Positionsangaben werden einfach zwischen den DIV-Tags geschrieben:
Das wars schon. Jetzt noch die Datei als index.php im Templateordner speichern.
templateDetails.xml
Die templateDetails.xml Datei dient zum einen der Installation, enthällt Informationen über das Template und auch die möglichen Positionen des Templates.
Wenn man die Datei speichert, muss man auf die richtige Schreibweise - mit einem großen "D" in der Mitte - achten!
Betrachten wir die Datei im Einzelnen:
"utf-8" kann auch gegen einen anderen Zeichensatz ausgetauscht werden. Wobei utf-8 den europäischen Zeichensatz darstellen kann.
Das DOCTYPE gibt an, um welche Sprache es sich handelt. Also das es ein XML-File ist und wie es im Detail zu interpretieren ist.
Die Version bezieht sich auf Joomla und der Typ kennzeichnet, das es ein Template ist. client gibt an, für welchen Bereich das Template gemacht ist. client="site" gibt an, dass es ein Frontend-Template ist. Mit client="admin" wird ein Template für das Backend gekennzeichnet. Für "TemplateName" tragen Sie den Namen Ihres Templates ein. Unter diesen Namen ist das Template später auch auswählbar.
Ich denke, die Angaben sprechen für sich und bedarf keiner weiteren Erklärung. Tun Sie mir aber bitte den Gefallen und kopieren Sie nicht meinen Namen mit, wenn Sie Ihre eigenen Templates erstellen.
Mit den Umlauten gibt es manchmal Probleme. Weshalb es Sinn macht, statt der Umölaute ue, ae, etc. zu schreiben
Versionskontrolle kann nie schaden. Manchmal verändert man am Template etwas - hiermit hat man den Überblick.
Eine kurze Erklärung - zum Copyright oder wofür das Template ist oder ...
Schreiben Sie hier die Files hinein, die für das Template benötigt werden und geben Sie den relativen Pfad an, wo die Files hingeschreiben werden sollen, wenn das Template installiert wird. Dazu gehört natürlich auch diese Datei, die Sie gerade schreiben.
Sie brauchen nicht extra einen "images"-Block, auch nicht einen "css-Block", wie im Anschluss. Sie können diese Files auch direkt in den "files-Block" schreiben. So ist es aber etwas übersichtlicher. Besonders wenn Sie viele Grafiken oder auch mehrere CSS-Dateien haben. Denken Sie auch wieder an den korrekten relativen Pfad!
Wie gesagt: Sie müssen nicht extra einen css-Block anlegen, schaden kann es aber auch nicht....
Hier finden Sie die Positionen wieder, die wir in die "index.php" eingetragen haben. Wichtig zu wissen ist, dass hier die Positionen stehen, die Sie später auch in dem Dropdown-Button im Modul wieder finden. Anders ausgedrückt: vergessen Sie hier eine Position einzutragen, kann diese nachher auch nicht mit dem Dropdown-Button ausgewählt werden (wohl aber per Hand direkt in das Feld geschrieben werden). Viele Templates, die Sie im Internet finden, haben hier mehr Positionen stehen, als tatsächlich im Template enthalten sind. Lassen Sie sich also nicht davon täuschen, dass Sie so viele Positionen auswählen können - schauen Sie besser nach, was tatsächlich da ist.
Am Ende die XML-Datei schließen und speichern.