Das Content Management System (CMS) Joomla ist eine beliebte Software, um Firmenwebsites, Blogs oder private Seiten zu erstellen. Sie lässt sich einfach installieren, bietet eine übersichtliche Verwaltung der Inhalte und bringt von Haus aus bereits viele Plugins und Templates mit. Dennoch kann es sinnvoll sein, ein eigenes Template zu entwerfen, beispielsweise dann, wenn die Website zum einheitlichen Erscheinungsbild einer Firma oder einer Organisation passen soll. Wir erklären Ihnen Schritt für Schritt, wie Sie Ihr individuelles Template kreieren.
Tipp: Keine Lust zu lesen? Dann starten Sie doch einfach kostenlos unser Joomla!-Tutorial.

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

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

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.

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

<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

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.

Sie haben einen Bildungsgutschein?
Erfolgreiche Online-Weiterbildung inkl. Prüfung & Zertifikat

Themen: Projektmanagement (PRINCE2®, Six Sigma), Bilanzbuchhalter, Online Marketing Manager uvm.
Jetzt mehr erfahren & Beratung anfordern!
Nein, danke!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *