Neue Tutorial-Reihe: Online-Daten und -Dateien sichern und wiederherstellen. Leicht nachvollziebar für Jedermann.
Tutorials: Lokale Testumgebung einrichten und die neuesten Entwicklerversionen herunterladen. Unterschiedliche Versionen ausprobieren.
Tipp: Von Version 3.0.0 bis 3.1.5 inkl. haben 62 neue Features in Joomla! 3.x Einzug gehalten. Einen detaillierten sowie bebilderten Überblick darüber verschafft dieser Artikel.
Tipp: Bislang haben über 40 neue Features in Joomla! 2.5 Einzug gehalten. Einen detaillierten sowie bebilderten Überblick darüber verschafft dieser Artikel.
Tipp: Nicht genügend Speicherplatz auf der Windows Partition vorhanden? Nicht verzweifeln, dafür gibt es ein Tool, das selbst bei hartnäckigen Fällen hilft.
Grundlagen -Tutorial: Bilder und Dateigrößen verkleinern, das richtige Dateiformat wählen,- dpi, ppi und coole Tools kennenlernen.
Ausführliches Tutorial über das Joomla!-Rechtemanagement: Grundprinzipien verstehen, inkl. eines Fallbeispiels (Redaktion). BONUS: Auch als Download verfügbar!
Ein Firefox Add-on, das nichts vergessen lässt. Termine und Aufgaben in den Griff bekommen. Auch als Thunderbird Add-on!
Review: Links das Original, rechts die komprimierte Version, ein paar Mausklicks und fertig ist das Bild fürs Internet!
Tutorial: Wie man ein Template von Joomla! 1.5 auf Joomla! 2.5 upgradet oder ein neues erstellt. BONUS: Mustertemplate zum Download!
Ein wahres Juwel für jeden Webdesigner. Und es steckt mehr unter der Haube, als man anfangs denkt
 
Montag, 22. Dezember 2014

Joomla 2.5 + 1.7 Template erstellen oder upgraden - Tutorial Joomla 2.5 + 1.7 Template erstellen oder upgraden - Tutorial Empfohlen Hot

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önnt ihr 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 findet ihr am Ende des Artikels zum Download.

Struktur

Die Übungsunterlagen zum Tutorial stehen am Ende des Artikels zum Download zur Verfügung.

Alle Joomla 2.5 / 1.7 Templates müssen über das Joomla Backend -> Erweiterungen -> Erweiterungen (auf Englisch "Extension Manager") installiert werden.Das Uploaden 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 deiner 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/

Ordner und Dateien eines Templates

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)
  • images (Ordner für alle Gestaltungsbilder des Templates)
    • system (Ordner für Systembilder, z.B PDF, Druck, E-Mail-Icons)
      • index.html
    • index.html
  • 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
  • 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

Wie unschwer zu erkennen ist, sind für ein einfaches Joomla 2.5 / 1.7-Template zwingend die Dateien (rot): template.css (Ordner css), index.html, index.php und templateDetails.xml sowie der Ordner "images" erforderlich.

Die empfohlenen Dateien (grün) dienen bestimmten Zwecken (Vorschau im Backend, bzw. der Wiedererkennung in Bookmarks). Wer das Design des Templates mit Grafiken (z.B. Buttons, Hintergründe) verschönert – was in der Regel der Fall ist – sollte diese in dem Ordner "images" speichern.

Generell empfiehlt es sich, die geläufigen Strukturen, wie oben gelistet, beizubehalten. So könnten zum Beispiel die Ordnernamen "css", "js" und "images" frei umbenannt werden, doch zumindest für "css" und "images" sind dies gängige Namen, statt "js" wird häufig auch "javascript" genommen. Ebenso ist das Ablegen der entsprechenden Dateien in diese Ordner oder generell in Ordner nicht zwingend, aber die Praxis lehrt schnell, dass dies die Übersichtlichkeit enorm erhöht. Zu guter Letzt: auch die Datei template.css könnte umbenannt werden.

Optional

Optionale PHP-Dateien, samt dazugehörigem CSS

Schauen wir uns als Erstes component.php, error.php und offline.php an.

Dateien aus dem Systemordner kopieren

Diese drei 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 euch 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.

component.php und print.css

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 die muss jedoch noch im Bereich <head> </head> der component.php verlinkt werden, und zwar mit:

<link rel="stylesheet" href="/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/print.css" />

error.php und error.css

Falls ihr genug von den Standard-Fehlerseiten "error 404" habt, könnt ihr hierüber individuelle Mitteilungen für eure User erstellen.

Joomla 1.7

Achtung! Die error.php von Joomla 1.7 wurde gegenüber der Joomla 1.6 Version verändert. (s. Kartenreiter Joomla 1.7)

offline.php und offline.css

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).

editor.css

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.

ieonly.css, ie6.css und co

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).

template.css.php

Ist im Grunde dasselbe wie die template.css, jedoch mit PHP-Anweisungen erweitert. Durch diese kann die Datei bei Aufruf komprimiert und gecached werden.

template_rtl.css

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"):

Eigene Schriften benutzen

@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

Sprachdateien für das Template

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.ini

