Loading...
Bild: “250/365 – Bricks” von Kenny Louie. Lizenz: CC BY 2.0
1. Die Vorbereitung
Das CMS Joomla enthält inzwischen eine Vielzahl interessanter und quelloffener Templates. Durch die Veränderung der wichtigsten Dateien passen Sie die Software Ihren eigenen Bedürfnissen an.
Warum Sie dann ein eigenes Template schreiben sollten? Beim Umschreiben eines fertigen Templates bleiben eventuell Codes übrig, die die eigene Website langsamer machen oder das eigene Design stören.
Beim Aufbau eines eigenen Layouts von „der Pieke auf“ erhalten Sie hingegen genau die Funktionen, die Sie auch wollen. Dafür benötigen Sie Grundkenntnisse in HTML, PHP und CSS. Des Weiteren sollte Joomla bereits auf einem Webserver oder einer lokalen Laufzeitumgebung, beispielsweise mit Xampp, installiert sein. Dann können Sie die erstellten Dateien testen und eventuelle Fehler gleich zu Beginn ausmerzen.
Außerdem brauchen Sie ein Zeichenprogramm, mit dem Sie den Entwurf Ihres Designs visualisieren, und einen Texteditor, beispielsweise Aptana Studio oder Notepad++ mit vielen hilfreichen und nützlichen Funktionen. Auch der einfache Editor in Windows erfüllt hier seinen Zweck. Um Ihr Template ausreichend zu testen, installieren Sie die gängigsten Webbrowser. Dann sehen Sie Ihre Website so, wie die späteren Besucher.
2. Der Entwurf
Beispiel für einen Layout-Entwurf
Verfügen Sie bereits über ein Corporate Design, haben Sie es einfach: Sie nutzen das vorhandene Layout zur Widerspiegelung in Ihrem Template. Sofern das nicht der Fall ist, sind Sie in Ihren Entscheidungen frei. Überlegen Sie sich jedoch, welche Inhalte Sie auf der Website präsentieren wollen.
Denken Sie auch über die Art der Seite nach – wächst Sie stetig oder bleibt sie eher statisch? Das ist ein entscheidender Aspekt im Hinblick auf die Gestaltung der Navigationselemente in Ihrem Template. Zum jetzigen Zeitpunkt spielen Farben und Schriftstile noch keine Rolle. Die passen Sie hinterher über die CSS-Datei problemlos an.
Falls Sie Ihren Entwurf in Adobe Photoshop erzeugen, nutzen Sie beim Anlegen der CSS die Funktion „Ebene ‑ CSS kopieren“, denn das erspart Ihnen etwas Schreibarbeit.
3. Das Anlegen der wichtigsten Dateien für ein Template
Alle wichtigen Dateien für ein Template liegen in einem gemeinsamen Ordner
Im nächsten Schritt richten Sie einen Ordner mit dem Namen Ihres Templates und die Unterordner „css“ und „images“ ein. Wählen Sie für Ihr Template einen eindeutigen Namen in Kleinbuchstaben ohne Sonderzeichen oder Umlaute. Öffnen Sie dann den Texteditor und erstellen Sie drei leere Dateien, die Sie als index.php, templateDetails.xml und template.css abspeichern. Damit haben Sie die wichtigsten Dateien angelegt und können mit deren Bearbeitung beginnen.
Die Datei templateDetails.xml beinhaltet wichtige Parameter der Installation, etwa Dateien und Ordner, die Positionsnamen der Module, den Template Namen und den Namen des Autors sowie eine Beschreibung des Designs. Ohne diese Datei funktioniert Joomla nicht. Die Beispieldatei enthält nur die wichtigsten Angaben:
<?xml version=“1.0″ encoding=“utf-8″?>
<!DOCTYPE install PUBLIC „-//Joomla! 3.3//DTD template 1.0//EN“ „http://www.joomla.org/xml/“>
<extension version=“3.3″ type=“template“ method=“upgrade“>
<name>meintemplate</name>
<creationDate>16.02.2013</creationDate>
<author>Mona Musterman</author>
<copyright>Copyright © 2013 Mona Musterman</copyright>
<authorEmail>monamusterman@mustermail.com</authorEmail>
<authorUrl>http://www.monamusterweb.com</authorUrl>
<version>1.0.1</version>
<description>Das ist ein Testtemplate für Joomla</description>
<positions>
<position>position-1</position>
<position>position-2</position>
<position>position-3</position>
</positions>
</extension
Speichern Sie templateDetails.xml und öffnen Sie die Datei index.php im Editor. Bei der index.php für Joomla taucht als Besonderheit der Parameter <jdoc:include /> auf. Sie fügen ihn immer dann ein, wenn Sie einen Platzhalter für Scripts oder Styles benötigen. Mit <jdoc:include type=“head“ /> laden Sie beispielsweise später in Joomla die Metatags, mit <jdoc:include type=“message“ /> geben Sie Fehlermeldungen aus und mit <jdoc:include type=“component“ /> zeigen Sie Inhalte an. Diese Parameter befinden sich innerhalb der <body>-Tags. In der Regel beginnt ein Joomla-Template mit den folgenden Zeilen:
<?php defined( ‚_JEXEC‘ ) or die( ‚Restricted access‘ );?>
<!DOCTYPE html>
<html xmlns=“http://www.w3.org/1999/xhtml“
xml:lang=“<?php echo $this->language; ?>“ lang=“<?php echo $this->language;
?>“ >
Die erste Zeile verhindert das unbefugte Zugreifen auf die Datei. Im nächsten Schritt fügen Sie den Head-Bereich der Seite ein, der die Meta-Informationen und die Verlinkung zu den Stylesheets beinhaltet.
<link rel=“stylesheet“ href=“<?php echo $this->baseurl ?>/templates/system/css/system.css“ type=“text/css“ />
<link rel=“stylesheet“ href=“<?php echo $this->baseurl ?>/templates/system/css/general.css“ type=“text/css“ />
<link rel=“stylesheet“ href=“<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css“ type=“text/css“ />
</head>
Zum Schluss legen Sie noch eine Body Section an, welche die Seitenelemente enthält. Über div-Container definieren Sie die Bereiche Ihres Entwurfs, vergeben eindeutige „IDs“, damit Sie diesen in der Dabei „template.css“ Attribute zuweisen. Außerdem tragen Sie die Modulplatzhalter (jdoc) ein. Dann schließen Sie die Seite mit dem HTML-Tag.
<body>
<div id=“wrapper“>
<div id=“header“></div>
<div id=“content“>
<jdoc:include type=“component“ />
<jdoc:include type=“modules“ name=“right“ />
</div>
<div id=“footer“></div>
</div>
</body>
</html>
Jetzt kommt die Zeit, die Datei template.css mit Inhalten zu füllen, die alle Angaben zum Layout innehat. Sie können diese beispielswiese mit @charset=“utf-8″ für die Zeichenkodierung beginnen. Dann ergänzen Sie die in der index.php-Datei aufgenommenen Bereiche mit den passenden Attributen, wie Farbe, Breite, Größe und Position. Außerdem sollten Sie gegebenenfalls auch die Breite und die Position des kompletten Designs (hier: wrapper) festlegen.
@charset=“utf-8″;html {overflow-y:scroll;}p { clear: both; text-align: justify; font-size: 12px;}
body {
margin: 0;
font-family: „Helvetica Neue“, Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #333;
background-color: #fff;
}
div#wrapper {
width: 1031px;
margin: 20px auto;
}
div#header {
background-color: rgb( 192, 243, 245 );
position: absolute;
left: -5px;
top: 0px;
width: 1031px;
height: 131px;
z-index: 6;
}
…….
4. Die Installation des Templates
Im Dialogfenster „Templates“ aktivieren Sie das neue Template
Erstellen Sie zuerst einen zip-Ordner, beispielsweise mit WinZip. Dann loggen Sie sich in den Administrationsbereich Ihrer Joomla-Installation ein. Dort gehen Sie in der Menüleiste auf „Erweiterungen“. Im sich öffnenden Fenster wählen Sie über „Durchsuchen“ Ihren zip-Ordner aus und bestätigen dann mit „Hochladen und installieren“.
Anschließend öffnen Sie „Erweiterungen“ und „Templates“ und aktivieren hier Ihr neues Template durch Klick auf den Stern hinter dem Dateinamen.
Schreiben Sie einen Kommentar