Joomla 1.6 Templates selbst erstellen

Obwohl es unzählige Templates für das CMS Joomla gibt, kann es durchaus sinnvoll sein, sich genauer mit der Templateerstellung in Verbindung mit Joomla zu beschäftigen. Eines vorweg: Es ist nicht so kompliziert, wie es auf den ersten Blick vielleicht scheinen mag!

Grundvoraussetzungen

Auch wenn man kein Guru auf dem Gebiet von HTML, CSS und eventuell auch PHP sein muss, sind gewisse grundlegende Kenntnisse (vor allem in HTML und CSS) sinnvoll und erleichtern die Templateerstellung erheblich. Bezogen auf CSS kann ich nur sagen, dass selbst CSS Gurus oft mit dem einen oder andren Problem zu kämpfen haben. Dies nicht zuletzt durch die teilweise sehr kreative CSS Interpretation diverser Browser, die sich eher weniger um geltende CSS Standards gekümmert haben.

Ich behaupte hier einfach, dass man – um möglichst gute standardkonforme CSS Unterstützung zu bekommen – auf Mozilla Firefox zurückgreifen sollte. Optimalerweise hat man dann auch gleich Firebug oder die WebDeveloper Toolbar installiert!

Ein guter Editor (z.B. Notepad++) sollte ebenso zum Fundus des angehenden „Joomlatemplatedesigner“ zählen :-).

Zuerst ist das Design

Egal ob auf Papier gezeichnet, oder auf dem PC im Lieblingsgrafikprogramm erstellt, hauptsache man weiß, wo man hin will. Ich mache es immer so, dass ich auf GIMP zurückgreife. Das heißt, ich „zeichne“ mir in Gimp die „Website“.

Zu allererst öffnet man eine neue Datei. Die Leinwand (= in Gimp die Arbeitsfläche) sollte hierbei so groß sein (vor allem in der Breite!) wie der Webauftritt später.

Bsp: Will man eine Website mit fixer Breite von 1024px, bietet es sich an, die Leinwand in der Dimension 1024px x 768px zu erstellen.

Nun zeichnet man sich auf erwähnter Leinwand seine Website. Grundlegend könnte man die Elemente der Website aufteilen in:

• Hintergrund (hier ist der Body in HTML gemeint, dem man zb ebenso eine Grafik als Hintergrundbild geben kann)
• Header
• oberes Menü (horizontal)
• Breadcrumbleiste (horizontal)
• linkes Menü
• Inhalt
• rechts Menü
• Fußleiste

Um alle Elemente komfortabel bearbeiten zu können, sollte man auf jeden Fall auf Ebenen in Gimp zurückgreifen. Was heißt das? Nun, jedes Element sollte auf einer eigenen Ebene liegen. Der Vorteil liegt darin, dass sich die Ebenen untereinander nicht in die Quere kommen. Man kann jede Ebene und somit auch jedes Element der Homepage separat bearbeiten, sieht aber trotzdem immer das Gesamtbild (da ja auch die anderen Ebenen angezeigt werden).

Kann man sich rein vom lesen her sicherlich schwer vorstellen.

Deshalb biete ich hier eines meiner ersten Joomla  1.6 Template als GIMP XCF Datei zum Download an. Bitte herunterladen und sich die Ebenen ansehen! (Man benötigt dafür GIMP)!

Das Konzept dahinter ist, dass man quasi jede Ebene nach Fertigstellung des Design in Gimp in eine separate Grafik (JPG oder auch PNG) speichert und diese Grafiken dann in die Homepage per CSS einbinden kann. Um es nochmals zu verdeutlichen:

• Als erstes hat man in Gimp das Gesamtdesign, die Elemente sind in unterschiedlichen Ebenen aufgeteilt
• Ist das Design in Gimp soweit fertig, speichert man die einzelnen Elemente (siehe oben -> Elemente der Website) in separaten Grafikdateien (PNG oder JPG Format)
• Diese separaten Grafiken bindet man später per CSS ein, damit der Webauftritt dann so aussieht wie im Gimpentwurf

 

Weiter gehts