Die 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 euch den kostenlosen Texteditor Notepad++ (nicht mit dem Windows Notepad verwechseln!). Ihr könnt 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 ihr kopiert euch die index.html aus dem Beez-Template, oder ihr erstellt 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 ihr den eigenen Bedürfnissen entsprechend bearbeiten müsst.

 

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.

HTML-Gerüst Übungsdatei

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 euch 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.

HTML Geruest des Mustertemplates

 

Quellcode der Muster-HTML-Datei

Der Quellcode der muster.html sieht so aus, der ausgegraute Text stellt Kommentare dar, die darüber informieren, welches DIV-Tag an dieser Stelle geschlossen wird:

Der reine Quelltext der muster.html

 

Kopfbereich index.php: PHP-Anweisungen

Wir öffnen die muster.html in einem Texteditor (zum Beispiel Notepad++). Ganz an den Anfang fügen wir ein paar PHP-Anweisungen ein

Die ersten Zeilen der index.php

 

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

Namen der Modulpositionen

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.

Linke oder/und rechte Spalte ausblenden

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):

Module auszählen

 

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).

Doctype

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.

Doctype

 

head – Bereich: CSS-Dateien und Browserweiche

Wir ersetzen den alten Inhalt zwischen den head-Tags mit diesem (Zeilen 12 bis 26)

head-Bereich der index.php

 

<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.

head-Bereich: Javascript einbinden

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.

Javascript einbinden

 

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.

Erster Teil der index.php

Teil 1
 

body-Bereich

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, lest 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="denkteuchwasaus") 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 euch nicht mit zu viel Code unnötig zu verwirren, habe ich das nur einmal exemplarisch für modules Position top exerziert.

body-Bereich: #header und #breadcrumb

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 ihr das Bild durch ein höheres austauscht, denkt 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önnt ihr später als Administrator zum Beispiel ein horizontales Menü-, ein Bildershow- und/oder ein Newsticker-Modul zuweisen.

Der top Bereich

 

In den DIV-Container #breadcrumb möchte ich später die Module Breadcrumbs und Suchen (Search veröffentlichen) (Zeilen 39 und 40).

Breadcrumb

 

body-Bereich: #sidebar1

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".

Linke Spalte

 

body-Bereich: #content

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.

Mittlere Spalte

 
Ihr habt 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.

body-Bereich #sidebar2

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.

Rechte Spalte

 

Zweiter und letzter Teil der index.php

Zweiter 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.

templateDetails.xml: Kopfbereich – Deklaration

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:

install wird mit extension ersetzt

 

Joomla 2.5

Versioin wird auf 2.5 gesetzt. "client=site" wurde auch schon in Joomla 1.7 (final) eingesetzt.

xmlinfos25

 

templateDetails.xml: Kopfbereich – Informationen

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 (Danke an den aufmerksamen S-L Leser Castor, für seinen Hinweis, dass dies zu Missverständnissen führen könnte).

Hier Informationen eintragen

 
 

templateDetails.xml: Beschreibung

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: Schaut euch 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.

Beschreibung

 

templateDetails.xml: files

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.

Dateien und Ordner eintragen

 

templateDetails.xml: Sprachen

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.

Sprachdateien eintragen

 

templateDetails.xml: Positionen

In den Zeilen 36 bis 40 werden noch einmal alle Modul-Positionen gelistet, die wir bereits in der index.php angelegt hatten. Wenn ihr später weitere Modulpositionen hinzufügen wollt, müsst ihr 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.

Modulpositionen

 

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:

abschließender install-tag wird mit extension ersetzt

 

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.

templateDetails.xml: Komplette Datei

Schauen wir uns zum Schluss unsere komplette templateDetails.xml-Datei an

Joomla 1.7

install wird durch extension ersetzt


Joomla 2.5

xmlkomplett_25

 

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önnt ihr anfangen, euer Joomla-Template eurem Geschmack entsprechend zu verändern, in dem ihr die CSS-Datei bearbeitet. 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.

Datei index.php

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' );

Datei templateDetails.xml

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):

Parameter Joomla 1.5

neu (Parameter):

Parameter Joomla 1.6

Mehr zum Thema Parameter findet ihr hier.

Datei template.css

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.

Ordner "html" (Overrides)

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.

 

Datei error.php

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; ?>

Sprachdateien

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:

Sprachdateien

 

Datei offline.php

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:

Zeilen 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.

Datei templateDetails.xml: "2.5" statt "1.7"

In der Datei templateDetails.xml  sollte die Version nun von "1.7" auf "2.5" angepasst werden.

xmlinfos25

 

Datei template.css

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 {}

Datei system.css

Die nächste Änderung betrifft die Datei system.css im Ordner templates/system/css. Die Stylesheet-Anweisung für den Debug-Modus wurde entfernt.

Datei offline.php

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:

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; ?>

Ordner "html" (Overrides)

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.

Anhänge:
Zugriff auf URL (http://software-lupe.de/attachments/tutorial_vorlagen_joomla25.zip)Mustertemplate zum Download[Übungsunterlagen für Joomla 2.5 ]

eyecatcher

Eigenwerbung

288
Artikel (Reviews, Tutorials, Tipps, News)
41 Rezensionen