Dieses Tutorial beschreibt die Erstellung eines Templates für Joomla! 1.7 und Joomla! 2.5. Es geht auf die Veränderungen gegenüber der Vorgängerversion ein und gibt dem Leser eine Schritt-für-Schritt Anleitung sowie ein herunterladbares Muster zum Üben, aber auch das fertige Template mit auf den Weg.
Dieses Tutorial bietet keinen Exkurs über HTML, CSS oder Joomla! selbst, solche Kenntnisse sollten bereits vorhanden sein.
Darüber hinaus wurde die Anleitung zum besseren Verständnis auf das Notwendige reduziert. So finden zum Beispiel die optionale template.css.php (zur Komprimierung der CSS- Anweisungen), die Möglichkeit, Templatefarbe oder Templatestyle über Parameter zu steuern, oder die individuelle Anpassung der error.php nur am Rande Erwähnung.
Update: Am 24.1.2012 ist Joomla! 2.5 final erschienen. Änderungen des Templates gegenüber der Version 1.7 können Sie im Kartenreiter Joomla! 2.5 nachlesen. Außerdem wird direkt innerhalb des Tutorials auf Veränderungen hingewiesen. Das angepasste Mustertemplate für Joomla! 2.5 finden Sie am Ende des Artikels zum Download.
Vielen Dank an Christian Prüwer (Starworx) für sein Lektorat.
Struktur
-
Alle Joomla! 2.5 / 1.7 Templates müssen über das Joomla! Backend -> Erweiterungen -> Erweiterungen (auf Englisch „Extension Manager“) installiert werden. Das Hochladen via FTP funktioniert nicht (mehr). Frontend-Templates sind ohne Ausnahme nach abgeschlossener Installation unter dem folgenden Pfad, bzw. Verzeichnis abgelegt (wobei „deinedomain“ mit dem Namen Ihrer Domain zu ersetzen ist): http://deinedomain.de/templates/ (Beispiel: http://software-lupe.de/templates/)
Der Name des Templates wird in der Installationsdatei templateDetails.xml festgelegt (dazu später mehr) und ist gleichzeitig der Name des Verzeichnisses, in dem alle Dateien des Templates gespeichert werden. In unserer Arbeitsvorlage bekommt das Template den Namen „muster“: http://deinedomain.de/templates/muster/
-
In einem Template-Ordner befinden sich alle Dateien, die für ein Joomla! 2.5 / 1.7-Template zwingend erforderlich (rot gekennzeichnet), dringend empfohlen (grün) oder optional möglich (kursiv) sind. Einige davon werden wiederum in eigenen Ordnern (fett markiert) abgelegt.
- css
- editor.css (optional)
- error.css (optional)
- ie6.css (optional)
- ie7.css (optional)
- ie8.css (optional)
- index.html
- offline.css (optional)
- print.css (optional)
- template.css
- template.css.php (optional)
- template_rtl.css (optional)
- fonts (optional, zum Einbinden eigener Schriften)
- index.html
- NamederSchrift.eot (optional)
- NamederSchrift.oft (optional)
- NamederSchrift.woff (optional)
- html (optional für overrides)
- com_content (optional)
- article (optional)
- default.php (optional)
- index.html
- index.html
- modules.php (optional)
- article (optional)
- com_content (optional)
- images (Ordner für alle Gestaltungsbilder des Templates)
- system (Ordner für Systembilder, z.B PDF, Druck, E-Mail-Icons)
- index.html
- index.html
- system (Ordner für Systembilder, z.B PDF, Druck, E-Mail-Icons)
- js (optional, für die Ablage von Javascript-Dateien)
- index.html
- languages (optional, Ordner für die Sprachdateien des Templates)
- de-DE (optional)
- de-DE.tpl_muster.ini (optional)
- de-DE.tpl_muster.sys.ini (optional)
- index.html
- en-GB (optional)
- en-GB.tpl_muster.ini (optional)
- en-GB.tpl_muster.sys.ini (optional)
- index.html
- index.html
- de-DE (optional)
- component.php (optional, steuert zusammen mit print.css die Druckausgabe)
- error.php (optional, zusammen mit error.css für das Aussehen der Fehlerseiten verantwortlich)
- favicon.ico 16 x 16px (kleines Icon, das in der Browser Adresszeile und in den Bookmarks gezeigt wird)
- index.html
- index.php (die wichtigste Datei: enthält das HTML-Gerüst, PHP-Anweisungen und Links zu CSS, Javascript etc.)
- offline.php (optional, zusammen mit offline.css für die Anzeige des Offline-Modus)
- template_preview.png (Template-Vorschaubild 800 x 600px)
- template_thumbnail.png (kleines Template-Vorschaubild 206 x 150px)
- templateDetails.xml
- css
-
Optional
In diesem Kapitel schauen wir uns die optionalen Dateien und Ordner an.
-
Optionale PHP-Dateien, samt dazugehörigem CSS
Schauen wir uns als Erstes component.php, error.php und offline.php an.
-
Diese drei Dateien (component.php, error.php und offline.php an) kopieren wir uns aus dem Ordner: http://deinedomain/templates/system heraus und fügen sie in den eigenen Template-Ordner „muster“ http://deinedomain/templates/muster ein.
Die Dateien offline.css und error.css aus dem Unterordner „system/css“ (http://deinedomain/templates/system/css) sowie eine neu anzulegende print.css speichern wir im Unterordner „muster/css“ (http://deinedomain/templates/muster/css) ab.
„Wozu?“ werden sich jetzt sicher so einige von Ihnen fragen. Durch das Anlegen eigener Dateien im eingesetzten Template, bekommen diese eine höhere Priorität und überschreiben die Anweisungen aus dem Systemordner. So kann man erstens diese Seiten nach eigenen Wünschen neu gestalten und ist zweitens bei dem nächsten Joomla!-Update vor einem Überschreiben der individuellen Anpassungen geschützt. Denn der eigene Template-Ordner wird dabei nicht angetastet.
-
Die component.php ist für die Ausgabe der Druckausgabe verantwortlich. Mit der print.css wird das Aussehen angepasst. So können Kopf- und Fußzeile sowie die Seitenleisten von dem Druck auf Papier (oder PDF) ausgenommen, Hintergrund und Schriftbild angepasst werden. Die print.css muss jedoch noch im Bereich der component.php verlinkt werden, und zwar mit:
<link rel="stylesheet" href="/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/print.css" />
-
Falls Sie genug von den Standard-Fehlerseiten „error 404“ haben, können Sie hierüber individuelle Mitteilungen für Ihre User erstellen.
-
Wer seine Website schon einmal über das Backend offline (in den Wartungsmodus) gestellt hat, kennt die Offline-Seite des Frontends: Sie besteht aus einem Anmeldeformular, über das der Adminstrator trotzdem noch Zugriff erhält. Wem dieser Anblick zu fad ist, der sollte sich diese beiden Dateien vorknöpfen.
Optionale CSS-Dateien
Neben den im vorigen Kapitel benannten print-, offline- und error.css können weitere CSS-Dateien erstellt werden, die das Template zum Beispiel hinsichtlich der Breite oder Farbgebung unterschiedlich stylen. Über dementsprechende Parameter und PHP-Anweisungen kann dem User die Auswahl der Template-Styles im Joomla-Backend ermöglicht werden.
Weitere gängige CSS-Dateien sind die editor.css sowie die speziell für andere Browser erstellten. Die bekannteste dürfte hier die ieonly.css sein (für den Internet Explorer).
-
Hiermit kann das Aussehen innerhalb eines WYSIWYG-Editors, also während des Erstellens des Textes, geändert werden. Die meisten Editoren bieten in ihrer Konfiguration die Möglichkeit, den Pfad zu dieser editor.css einzutragen.
-
Manchmal geht es nicht anders und für spezielle Browser müssen spezielle CSS-Anweisungen her, die man in gesonderten CSS-Dateien abspeichert. In der index.php muss mittels einer Browserweiche auf diese Dateien verlinkt werden (dazu später mehr).
-
Ist im Grunde dasselbe wie die template.css, jedoch mit PHP-Anweisungen erweitert. Durch diese kann die Datei bei Aufruf komprimiert und gecached werden.
-
Für die Anzeige von Sprachen, die von rechts nach links gelesen werden (benötigt zusätzlich eine PHP-Anweisung in der index.php).
Ordner „fonts“ – Eigene Schriften benutzen
Über die folgende CSS-Anweisung (kommt direkt nach der reset.css Anweisung) können eigene, im Ordner „fonts“ abgelegte, Schriften eingebunden werden (hier im Beispiel die Schrift „Titillium Maps“):
-
@font-face { font-family: ''Titillium Maps''; src: url("../fonts/TitilliumMaps29L002.eot"); src: local(''Titillium Maps''), local(''TitilliumMaps''), url("../fonts/TitilliumMaps29L002.otf") format("opentype"), url("../fonts/TitilliumMaps29L002.woff") format("woff");}
und hinterher per font-family einem Element zugewiesen werden
h2 {font-family: ''Titillium Maps'';}
Für dieses Tutorial habe ich die zusätzlichen Schriften aus dem Beez-Template eingesetzt.
Ordner „html“ – Overrides
Dieser Ordnername darf nicht verändert werden. Mit Overrides lassen sich zum Beispiel ein eigener Style für ausgesuchte Module verwirklichen, die Anzeige von Artikeln steuern und vieles mehr. Abgelegt werden die mit Änderungen versehenen Dateien in den Ordner „html“.
Seit Joomla 1.5 sind die Template Overrides bekannt, mit der neuen Version 1.6 gibt es nun auch noch „Alternative Layouts“: Layout Overrides.
Ordner „js“ – Für Javascript-Dateien
Hier können die Dateien mit der Endung .js abgespeichert werden.
Ordner „languages“ – Übersetzungen für das Template
Sprachdateien müssen nach einer bestimmten Syntax benannt werden
-
Die englische Variante fängt mit einem en-GB an. Der String templatename ist mit dem Namen des Templates zu ersetzen:
en-GB.tpl_templatename.ini = en-GB.tpl_muster.ini
en-GB.tpl_templatename.sys.ini = en-GB.tpl_muster.sys.iniDie deutschen Sprachdateien beginnen mit de-DE:
de-DE.tpl_templatename.ini = de-DE.tpl_muster.ini
de-DE.tpl_templatename.sys.ini = de-DE.tpl_muster.sys.ini
template_preview.png (empfohlen!)
Das ist ein Screenshot des fertigen Designs und muss als PNG, außerdem in der Größe 800 x 600 Pixel und unter dem Namen template_preview.png abgespeichert werden.
template_thumbnail.png (empfohlen!)
Das ist ebenfalls ein Screenshot des fertigen Designs und muss als PNG, außerdem in der Größe 206 x 150 Pixel und unter dem Namen template_thumbnail.png abgespeichert werden.
favicon.ico (empfohlen!)
Die kleine Grafik, die in der Adresszeile eines Browsers links neben dem URL steht oder ein Lesezeichen schmückt, wird Favicon genannt. Wer nicht selbst die Möglichkeit hat, ein 16 x 16 oder 32 x 32 Pixel großes Bild in ein .ico-Format zu speichern, kann dafür einen der zahlreichen Online-Generatoren bemühen.
-
Notwendig
Kommen wir nun zu den Dateien, ohne die ein Joomla! 2.5 / 1.7 Template nicht funktionieren würde.
-
Ordner anlegen
Als Erstes legen wir uns ein Verzeichnis auf der heimischen Festplatte an. Der Einfachheit halber nennen wir diesen Ordner genauso, wie das Template heißt, nämlich „muster“ (klein geschrieben). Außerdem erstellen wir direkt die Unterordner: „css“, „fonts“, „html“, „images“, „js“ und „languages“.
Texteditor
Für das Anlegen und Bearbeiten der HTML-, CSS-, PHP-, INI- und Javascript-Dateien empfehle ich Ihnen den kostenlosen Texteditor Notepad++ (nicht mit dem Windows Notepad verwechseln!). Sie können selbstverständlich auch einen anderen verwenden. Wichtig ist nur, dass die Konvertierung richtig eingestellt ist.
Im Notepad++ unter „Einstellungen“ -> „Optionen“ -> (Kartenreiter) „Neu/Öffnen/Speichern“ -> Kodierung -> „UTF-8 ohne BOM“ und „Auch beim Öffnen von ANSI-Dateien“ auswählen. Das verhindert, dass eventuell vorhandene unsichtbare Leerzeichen am Anfang der Datei mitgespeichert werden, was zu unerklärlichen Fehlern führen kann.
Ordner „images“ – Ablageort für die Designgrafiken
Für alle Grafiken, die für das Design des Templates verwendet werden. Ist für die Installation notwendig.
index.html
Taucht in fast jedem Ordner auf, außer im (Joomla!) Stammverzeichnis und im Ordner „templates“. Obwohl sie so wichtig ist, handelt es sich bei ihr um eine beinahe leere Datei. Ihre pure Anwesenheit verhindert, dass Besucher die Inhalte eines Verzeichnisses auflisten können.
Entweder Sie kopieren sich die index.html aus dem Beez-Template, oder Sie erstellen sie selbst. Dazu wird im Texteditor eine neue Datei geöffnet, < html > < body > < / body > < /html > (Leerzeichen entfernen!) eingefügt und als index.html gespeichert.
Die index.html wird in das Stammverzeichnis „muster“ sowie in dessen Unterordner „css“, „js“, „fonts“, „html“, „images“ und „language“ kopiert.
template.css
Diese Datei beinhaltet die Cascading Stylesheets, mit der die HTML-Elemente gestyled werden. Sie gehört in den Unterordner „css“. Den Tutorial-Übungsunterlagen liegt eine template.css bei, die noch Anpassungen, bzw. Ergänzungen erfordert. Sie enthält die aktuelle reset.css von Eric Meyer, Formatierungen für die Container, aber auch leere CSS-tags, die Sie den eigenen Bedürfnissen entsprechend bearbeiten müssten.
index.php
Der Name darf nicht verändert werden. Die index.php enthält die HTML-Elemente, die für das Layout erforderlich sind, PHP-Anweisungen, Verlinkungen und evtl. Javascripts. Man kann auch die Startseite einer fertigen HTML-Website nehmen, nun in diese die PHP-Anweisungen und Verlinkungen einfügen und als index.php speichern.
-
Besorgen wir uns also zuerst ein HTML-Gerüst. Das kann eine beliebige statische HTML-Seite sein, aus der sämtlicher Inhalt entfernt wird. Auch die Menüs für die Navigation zählen dazu. Übrig bleibt ein HTML-Konstrukt, das sich aus den Tags html, head, body (samt end-tags) sowie den DIV-Boxen für Kopfzeile, Spalten, Inhalt und Fußzeile zusammensetzt.
Zum Üben empfehle ich Ihnen die Seite muster.html aus den Tutorial-Übungsunterlagen. Nachfolgend ist eine Skizze über deren Aufbau zum besseren Verständnis angehängt. Die Inhalte, also Module und Content, werden nur in die Bereiche rot (Kopfzeile – #header), grün (Breadcrumbs – #breadcrumb), gelb (linke – #insidebar1 und rechte – #insidebar2 Spalte sowie mittlerer Inhaltsbereich – #incontent) und blau (Fußzeile – #footer) eingefügt.
-
Wir öffnen die muster.html in einem Texteditor (zum Beispiel Notepad++). Ganz an den Anfang fügen wir ein paar PHP-Anweisungen ein:
und speichern die Datei als index.php ab.
defined( ‚_JEXEC‘ ) or die; (Zeile 2)
verhindert den direkten Aufruf der Datei.JHTML::_(‚behavior.framework‘, true); (Zeile 3)
lädt die MooTools Javascript-Bibliothek$app = JFactory::getApplication(); (Zeile 4)
die neue Variable $app ersetzt $mainframe aus Joomla 1.5 -
In allen Standard-Templates des neuen Joomla! 2.5 / 1.7 wurden die Bezeichnungen der Modulpositionen geändert. Hieß es zuvor noch top, left, right, bottom usw., werden nun position-1 bis position-14 (oder weniger/höher) verwendet. Dies soll eine generische Handhabe fördern. Leider ist mit dem Release keine Standardisierung, bzw. offizielle Empfehlung nach dem Motto position-1 = top, position-5 = left einhergegangen, um eine möglichst konsistente Bezeichnung in allen künftigen Templates zu erreichen.
Auch blieb mir die Logik in den Beez2- und Beez5-Templates verborgen . Es fing nachvollziehbar ungefähr so an: top= (position)-1, suche= -2, breadcrumb = -3, doch dann wurden in der rechten Spalte -4, -5- und -6 vergeben, links war es aber -12.
Da auch in Joomla! 2.5 / 1.7 die Namen der Modulpositionen wie bisher frei erfunden werden können, bleibe ich in diesem Tutorial bei dem leicht zu merkenden Schema: top, left, right usw.
-
Ich werde später in der linken (DIV Container #insidebar1) und rechten Spalte (DIV Container #insidebar2) die Modulpositionen „left“, bzw. „right“ eintragen. Werden auf der Website links oder rechts keine Module veröffentlicht, soll die oder sollen beide Spalten ausgeblendet werden und der mittlere Bereich sich entsprechend ausdehnen. Der PHP-Code muss dafür wie folgt erweitert werden (Zeilen 5, 6 und 7):
Damit wird abgefragt, ob links oder/und rechts Module veröffentlicht sind. Je nach Ergebnis erhält die Variable $contentwidth den Wert 580, 770 oder 960. (Ich werde euch im weiteren Verlauf noch erklären, was es damit auf sich hat).
-
Wir könnten schon Doctype HTML (für HTML5) oder auch ein anderes eintragen, aber in diesem Tutorial verwenden wir XHTML1 transitional (Zeile 9). Der Code der Zeile 10 fragt nach der (Joomla) Standardsprache und der Schreibrichtung. Mit dem <html am Anfang wird der HTML-Bereich gestartet.
-
Wir ersetzen den alten Inhalt zwischen den head-Tags mit diesem (Zeilen 12 bis 26)
<jdoc:include type=“head“ /> (Zeile 12) gehört in jedes Joomla Template und lädt Dinge wie Metadaten oder RSS-Feed in dieSeite.
Die Zeilen 13 bis 18 verlinken zu den CSS-Dateien.
Zeile 19-21 und 22-24 sind Browserweichen, die abfragen, ob ein Internet Explorer kleiner oder gleich IE 7, bzw IE6 auf die Webseite zugreift. Falls ja, wird die speziell dafür angefertigte CSS-Datei aufgerufen.
-
Schauen wir uns nun noch an, wie wir Javascript in den head-Bereich einfügen, oder besser gesagt, verlinken können (Zeile 25). In der muster.html war die Datei equalcolumns.js bereits vorhanden. Sie sorgt dafür, dass linker, rechter und mittlerer Bereich immer dieselbe Höhe haben.
Damit sind unsere Arbeiten im head-Bereich abgeschlossen und wir können uns dem body-Bereich widmen. Doch zuvor schauen wir uns auf dem folgenden Screenshot noch einmal den kompletten ersten Teil der index.php an.
-
In den Bodybereich können wir Module sowie den Seitennamen einbinden und den Komponenten einen Platz zuweisen. Das Aussehen der Joomla!-Module wird mit dem style Attribut beeinflusst. Um mehr darüber zu erfahren, lesen Sie bitte diesen Artikel der deutschen Joomla! Wiki. Für unser Tutorial verwenden wir style=“xhtml“.
Die Syntax zum Einbinden von Modulen sieht so aus: <jdoc:include type=“module“ name=“wasauchimmer“ style=“xhtml“ />, name (name=“denkenSiesichwasaus“) kann frei benannt werden, hier setzt nur die Phantasie die Grenzen. Mit dem type=“module“ bindet man ein einzelnes Modul ein (z.B. das Modul „Search“), das unter der Position veröffentlicht ist, die unter „name“ angegeben ist. Mit type=“modules“ können mehrere Module angezeigt werden. Das Modul „Breadcrumbs“ braucht allerdings ein type=“modules“. Warum das nicht mit „module“ funktioniert, ist absolut nicht klar, siehe auch hier.
Es empfiehlt sich ferner, jedes eingebundene module(s) in einen DIV-Container mit eigener CSS-Class, bzw. CSS-ID zu packen. Dies ist beim späteren Design äußerst hilfreich. Um Sie nicht mit zu viel Code unnötig zu verwirren, habe ich das nur einmal exemplarisch für modules Position top exerziert.
-
Im DIV-Container #header fügen wir als Erstes ein Logo, das auf die Homepage verlinkt, ein. Es hat die Größe Breite 110px und Höhe 70px. Wenn Sie das Bild durch ein höheres austauschen, denken Sie bitte daran, die Höhe des Containers #header entsprechend anzupassen, die jetzt 80px beträgt.
Außerdem binden wir „modules“ position=“top“ ein (Zeile 34) und betten es in einen DIV-Container (Zeilen 33 + 35). Damit ich es später leichter zuordnen kann, gebe ich dem DIV die ID „top“ – ich könnte es auch „blablablub“ nennen, das bleibt jedem selbst überlassen.
Der Modul-Position top (Zeile 34) können Sie später als Administrator zum Beispiel ein horizontales Menü-, ein Bildershow- und/oder ein Newsticker-Modul zuweisen.
In den DIV-Container #breadcrumb möchte ich später die Module Breadcrumbs und Suchen (Search veröffentlichen) (Zeilen 39 und 40).
-
Fügen wir zuerst in die linke Spalte (#sidebar1) ein modules (Zeile 46) ein. Dies geschieht idealerweise mit einer if-Abfrage (Zeile 43), die übrigens immer mit einem endif (Zeile 49) enden muss, ansonsten erhaltet ihr eine weiße Seite. Die folgende Syntax bedeutet: (Nur) wenn etwas auf modules „left“ veröffentlicht wurde, dann zeige den Container #sidebar1 und seinen Inhalt, mitsamt modules „left“.
-
Im Abschnitt Linke oder/und rechte Spalte ausblenden hatten wir bereits die Vorarbeit geleistet und definiert, welchen Wert die Variable $contentwidth erhalten soll, wenn Spalten angezeigt werden oder eben nicht. Diesen Wert übermitteln wir im Folgenden an den DIV-Container #content (Zeile 50). Wir erinnern uns, das war entweder 960, 770 oder 580.
Sie haben es sicher schon herausgefunden.
<div id="content" class="col_<?php echo $contentwidth; ?>">
bedeutet <div id=“content“ class=“col_wert der Variable“>.Wenn die Spalten links und rechts angezeigt werden, wird somit daraus ein <div id=“content“ class=“col_580″>. Wenn eine Spalte ausgeblendet ist, bekommt der DIV-Container #content die CSS-Klasse col_770 (class=“col_770″) und wenn beide fehlen, die CSS-Klasse col_960.
Ihr müsst jetzt nur noch in der template.css folgende CSS-Anweisungen geben:
#content.col_960 { width:960px; }
#content.col_770 { width:770px; }
#content.col_580 { width:580px; }Ist doch eigentlich ziemlich einfach, wenn man es weiß, oder?
Kommen wir nun zu den drei include Anweisungen der Zeilen 52 bis 54.
<jdoc:include type=“message“ /> (Zeile 52) gibt Systemmeldungen wieder. „Sie haben sich erfolgreich angemeldet“ ist zum Beispiel eine.
<jdoc:include type=“modules“ name=“debug“ /> (Zeile 53) Wird im Joomla-Backend Kontrollzentrum unter Konfiguration der Debug-Modus eingeschaltet, erscheint an dieser Stelle die Ausgabe.
<jdoc:include type=“component“ /> (Zeile 54) Wie der Name vermuten lässt, werden damit die Komponenten eingebunden, zum Beispiel com_content, das die Artikel wiedergibt oder com_contact, die Kontakt-Komponente usf.
-
Die rechte Spalte erhält, ebenso wie die linke Spalte zuvor, eine if-Abfrage und ist weitestgehend identisch, nur dass wir statt modules left ein modules right einbinden.
-
Hier möchte ich gerne einen Copyright-Hinweis eintragen, der alljährlich die Jahreszahl aktualisiert. Der folgende Eintrag (Zeile 68) ergibt © 2008 – 2011 Name der Website.
Damit wäre unsere index.php fertig und wir erstellen gleich die Installationsdatei templateDetails.xml. Zuvor aber noch ein abschließender Blick auf den kompletten zweiten Teil der index.php
templateDetails.xml
Die Datei ist exakt unter diesem Namen mitsamt dem groß geschriebenen Buchstaben D zu speichern. Sie ist für die Installation des Templates notwendig.
-
Mit den ersten drei Zeilen deklarieren wir das Template. Der install-Tag (Zeile 3) wird ganz am Ende der XML-Datei wieder geschlossen.
In die vierte Zeile wird der Name des Templates eingetragen, der genauso lautet wie der Ordner. Es dürfen keine Leer- oder Sonderzeichen verwendet werden. In unserem Tutorial-Beispiel wird hier also das Wort muster eingetragen.
Joomla! 1.7
Seit Joomla! 1.7 sollte die Anweisung „install“ nicht mehr genutzt werden. Zwar funktioniert in der jetzigen Alpha-Version der Befehl „install“ immer noch, dennoch ist es nur ein Frage der Zeit, bis er durch „extension“ ersetzt wird. Außerdem sollte nun unter version statt „1.6“ die „1.7“ eingesetzt werden. Siehe Screenshot:
Joomla! 2.5
Version wird auf 2.5 gesetzt. „client=site“ wurde auch schon in Joomla! 1.7 (final) eingesetzt.
-
In die nachfolgenden Zeilen (Zeilen 5 bis 11) gehören informative Angaben. Ich denke, sie sind selbsterklärend. Das Datumsformat ist frei wählbar, statt 17. Februar 2011 könnte dort genauso gut 2011-17-02 stehen. Hinweis: Mit < version > < / version> ist die Template-Version gemeint.
-
Hierhin gehört eine kurze Beschreibung über das Template, die ihr nachher im Joomla-Backend, in der Template-Auflistung wiederfindet. Es kann auch ein Sprachstring eingetragen werden, der in der Sprachdatei (de-DE.tpl_templatename.ini) „übersetzt“ wird.
Kleiner Tipp: Schauen Sie sich auch einmal die Datei de-DE.tpl_templatename.sys.ini an. Neben den Positionen habe ich kurze Hinweise geschrieben, die im Joomla!-Backend unter Erweiterungen -> Module -> (ein Modul auswählen) -> „Position auswählen“ sichtbar werden.
-
Im nächsten Schritt werden alle Ordner mit folder (Zeilen 13 bis 18) und die Dateien des muster-Hauptverzeichnisses mit filename (Zeilen 19 bis 27) aufgelistet und mit dem tag „files“ (Zeilen 12 und 28) umschlossen, damit Joomla weiß, was installiert werden soll.
Diese Dateien und Ordner müssen sich auch tatsächlich im Installationspaket befinden, ansonsten gibt es nur eine Fehlermeldung.
-
Mit dem tag <languages folder=“languages“> (Zeile 29) und dem endtag < /languages> (Zeile 34) teilen wir Joomla mit, welche Sprachdateien (Zeilen 30 bis 33) installiert werden. Ersetzt hier das „templatename“ mit dem Namen des Templates. Im Übungstemplate wird also aus de-DE/de-DE.tpl_templatename.ini -> de-DE/de-DE_tpl_muster.ini.
-
In den Zeilen 36 bis 40 werden noch einmal alle Modul-Positionen gelistet, die wir bereits in der index.php angelegt hatten. Wenn Sie später weitere Modulpositionen hinzufügen wollen, müssen Sie das in der index.php und in der templateDetails.xml eintragen. Zeile 35 und 41 zeigen Anfangs- und End-Tag , die vonnöten sind, um Positionen in die XML-Datei einzubinden.
Die templateDetails.xml wird mit dem install Tag (Zeile 42) geschlossen.
Unsere XML-Datei ist damit auch fertig. Nach positions und vor dem abschließenden install-tag (bzw. Joomla! 1.7 „extensions“-tag), könnten noch Parameter eingetragen werden. Diese ermöglichen diverse optionale Dinge, zum Beispiel verschiedene CSS-Variationen.
Joomla! 1.7 / 2.5
Seit Joomla! 1.7 wird die Anweisung „install“ nicht mehr unterstützt. Zwar funktioniert in der jetzigen Alpha-Version der Befehl „install“ immer noch, dennoch ist es nur ein Frage der Zeit, bis er durch „extension“ ersetzt wird. Siehe Screenshot:
Doch das geht über die Erstellung eines einfachen Templates hinaus und ist nicht Gegenstand dieses Tutorials. Im übernächsten Kapitel „Upgrade“ werden aber zumindest die Unterschiede der Parameter-Syntax von Joomla! 1.5 und 2.5 aufgeführt.
-
Zip-Datei
-
Im vorigen Kapitel haben wir den Ordner muster mitsamt seinen Unterordnern „css“, „fonts“, „hmtl“, „images“, „js“ und „languages“ erstellt und in jeden einzelnen eine index.html abgelegt. Die Dateien template.css, equalcolumns.js, die fonts sowie Sprachdateien wurden ebenfalls in die richtigen Verzeichnisse gespeichert. Darüberhinaus wurden zusätzliche CSS-Dateien, PHP-Dateien (z.B. component.php) etc. an die richtigen Stellen gebracht. Alle in der templateDetails.xml-Datei unter filename aufgeführten Dateien (Zeilen 19 bis 27) befinden sich im Verzeichnis „muster“.
(Wer jetzt ein wenig ins Straucheln gerät, kann zur Kontrolle noch einmal das erste Kapitel „Struktur“ zu Rate ziehen oder einen Blick in das ZIP-Archiv des fertigen Templates „muster“ werfen.)
Vor der Installation: Datenbank-Sicherung erstellen
Wie immer, wenn etwas neu installiert wird, sollte zuvor eine Datenbank-Sicherung gemacht werden.
Zip-Archiv erstellen
Wir besorgen uns ein gutes Packprogramm, zum Beispiel 7-Zip, und packen sämtliche Ordner und Dateien des Verzeichnisses „muster“ zu einem Archiv „muster.zip.
Wir packen nicht den Ordner „muster“ selbst! Also: Kein Rechtsklick auf den Ordner „muster“ und „7-Zip“-> „Zu einem Archiv hinzfügen“; sondern den Ordner „muster“ öffnen, sämtliche Unterordner und Dateien markieren, Rechtsklick -> „7-Zip“-> „Zu einem Archiv hinzfügen“ -> ins Feld „Archiv“ -> „muster.zip“ schreiben und Klick auf „OK“. Diese Datei (muster.zip) können wir nun über das Joomla!-Backend installieren.
Template muster einrichten
Unter Erweiterungen -> Templates -> (Kartenreiter Styles) wählen wir „Template muster“ aus und klicken auf „Standard“. Ein Blick auf das Frontend zeigt uns, dass die rechte und linke Spalte nicht zu sehen sind. Das ist perfekt, denn ihnen wurden ja noch keine Module zugewiesen.
Das ändern wir schnell, unter Erweiterungen -> Module -> (Modul auswählen, z.B. Login) -> „Position wählen“ -> „left“. Wir geben das Modul frei (veröffentlichen) und vergewissern uns weiter unten, dass unser Modul Login unter „Menüzuweisung“ -> „Modulzuweisung“, bzw. „Menü Auswahl“ mindestens einer Seite zugewiesen wurde. Für unseren Testlauf wählen wir unter „Modulzuweisung“ -> „Auf allen Seiten“. Im Frontend sollte jetzt (evtl. vorher Caches leeren) die linke Spalte mitsamt dem Login erscheinen.
Für die rechte Spalte wiederholt einfach das Procedere mit einem Modul eurer Wahl. Jetzt könnein Sie anfangen, Ihr Joomla!-Template Ihrem Geschmack entsprechend zu verändern, in dem Sie die CSS-Datei bearbeiten. Ein gutes Werkzeug ist das Firefox Add-on firebug. Viel Spaß dabei!
Wer ein Joomla! 1.5-Template in Joomla! 2.5 / 1.7 nutzen will, findet im nächsten Kapitel „Upgrade“ die erforderlichen Anpassungen.
Falls die Installation des Joomla! 2.5 / 1.7-Templates oder dessen Einrichtung fehlschlug, hilft ein Blick ins letzte Kapitel „Probleme“ vielleicht weiter.
Upgrade
Wer sein altes Joomla! 1.5-Template auch in Joomla“ 2.5 / 1.7 einsetzen möchte, muss nur ein paar wenige Dinge ändern. Nachfolgend wird in der Regel (falls vorhanden) zuerst die alte Anweisung aufgeführt (Joomla! 1.5) und direkt darunter die neue, vorzunehmende Änderung.
-
alt:
defined( '_JEXEC' ) or die( 'Restricted access' );
neu:
defined( '_JEXEC' ) or die;
Neu eintragen:
$app = JFactory::getApplication();
alt:
$mainframe->getCfg( 'live_site' );
neu:
$app->getCfg( 'live_site' );
-
alt:
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
neu:
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
alt:
<install version="1.5" type="template">
neu 1.7:
<extension version="1.7" type="template" client="site">
neu 2.5:
<extension version="2.5" type="template" client="site">
Wichtig: Das abschließende </install> (am Ende der templateDetails.xml) muss dann auch mit einem </extension> ersetzt werden!
alt (Parameter):
neu (Parameter):
Mehr zum Thema Parameter finden Sie hier.
-
alt:
.blog_more
neu:
.items-more
alt:
.article_separator
neu:
.item-separator
alt (Menü Current(Aktueller) Listenpunkt):
#current
neu
.current
Neu hinzugekommen (2.5 – Komponente Smart Search):
#finder-search {} form .finder label {} dl.search-results dd.result-url {} .finder .inputbox {} #header form .finder {}
Neu hinzugekommen (2.5 – Intro- und Artikelbilder):
.img-fulltext-left {} .img-intro-left {} .img-fulltext-right {} .img-intro-right {}
Außerdem wurde folgendes geändert und muss neu gestylt werden:
Die Druck-, PDF-, und E-Mail-Buttons sind jetzt in einer unsortierten Liste (ul.actions).
Die Kategorie-Tabellen-Ansicht (Category table view) ist nun ebenfalls eine unsortierte Liste. Mit firebug findet ihr schnell heraus, was genau anzupassen ist. -
Falls in Joomla! 1.5 Template Overrides erstellt wurden, müssen diese mit den neuen Dateien von Joomla! 2.5 / 1.7 verglichen und eventuell angepasst werden. In beiden Joomla Versionen werden die Override-Dateien im Ordner „html“ abgelegt.
-
alt:
$this->error->code;
neu:
$this->error->getCode();
alt:
$this->error->message;
neu:
$this->error->getMessage();
Neu hinzugekommen: Zeilen 14-17:
//get language and direction $doc = JFactory::getDocument(); $this->language = $doc->language; $this->direction = $doc->direction;
Neu hinzugekommen: Zeilen 24-26:
<?php if ($this->direction == 'rtl') : ?> <link rel="stylesheet" href="/<?php echo $this->baseurl; ?>/templates/system/css/error_rtl.css" type="text/css" /> <?php endif; ?>
-
Neu in Joomla! 2.5 / 1.7 ist, dass nun auch System-Sprachdateien eingebettet werden. Es reicht für den Anfang, eine leere de-DE.tpl_namedestemplates.sys.ini im Ordner „languages“ zu speichern. Muss auch in die templateDetails.xml eingetragen werden:
-
Die Datei offline.php (Verzeichnis /templates/system) wurde in einer Zeile geändert. Interessant ist das für alle, die eine eigene offline.php in ihr Template eingebaut haben und damit die offline.php des System-Ordners überschreiben. Folgende Zeile wurde in Joomla! 1.7 geändert:
Zeile 32 alt:
<form action="index.php" method="post" name="login" id="form-login">
Zeile 32 neu:
<form action="<?php echo JRoute::_('index.php', true); ?>" method="post" id="form-login">
Außerdem wurde in 2.5 die Möglichkeit hinzugefügt, ein eigenes Bild auf der Offline-Seite anzuzeigen. Folgende Zeile wurde in Joomla 2.5 geändert:
Zeilen 25 alt:
<img src="/images/joomla_logo_black.jpg" alt="Joomla! Logo" />
Zeile 24 + 25 neu:
<?php if ($app->getCfg('offline_image')) : ?> <img src="/<?php echo $app->getCfg('offline_image'); ?>" alt="<?php echo $app->getCfg('sitename'); ?>" /> <?php endif; ?>
Joomla! 2.5
Die gute Nachricht vorneweg: Joomla 1.7 Templates funktionieren zum größten Teil auch noch in Joomla! 2.5.
Dennoch gibt es Änderungen, die man bei einer Neu-Installation und um sein Template für künftige Joomla! 2.5 Versionen lauffähig zu halten, beachten sollte.
-
In der Datei templateDetails.xml sollte die Version nun von „1.7“ auf „2.5“ angepasst werden.
-
Neu hinzugekommen (2.5 – Komponente Smart Search):
#finder-search {} form .finder label {} dl.search-results dd.result-url {} .finder .inputbox {} #header form .finder {}
Neu hinzugekommen (2.5 – Intro- und Artikelbilder):
.img-fulltext-left {} .img-intro-left {} .img-fulltext-right {} .img-intro-right {}
-
Die nächste Änderung betrifft die Datei system.css im Ordner templates/system/css. Die Stylesheet-Anweisung für den Debug-Modus wurde entfernt.
-
Im Ordner templates/system befindet sich die Datei offline.php. Hier wurde die Möglichkeit hinzugefügt, ein eigenes Bild auf der Offline-Seite anzuzeigen. Folgende Zeile wurde in Joomla! 2.5 geändert.
Zeile 25 alt:
<img src="/images/joomla_logo_black.jpg" alt="Joomla! Logo" />
Zeile 24 + 25 neu:
<?php if ($app->getCfg('offline_image')) : ?> <img src="/<?php echo $app->getCfg('offline_image'); ?>" alt="<?php echo $app->getCfg('sitename'); ?>" /> <?php endif; ?>
-
Falls im Joomla! 1.7 Template Overrides erstellt wurden, müssen diese mit den neuen Dateien von Joomla! 2.5 verglichen und eventuell angepasst werden. In beiden Joomla! Versionen werden die Override-Dateien im Ordner „html“ abgelegt.
Probleme
-
Die Installation schlägt fehl
- In Joomla! 1.5 konnte ein Template installiert werden, indem man es einfach per FTP auf den Server geladen hat. Das ist in Joomla! 2.5 / 1.7 nicht mehr möglich, da Templates jetzt auch in der Datenbank eingetragen werden. Und dieser DB-Eintrag wird beim puren Upload nicht erzeugt. Joomla! 2.5 / 1.7 Templates müssen also zwingend über das Joomla!-Backend installiert werden.
- Sind alle Dateien und Ordner, die in der templateDetails.xml unter <files> aufgelistet wurden, tatsächlich im Installationspaket?
- Wurden alle Dateien und Ordner richtig benannt? (z.B. muss der Großbuchstabe D in der templateDetails.xml bleiben)
- Wurde das Archiv richtig gepackt? (siehe Kapitel Zip-Datei)
- Seit Joomla! 1.7: Statt <install></install> gehört nun in die templateDetails.xml <extension></extension> hinein
- Joomla! 1.7: Wurde in der templateDetails.xml die richtige Versionsnummer eingetragen? („1.7“ statt „1.6“)
- Joomla! 2.5: Wurde in der templateDetails.xml die richtige Versionsnummer eingetragen? („2.5“ statt „1.7“)
Nach Aktivierung des Templates kommt eine weiße Seite
Das kann nur vorkommen, wenn in einer der PHP-Dateien manuell Fehler gemacht wurden. Zum Beispiel wenn eine if-Abfrage nicht mit endif beendet wurde. Wie geraten, habt ihr ja vor der Installation eine Datenbank-Sicherung erstellt. Mit dem Einspielen dieses Backups wird die fehlerhafte Installation rückgängig gemacht. Zusätzlich muss per FTP der Ordner des fehlerhaft installierten Templates gelöscht werden.
Das Einrichten bereitet Probleme
Module müssen wie bisher Modulpositionen zugewiesen werden. Das Interface hat sich geändert. Meistens werden Module trotz Veröffentlichung oder wie es nun in Joomla! 2.5 / 1.7 heißt, obwohl sie „freigegeben“ wurden, nicht angezeigt, weil vergessen wurde, unter „Menüzuweisung“ die Seiten auszuwählen, auf denen das Modul gezeigt werden soll. Testet hier einfach mal die Option „Auf allen Seiten“, um andere Fehler auszuschließen.