Ich gehe davon aus, dass sämtliche Grafikelemente nun als JPG oder PNG Datei vorliegen, man CSS soweit beherrscht,  dass man ein Design erstellt hat und die Grafikelemente entsprechend eingebunden hat (Die Elemente kann man sich im Beispieltemplate für Joomla 1.6 (ZIP) ansehen. Es ist hier noch nicht wichtig, dass man in irgend einer Form an Joomla denkt! Inhalte kann man in diesem Stadium der Entwicklung noch „hardcoded“ einfügen, um zu sehen wie sich das Design macht.

Beim Entwickeln sollte man eventuell bereits einen Hauptordner mit der Datei index.php haben und 2 Unterordner /images und /css. Die CSS Datei, die in die index.php eingebunden wird, liegt im Unterordner /css die einzelnen Bilder und Designelemente im Unterordner /images!

Joomla „Modulpositionen“  einfügen

So, nun ist es ander Zeit sich über Joomla Gedanken zu machen. 🙂 Joomla behandelt fast alle seine Komponenten als Module (im Quelltext type=“modules“) die an gewissen Positionen (im Quelltext name=“position-1″ usw) und in einer gewissen Darstellung (im Quelltext type=“xhtml“) eingebunden werden. Im Quelltext muss man nun noch darauf „hinweisen“, dass nun Joomla in Aktion tritt UND dass ein Modul an einer bestimmten Position eingebunden wird.

Module bindet man im Quelltext (index.php) wie folgend ein:

• <jdoc:include

folgend dann oben erwähnte Details also:

• <jdoc:include type=“modules“ name=“position-1″ style=“xhtml“

und abschließend — wichtig!

• />

Gesamt also:

• <jdoc:include type=“modules“ name=“position-1″ style=“xhtml“  />

Unterschieden wird hier ausschließlich nach name=“irgend eine Position“.  Es ist vollkommen egal, wie diese Position heißt! Es muss nur im Backend von Joomla nach erfolgreicher Templateinstallation eine Zuordnung von Modul zu Position im Template erfolgen. (hier spielt auch die Datei templatedetails.xml, die ich ganz am Ende erwähne, eine wichtige Rolle).

Einbindung von Modulen für verschiedene Aufgaben

Man könnte  z.B. für ein oben darzustellendes Menü folgendes einbinden:

• <jdoc:include type=“modules“ name=“position-1″ />

für die „Breadcrumbs“:

• <jdoc:include type=“modules“ name=“position-2″ />

und für die linke Seite eines 3 Spalten Layout folgende Modulpositionen berücksichtigen:

• jdoc:include type=“modules“ name=“position-7″ style=“xhtml“ />
• <jdoc:include type=“modules“ name=“position-4″ style=“xhtml“ />
• <jdoc:include type=“modules“ name=“position-5″ style=“xhtml“ />

Weiters zB für die rechte Seite:

• <jdoc:include type=“modules“ name=“position-12″ style=“xhtml“  />
• <jdoc:include type=“modules“ name=“position-6″ style=“xhtml“ />
• <jdoc:include type=“modules“ name=“position-8″ style=“xhtml“ />
• <jdoc:include type=“modules“ name=“position-3″ style=“xhtml“ />

Joomla „Contentbereich“ einfügen

Das Schema bleibt fast das selbe. Dort wo im Quelltext der Content  – also die Beiträge – erscheinen soll, schreibt man im Quelltext (index.php):

• <jdoc:include type=“component“ />

Hier wird keine Position angegeben bzw. ist keine Position nötig, da ohnehin klar ist, dass es sich um den Beitragsbereich handelt!

Gut, gehen wir davon aus dass man nun also für das linke und auch das rechte Menü per jdoc:include… Module und entsprechende Positionen eingebunden hat und der Contentbereich ebenso per jdoc:include… in die index.php eingetragen worden ist.

Zurück zum Anfang der index.php

Ganz wichtig: als ERSTE ZEILE der index.php des Template sollte folgendes stehen:

• <?php defined(‚_JEXEC‘) or die; ?>

Dies erlaubt nur Joomla einen direkten Zugriff auf Joomladateien und dient so der zusätzlichen Sicherheit

Bei jedem HTML Dokument ist es ausserdem immens wichtig, den richtigen Doctype anzugeben, damit der Browser weiß, wie er die ihm vorgesetzte Datei „interpretieren“ soll. Was ich vorhin auch noch vergessen habe zu erwähnen ist, dass es auch für den Headbereich ein „jdoc:include…“ gibt nämlich:

• <jdoc:include type=“head“ />

Dieses „include“ bindet u.a. diverse meta tags und auch den Titel der Website ein. Es ist also auch immer hinzuzufügen!

Der gesamte Kopfbereich der index.php sieht also so aus:

• <?php defined(‚_JEXEC‘) or die; ?>
• <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
• <html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“de-de“ lang=“de-de“ dir=“ltr“ >
• <head><jdoc:include type=“head“ />
• <link rel=“stylesheet“ href=“<?php echo $this->baseurl ?>/templates/simply_orange/css/template.css“ type=“text/css“ media=“screen,projection“ />
• </head>

Info : <?php echo $this->baseurl ?> bindet automatisch das korrekte Basisverzeichnis ein.

templatedetails.xml, template_preview.png, template_thumbnail.png

Die Datei templatedetails.xml beschreibt das erstellte Joomlatemplate im sogenannten XML Format. In dieser Datei müssen u.a. alle oben festgelegten Positions eingetragen werden, die Verzeichnisse des Template und die Dateien die im Hauptverzeichnis liegen.

Für das Template simply_orange sieht die templatedetails.xml so aus:

 

Ein Screenshot des fertigen Template (der Website) wird nun noch als template_preview.png in einer Auflösung von ca. 800×600 in das Hauptverzeichnis des Template gepackt. Danach verkleinern wir den Screenshot auf ca. 200×150 und speichern diesen unter dem Namen template_thumbnail.png ebenso im Hauptverzeichnis des Template ab.

Template Zippen

Zuletzt, nachdem nun alles passen sollte, zippen wir unseren Ordner, der unser Template enthält inkl. aller Unterverzeichnisse und Dateien. Diese Zip Datei kann man dann per Joomlabackend -> Erweiterungen installieren hochladen und in der Templateverwaltung als Standardtemplate definieren.

Ist auch das geschehen, muss man den aktiven (bzw. den gewünschten) Modulen noch die entsprechende Position im Template zuordnen (zu finden in der Modulverwaltung) und schon sollten die Module auch auf der Website erscheinen.

Kritik und Anregungen nehme ich gerne per Kommentar oder Email entgegen 😉

Danke fürs lesen…