Joomla Templates erstellen

Joomla Templates erstellen auf Basis von HTML5 und CSS3

Wer das CMS Joomla zur Basis seiner Webanwendung macht, kann unter einer großen Anzahl kostenloser Joomla Templates wählen. Für weitergehende Ansprüche gibt es auch kostenpflichtige Vorlagen, die Zusatzfunktionen und Support bieten. Wer kein Geld ausgeben möchte, kann jedoch sein Joomla Template auch selbst erstellen. In diesem Turorial auf Complett-Service.de erfährst du, wie das geht!

Joomla Templates selbst erstellen!

Du möchtest eigene Joomla Templates für Joomla 2.5 erstellen? Dieses Turorial zeigt, wie das geht! – © Complett-Service.de

Wer auf der Suche nach Joomla Templates im Netz die einschlägigen Download-Seiten besucht, findet eine Fülle von Joomla Vorlagen. Wenn es nun aber so viele kostenlose Joomla Templates gibt, warum soll ich mir dann noch die Mühe machen, selbst ein Template in Joomla zu erstellen? Eine berechtigte Frage, worauf ich mit zwei Argumenten antworten möchte, die mich überzeugt haben: Erstens möchte ich ein individuelles Joomlatemplate für meine Seite haben, das nicht tausendfach auf anderen Seiten zu finden ist. Zweitens möchte ich wissen, was da passiert und was mein Template an dieser oder jener Stelle macht und warum. Und drittens könnte ich noch anfügen, weil es mir einfach Spaß macht. Das ist vielleicht der Hauptgrund.

Joomla Templates erstellen: Aller Anfang ist leicht!

Du hast als Entwickler eines Joomla Templates mehrere Möglichkeiten, die Sache anzugehen. Du kannst ein schon vorhandenes Joomla Template, das im Großen und Ganzen deinen Ansprüchen genügt, modifizieren und es deiner Wunschvorstellung anpassen. Oder du entwickelst gleich eigene Joomla Templates neu.

In diesem Joomla Tutorial werden einige Dinge vorausgesetzt, z. B. sollten Begriffe wie HTML, CSS, PHP und JS bekannt sind. Auch wer sich schon einmal mit dem Content Management System Joomla beschäftigt hat, wird keine Nachteile haben. Hilfreich ist außerdem, den Begriff Responsive Webdesign schon mal gehört zu haben. Aber das Schöne ist, alles lässt sich auch nachholen.

Joomla 2.5 Template erstellen

Bevor es losgeht mit der Entwicklung von Joomla Templates, ist es nützlich, einige Vorbereitungen zu treffen und bestimmte Voraussetzungen zu schaffen. Diese stelle ich nachfolgend kurz vor.

Meine Voraussetzungen bei der Entwicklung eigener Joomla Templates

  • OS waren Windows XP und Windows 7
  • Getestet wurde in erster Linie auf einem lokalen Server, der mit XAMPP aufgesetzt wurde.
  • Das Template wurde zu Testzwecken vorübergehend online gestellt. Zum Hochladen wurde FileZilla verwendet.

Vorbereitung der Joomla Template Entwicklung

Um die Testumgebung für die Joomla Templates Entwicklung vorzubereiten, nutze ich meinen lokalen PC. Das heißt konkret, ich installiere einen Webserver (Apache) und eine Datenbank (MySQL) sowie einen PHP-Interpreter. Dies alles und noch ein paar Komponenten mehr sind in der aktuellen XAMPP-Installation (im Jahre des H… 2012) enthalten.

Joomla 2.5 wurde heruntergeladen, entpackt und im „htdocs“ – Verzeichnis des Webservers installiert. Bei der Installation solltest du keine Beispiel-Daten anlegen lassen (wegen der besseren Übersicht). Du kannst dich mit den Zugangsdaten für Joomla einloggen, die bei der Installation vergeben wurden.

Joomla Templates Erstellung optional:

Für das relativ komfortable Arbeiten mit Code-Dateien habe ich mich für die Entwicklungsumgebung NetBeans entschieden. Diese IDE gibt es in diversen Paketen, auch für PHP. Sie hat den Vorteil, dass bei Arbeiten mit Code auf komfortable Intellisense-Funktionen zurückgegriffen werden kann. Ich weise aber darauf hin, dass eine für Joomla angepasste Version momentan wohl nicht zur Verfügung steht und deshalb für die speziellen Joomla-Tags in NetBeans keine Erkennung existiert. Deshalb werden diese Tags als Fehler ausgewiesen, aber es hat bei mir trotzdem problemlos funktioniert und ist mir unverzichtbar bei der Entwicklung meiner Joomla Templates geworden.

Da ich aber davon ausgehe, dass nicht jeder, der eigene Joomla Templates erstellen möchte, sich erstmal mit NetBeans auseinandersetzen möchte, habe ich für dieses Joomla Tutorial in erster Linie für den Editor Notepad++ entschieden. Ein Tutorial, das sich mit der Templateerstellung mit Hilfe von NetBeans auseinandersetzt, findest du hier.

Anmerkungen zum Joomla Tutorial

In diesem Tutorial für Joomla Templates beziehe ich mich z. B. bei Pfadangaben auf mein lokales System. Das bedeutet, meine Pfade sind: „http://localhost/“ für Joomla „http://localhost/joomla/“. Die Dateien für das selbsterstellte Template werden im Joomla-Ordner für Templates „templates“ neu angelegten Ordner „MyTemplate“ abgelegt.

Das Ganze befindet sich, wie du sicher bemerkt hast, auf einem Windows-Rechner, und der lokale Pfad zu meinem Template-Ordner lautet: „c:xampphtdocsjoomlatemplatesMyTemplate“. Wenn ich mich auf diese Pfade beziehe, bedeutet es, dass du dies entsprechend deiner eigenen Installation anpassen musst.

Überblick und Vorgehensweise bei der Joomla Templates-Erstellung

Sehen wir uns erst einmal das große Ganze an, bevor wir ins Detail der Joomla Templates Entwicklung gehen. Was sollte das eigene Joomla Template leisten? Zum einen solltest du darauf achten, dass es veränderbar ist, was z. B. Farben und Schriftbilder angeht. Auch sollte eine gut strukturierte und nachvollziehbare Navigation enthalten sein. Schließlich sollte es auch für Suchmaschinen optimiert werden.

Eine Joomla-Vorlage besteht aus mehreren Dateien, die notwendig sind, um eine/deine Website wie gedacht und geplant darzustellen. Daten, die sich z. B. in einer Datenbank befinden, müssen eingebunden werden, was bei Joomla Templates in der Hauptsache in der Datei „index.php“ realisiert wird. Dies ist gewissermaßen die Zentraleinheit eines Joomla Templates. Außerdem müssen diese Daten wie gewünscht formatiert und „aufhübscht“ dargestellt werden. Die Daten werden in der Regel über „php“-Tags eingebunden. Das Design wird über „Stylesheets“ und Bilder realisiert. Außerdem können mit JavaScript-Bibliotheken/ -Dateien noch weitere Effekte hinzugefügt werden. Bei mehrsprachigen Websites werden Übersetzungen in verschiedenen Sprachen im dem Templateordner hinterlegt, in dem sich auch die Joomla Templates befinden.

Absolut unverzichtbar für ein Jomla Template ist die Datei „index.php“, die den Output (die Website) regelt und definiert. Wichtig für die Installation unter Joomla ist die Datei „templateDetails.xml“, die Installationsanweisungen und Metainformationen enthält. Zuerst werde ich diese beiden wichtigen Dateien eines Joomla Templates in ihrem Grundgerüst vorstellen und das erste installierbare Template bauen.

Danach werden schrittweise die weiteren Dateien, die für ein funktionales und erweiterbares Template benötigt werden, in die Joomla Templates eingebaut.

Einfache Joomla Templates ohne Formatierung

Wie erwähnt, brauchen wir zwei Dateien, „index.php“ und „templateDetails.php“. Diese müssen wohl auch genau so geschrieben sein (beachte „D“). Ich beginne mit der „templateDetails.php“:

Erstelle in Notepad++ (oder im Editor/IDE deiner Wahl) eine neue Datei (siehe oben) und kopieren oder schreibe den folgenden Code in diese Datei und speichere diesen im Templateordner „MyTemplate“ ab. Die „templateDetails.xml“ wird zur Verwaltung des Templates und zur Administrierung im Backend von Joomla benötigt und enthält z. B. allgemeine Angaben wie Autor, Version, Name etc., Angaben wie den Namen der im Template enthaltenen Dateien und Ordner, die Festlegung der Positionsbezeichnungen für die Module des Joomla Templates und noch einiges mehr.

Listing 1
  1. <extension version=“2.5″ type=“template“ client=“site“>
  2. <name>MyTemplate*</name>
  3. <creationDate>Datum*</creationDate>
  4. <author> Dein Name*</author>
  5. <authorEmail>eMail*</authorEmail>
  6. <authorUrl>Deine Website *</authorUrl>
  7. <copyright>Copyright (C) 2011 Open Source Matters, Inc. All rights reserved. *</copyright>
  8. <license>GNU General Public License version 2 or later; see LICENSE.txt *</license>
  9. <version>2.5</version>
  10. <description>*</description>
  11. <files>
  12. <filename>index.html</filename>
  13. <filename>index.php</filename>
  14. <filename>templateDetails.xml</filename>
  15. </files>
  16. <positions>
  17. </positions>
  18. </extension>

Zeile 1:
„extension“ leitet das Verzeichnis ein wird am Ende wieder geschlossen.
Zeilen 2 – 10:
die mit Sternchen gekennzeichnete Felder werden von dir gesetzt!
Zeile 12 – 14:
Zwischen den „Files“-Tag werden die zu installierenden Dateien angeben, außerdem wird noch die inhaltsleere Datei „index.html“ angegeben. Im weiteren Verlauf des Tutorials werden auch „Folder“-Tags für die Ordner eingebunden.
Zeile 18:
In diesem Bereich werden „Positionen deklariert“, dies ist für die Auswahl in Joomla notwendig, festgelegt werden sie in den Stylesheets.
Man kann auch weitere Bereiche in Joomla Templates definieren, dazu später evtl. mehr.

Die Zentrale des Joomla Templates

Kommen wir nun zu der wichtigsten Datei des Joomla Templates, der „index.php“ des Templates. Nach der Installation deines Templates muss sich diese auch im Templateordner des aktuellen Templates befinden. Zuerst wird eine rudimentäre Form ohne wesentlich Ausgaben, aber mit den notwendigen Tags zur korrekten Anwendung des Templates erstellt.

Gib folgende Codezeilen in die in Notepad++ erzeugte Datei „index.php“ ein:

Listing 2
  1. <?php
  2. defined(‚_JEXEC‘) or die;
  3. ?>
  4. <!doctype html>
  5. <html lang=“<?php echo $this->language; ?>“>
  6. <meta charset=“utf-8″ />
  7. <title>Mein Template</title>
  8. </head>
  9. </body>
  10. </html>

Zeile 2:
Mit der ersten Codezeile wird verhindert, dass diese Datei direkt aufgerufen werden kann.
Zeile 4:
In Html5 ist der DOCTYPE mit der Angabe von „html“ doch sehr überschaubar geworden.
Zeile 6:
Der Head-Tag Bereich wird später die Tags für Stylesheet- und Javascript-Dateien enthalten. Im Augenblick nimmt er den Titel-Tag auf und einen Meta-Tag zur Angabe des Zeichensatzes. Weitere Meta-Tags werden hier später eingebunden.
Zeile 10:
Als letztes Tag füge ich nun das Body-Tag ein, das meine Website enthält. Hier wird später der Inhalt eingefügt.
Klar, dieses Template wird möglicherweise noch nicht deinen Ansprüchen genügen ;-), es ist ja auch noch nicht wirklich brauchbar.

Aber trotzdem nicht vergessen: testen, testen, testen!

Eigenes Joomla Template installieren

Dem geneigten Leser bleibt es überlassen, dieses Beispiel auszuprobieren, wobei der Sinn des Ganzen in der Übung besteht. Also üben wir! Um aus diesen beiden Dateien nun ein funktionstüchtiges und weiterverteilbares Template zu erzeugen, braucht man ein Packprogramm. Ich verwende hierfür das kostenlose „7 Zip“.

  • Wechsle auf der Festplatte in das Verzeichnis deines neuen Templateordners
  • und makiere die beiden Dateien „index.php“ und „templateDetails.php“
  • Über das Kontextmenü der Markierung wird ein Zipfile erstellt. Die Zipdatei kann im gleichen Ordner erstellt werden.
  • Im Backend von Joomla wird nun das erstellte Template installiert und es kann mehr oder weniger benutzt werden. Das heißt, du siehst im Frontend nur eine weiße Seite, da sich noch keine Inhalte innerhalb des Body Tags befindet.

…und wer nicht gerne schreibt…

Eigene Joomla Templates erweitern

Ich werde jetzt sukzessive dieses Beispiel erweitern, bis ich ein einfaches Template erstellt habe. Erweitere nun zuerst die „index.php“ um Joomla-spezifische Einträge. Du willst ja etwas sehen, und zwar etwas, wozu ein CMS wie Joomla gebraucht werden kann.

Zuerst füge oberhalb des head-Bereichs aber innerhalb des php-Tag Folgendes ein:

Listing 3
  1. JHtml::_( ‚behavior.framework‘, true );
  2. $app = Jfactory::getApplication ();

Da in Joomla 2.5 das Javascript-Framework Mootools schon eingebaut ist, wird hier gewissermaßen der Schalter umgelegt, und du bekommst Zugriff auf das Framework. Die nächste Codezeile enthält den Zugriff auf die Basisklasse von Joomla. Diese wird im Parameter „$app“ gepeichert. Innerhalb des head-Bereichs füge das folgende Joomla-Tag ein:

Listing 4

<jdoc:include type=“head“ />

Damit werden vorhandene Metadaten über „jdoc:include…“ eingebunden. Achte darauf, dass nach dem Doppelpunkt kein Leerzeichen folgt und das „head“ in korrekten Anführungszeichen steht! Würde man an dieser Stelle das Template wieder aufrufen, so würde man im Quelltext der Webseite folgende Angaben finden:

Listing 5
  1. <base href= „http://localhost/joomla/“ />
  2. <meta http-equiv =“content-type“ content= „text/html; charset=utf-8“ />
  3. <meta name= „robots“ content=“index, follow“ />
  4. <meta name= „generator“ content= „Joomla! 2.5 – Open Source Content Management“ />
  5. <title> Home</title>
  6. <link href=“/joomla/index.php?format=feed&amp;type=rss“ rel=“alternate“ type= „application/rss+xml“ title= „RSS 2.0“ />
  7. <link href=“/joomla/index.php?format=feed&amp;type=atom“ rel=“alternate“ type= „application/atom+xml“ title= „Atom 1.0“ />
  8. <script src= „/joomla/media/system/js/core.js“ type= „text/javascript“> </script>
  9. <script src= „/joomla/media/system/js/mootools-core.js“ type= „text/javascript“></script>
  10. <script src= „/joomla/media/system/js/caption.js“ type= „text/javascript“> </script>

Du siehst, es ist schon einiges dazugekommen, was aber im Augenblick nicht die Ausgabe des Joomla Templates (auf dem Bildschirm) beeinflusst. Dazu musst du Ergänzungen im Body-Bereich der „index.php“ vornehmen.

Body des Joomla Templates ergänzen

Um Inhalte des Joomla Templates auf der Website auszugeben (zuerst in nicht sehr strukturierter Form) greife ich ganz ohne Formatierung auf Module und Komponenten zu, die schon installiert wurden und die mir Inhalte für meine Website liefern. Alles was ich dazu benötige, sind Joomla-Statements, welche den Inhalt ausgeben. Ich gehe hier auch wieder schrittweise vor, um zu zeigen, was genau passiert. Natürlich kann man folgende Tags auch auf einmal einfügen und sich das Ergebnis im Browser ansehen.

Gib zwischen den Body-Tags des Joomla Templates Foldendes ein:

Listing 6
  1. <body>
  2. <?php echo $app->getCfg (’sitename‘) ;?>
  3. <br />
  4. <jdoc:include type=“module“ name=“position-A” />
  5. <jdoc:include type=“component“ />
  6. </body>

An dieser Stelle wird davon ausgegangen, dass schon Daten, wie Beiträge, Kategorien usw. in Joomla angelegt wurden, um die nötigen Inhalte liefern, es wäre sonst im Frontend nicht viel zu erkennen. Die Angaben zur Position ist im Augenblick nicht relevant, da noch keine Stylesheet-Datei existiert. Die folgende Abbildung des Joomla Templates könnte so ähnlich ausgegeben werden.

Abb 1.: Screenshot des Templates ohne Formatierung
Joomla Template

Wie du siehst, werden die verschiedenen Textbereiche wie Überschrift, Inhalte und Menüs ordentlich nacheinander ausgegeben, was optisch nicht so schön ist. Bestimmt hast du beim Surfen schon die eine oder andere derartige Seite gesehen. Für den Laien ein unerklärliches Phänomen, für Kenner aber ein untrüglicher Hinweis, dass eine mögliche externe CSS-Datei nicht eingebunden oder geladen wurde bzw. nicht vorhanden ist.

Als nächstes sollte die Seite gewisse Strukturen bekommen, so dass die Vorstellungskraft nicht allzu sehr strapaziert wird.

…und wer nicht gerne schreibt…

Struktur entwerfen und Body ergänzen

Bei dem Entwurf des Designs des eigenen Joomla Templates sollte man sich nicht scheuen, seine Ideen auch auf Papier vorzuentwerfen. Sinnvoll ist es auch, Websites die sich als Vorbild eignen, genauer auf die eigene Vorstellung von Usability zu prüfen. Auch die Möglichkeit, eine Website für verschiedene Ausgabegeräte zu entwickeln, sei es nun Handy, Smartphone oder Website, sollte man im Auge behalten.

Da aber dieses Tutorial für Joomla Templates zunächst Grundlegendes behandeln soll, werde ich auf das Features „Responsive Design“ an dieser Stelle noch nicht eingehen und später behandeln. Ziel dieses Joomla Tutorials sollte ein einfaches, aber voll funktionsfähiges Joomla Template sein, da es in erster Linie um das grundlegende Verständnis geht. Dieses Joomla Theme sollte aber so gestaltet sein, dass eine leichte Anpassung möglich ist.

Struktur des Joomla Templates

Abb. 2: Entwurf der Andordung der verschiedenen Elemente des Joomla Templates

Ergänzungen zur Abbildung Joomla Template

Hierbei stellen „Logo“ und „Navigation“ den Header-Bereich des Joomla Templates dar. „Unten“ ist der Footerbereich, „Rechts“ enthält eine oder mehrere Sidebars und „Inhalt“ ist der Content-Bereich, der auch den „Klickpfad (Breadcrumbs)“ enthält.

Diese Struktur wird in der „template.css“-Datei festgelegt, die sich im Ordner „css“ des Joomla Templates befindet, und alles sollte so benannt sein. Wenn ich gerade dabei sind, mich mit der Struktur des Templates zu beschäftigen, lege ich gleich noch die Ordner-Struktur meines Joomla Templates an. Neben dem css-Ordner werden weitere Ordner angelegt, die später wichtige Dateien für mein Template aufnehmen.

Leg in deinem Joomla-Template-Ordner folgende Dateien an:
Dateistruktur des Joomla Templates

  • css – für die Stylesheet-Dateien
  • js – für die Javascript-Dateien/Bibliotheken
  • html – für Überschreibungen von z. B. Modulen
  • language – für Sprachdateie (z. B. Deutsche Übersetzungen)
  • fonts – für templatenotwendige Schriften
  • images – für unsere Bilder z. B. Logo

Fast komplette Struktur eines Joomla Templates

Die „templateDetails.php“ des eigenen Joomla Templates ergänzen

Eine Änderung der Datei und Ordner-Struktur sollte auch immer in der „templateDetails.php“ abgebildet werden. Diese Änderungen können aber auch direkt auf dem Server vorgenommen werden. Dafür muss aber das Template schon einmal installiert sein. Trage für jeden Ordner, den Du im Templateverzeichnis hinzufügst, Folgendes in dein Template innerhalb des „Files Tag“ ein:

  • <folder> Name des Ordners </folder> (z. B. <folder>css</folder>)

Durch diesen Eintrag wird bei einer Installation des Templates der Ordner mit seinem Inhalt im Templateverzeichnis angelegt.

Joomla Unterverzeichnisse nicht auslesen

Untersucht man andere Templates, z. B. die in Joomla schon mitgelieferten Beispieltemplates, so stellt man fest, dass alle Verzeichnisse und Unterverzeichnisse auch eine fast leere (im Code) „index.html“ enthalten. Diese Datei hat die Funktion, zu verhindern, dass der Inhalt der Unterverzeichnisse angezeigt wird. Die Datei enthält als Code lediglich eine Zeile:

<!DOCTYPE html><title></title>

Wie schon oben erwähnt, ist die „index.php“ im Root-Verzeichnis des Templates die wichtigste Datei, denn in ihr ist die Struktur der Website vorgegeben. Nimm eins der in „Joomla“ mitgelieferten Beispiele zur Hand, und du wirst in der jeweiligen „index.php“ bestimmte Bereiche ausmachen können. Um die Struktur eines schon vorhanden Joomla-Templates noch genauer untersuchen zu können, gibt es einen kleinen Trick, um die Positionen der Elemente und ihre Anordnung besser erkennen zu können.

Positionsangaben des Joomla Templates anzeigen

Voraussetzung für das anzeigen der Positionsangaben im Frontend ist, dass im Backend die richtigen Einstellungen vorgenommen wurden! Dazu muss unter „Erweiterungen | Templates“ „Optionen“ gewählt werden. Und hier muss die Checkbox „Vorschau Modulposition Freigegeben“ gesetzt sein. Nun kann man wieder zurück ins Frontend wechseln und hinter
z. B. „http: // localhost/joomla/“ ein „?tp=1“ einfügen. Nach dem „Enter“ müsste sich ein relativ transparenter Layer über die Website legen, der die Positionen der einzelnen Module anzeigt.

Styles in das eigene Joomla Template einbinden

Wie zu beginn erwähnt, werde ich ein eigenes Joomla Template entwickeln, das auf HTML5 und CSS3 basiert. HTML5 führt neue Strukturelemente ein, so dass Blockelemente wie „DIVs“ reduziert werden können. Die Umsetzung und Festlegung der Positionen des Joomla Templates in css erledigen wir in den drei folgenden Schritten, wobei die Reihenfolge so nicht zwingend ist.

  1. css-Datei als externe Datei in index.php einbinden
  2. Html5-Strukturelemente und DIV-Tags mit class-Namen und id-Namen in der index.php festlegen.
  3. Festgelegte Elemente der „index.php“ in der css-Datei „template.css“ ausformen.

Beginnen werde ich mit obigem Punkt eins und lege im „head“-Tag der „index.php“ einen Verweis auf die externe „template.css“ an.

Listing 7
  1. <link rel=“stylesheet“ href=“<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css“ type=“text/css“ media=“screen, projection“ />

Und wenn ich schon dabei bihn, binde ich auch die folgenden Stylesheet-Dateien ein, die Joomla-Styles enthalten:

Listing 8
  1. <link rel=“stylesheet“ href=““><?php echo $this->baseurl ?> /templates/system/css/system.css“ type=“text/css“ />
  2. <link rel=“stylesheet“ href=“<?php echo $this->baseurl ?> /system/css/general.css“ type=“text/css“ />

Der „PHP“-Code <!–?php echo $this—>template ?> liefert den Namen des aktuellen Joomla Templates. Dadurch wird die Pfadangabe flexibler, d. h. Der Code kann auch für andere Joomla Templates unverändert übernommen werden.

Als zweiten Punkt wird die Struktur in der „index.php“ abgebildet. Das Template ist grob in 5 Bereiche gegliedert:

  1. Kopfbereich evtl. mit Logo und Suchfeld (header)
  2. Linke Sidebar (sidebar1)
  3. Rechte Sidebar (sidebar2)
  4. Inhaltsbereich (component) mit Klickmenü (breadcrumbs)
  5. Fußbereich (footer)

Auf die neuen Strukturelemente von HTML5 wird in einem späteren Tutorial eingegangen. Füge innerhalb des „body“ Tags des Joomla Templates folgenden Code anstelle des vorhandenen in die „index.php“ ein:

Listing 9
  1. <div id =“complett“></div> <!– zwichen Rand und Websiteinhalt –>
  2. <div id=“container“> <!– Kontainer für die Website –>
  3. <header>
  4. <hgroup>
  5. <h1 id=“titel“><?php echo $app->getCfg(’sitename‘); ?></h1>
  6. <h3 id=“motto“>… da gehts lang -></h3>
  7. </hgroup>
  8. <nav id=“main_menu“>
  9. <ul>
  10. <li><a href=“#“>Home</a></li>
  11. <li><a href=“#“>Tutorial</a></li>
  12. <li><a href=“#“>Infos</a></li>
  13. </ul>
  14. </nav>
  15. </header>
  16. <section id=“inhalt“>
  17. <div id=“klickmenu“><jdoc:include type=“module“ name=“breadcrumbs“ /></div>
  18. <article>
  19. <jdoc:include type=“component“ />
  20. </article>
  21. </section>
  22. <aside id=“sidebar1″>
  23. <jdoc:include type=“modules“ name=“sidebar-1″ />
  24. </aside>
  25. <aside id=“sidebar2″>
  26. <jdoc:include type=“modules“ name=“sidebar-2″ />
  27. </aside>
  28. <footer>
  29. <div id=“infooter“><jdoc:include type=“modules“ name=“footer“ />
  30. </div>
  31. <div id=“impress“><a href=“#“>Impressum</a></div>
  32. </footer>
  33. </div>

Weiterentwicklung der „index.php“ des eigenen Joomla Templates

Die bisher bloßen Joomla-Tags wurden in eine Struktur aus HTML-Elemente eingebunden. In den einzelnen Tags sind „Id“s und class-Verweise angelegt worden, die in der „css“-Datei ausgeprägt werden (Formatierung der Tags).

Erklärungen zum Code des Joomla Templates:

Zeile 2:
hier habe ich einen Container-Tag („seite“) angelegt, um den gesamten Inhalt der Website zu positionieren.

Zeilen 3 – 15:
enthalten den Kopfbereich der Seite in dem Titel und Top-Navigation untergebracht werden.

Zeilen 17 – 22:
enthalten den Inhalt mit Breadcrumbs-Menü. Dies wird unter anderem mit dem HTML5 Tag „section“ realisiert. Anzumerken wäre hier, das der HTML5 Tag „section“ auch vielfach als Subbereich eines „article“ Elements verstanden wird.

Zeilen 23 – 29:
definieren die „aside“ Elemente, die Module enthalten können z. B. zusätzliche Navigation oder ein Login oder Suchmodul.

Zeilen 31 – 35:
definieren den Fußbereich, in dem z. B. der Link zum Impressum steht.
…und wer nicht gerne abschreibt (ohne Styles)…

 

Positionen und Styles in der eigenen Joomla Vorlage

Die Positionsangaben entnehme ich dem vorherigen Kapitel und dem Entwurf des Joomla Templates. Die Angaben über die Position schreibe ich in den Positionsbereich der Datei „templateDetails.php“. Diese Angaben werden von Joomla verwendet, um den Joomla-Anwender visuell bei der Positionierung der Module im Backend zu unterstützen. Außerdem ist diese Datei wichtig für die Installation des Joomla Templates. Damit alles funktioniert, sollte der Dateiname auch genau so geschrieben werden.

Bei der Installation des eigenen Templates in Joomla werden aus dieser Datei die notwendigen Informationen bezogen. In der Datei ist beschrieben, welche Verzeichnisse angelegt werden müssen, und es sind Informationen über die Position der Module enthalten.

Eintragen der Position in die Datei templateDetails.php

Trage Folgendes in die „templateDetails.php“ ein:

Listing 10
  1. <positions>
  2. <position>suchen</position>
  3. <position>navi</position>
  4. <position>sidebar1</position>
  5. <position>sidebar2</position>
  6. <position>footer</position>
  7. </positions>

Damit bei der Installation auch der Ordner „css“ und die „template.css“ installiert werden, trage auch folgenden Tag innerhalb der „templateDetails.php“ im Bereich „files“ ein:
<folder>css</folder>

Stylesheet Datei für das eigene Joomla Template anlegen

Kommen wir nun zum nächsten Punkt, der Anlage einer Stylesheet-Datei. Lege im Ordner „css“ für das Joomla-Template die Datei für die Stylesheets „template.css“ an. In die neu angelegte css-Datei füge folgenden Code ein:

Listing 11
  1. *{ margin: 0; padding: 0; }
  2. header, section, footer, aside, nav, article { display: block; }
  3. body {background: #eef; font-size: 12px; font-color: #464; font-family: Verdana, Arial, sans-serif;}
  4. #complett{}
  5. #container{ width: 90%; margin: 0 auto; background:#ede; position:relative;}
  6. header{ background: url(‚/images/logo.png‘);}
  7. hgroup{}
  8. h1{padding: 15px;}
  9. #titel{ color: #aaf;}
  10. h3{}
  11. nav{ list-style-type: none;}
  12. #main_menu{}
  13. ul{}
  14. li{ display: inline;}
  15. section{width: 640px; padding: 10px 15px; margin: 0 0 10px 0; float: left; background:#edd;}
  16. #inhalt{}
  17. #klickmenu{}
  18. article{}
  19. #sidebar1{ width: 200px; padding: 0 15px; margin: 0 0 10px 0; float: left; background:#eed;}
  20. #sidebar2{ width: 200px; padding: 0 15px; margin: 0 0 10px 0; float: left; background:#dee;}
  21. footer{ clear: both; background: #DDD; text-align: right; padding: 10px 15px; margin: 10px 0 0 0;}
  22. #infooter{}
  23. #impress{}
  24. a { display: inline-block; padding: 2px 10px; color: #fff; background-color: #666; text-decoration: none;}
  25. a:hover { background-color: #fff; color: #444;}
  26. a:active{ background-color: #f6f; color: #222;}
  27. footer a {color: #44d;}

Wie du siehst, habe ich sämtliche „IDs“, Strukturelemente und „class“ in die Stylesheet-Datei gepackt, um diverse Farbkombinationen zu testen. Es ist aber sinnvoll, nicht benutzte Elemente wieder zu entfernen. Die Größe einer Datei wirkt sich nicht nur auf die Übersichtlichkeit, sondern auch auf die Performance aus. Die Dateien und Ordner des Joomla Templates können hier mit einem üblichen Packprogramm zu einer „zip“-Datei gepackt und im Backend von Joomla installiert werden.

Nach der Installation steht dir im Backend von Joomla das eigene Template, wenn auch ein einfaches, zur Verfügung!

Das eigene Joomla Template mit Stylesheets anhübschen

Im vorausgegangenen Kapitel wurde recht willkürlich mit der Stylesheet-Datei umgegangen, das heißt, es wurden die Stylesheets, die in der Index.php des Joomla Templates vorgegeben wurden, mit irgendwelchen Werten (z. B. Farbwerten) zu Testzwecken versehen. Inzwischen ist etwas Zeit vergangen, und ich habe die Stylesheet-Datei (auch die index.php) überarbeitet und das Projekt Joomla-Template etwas verschönert.

TIPP: Im Internet gibt es einige kostenlose Tools, die es einem ermöglichen, eigene Farbmuster zu entwickeln (siehe auch meine Linkseite). Neben den Tools, die speziell auf Webdesign zugeschnitten sind, gibt es Farbmanager-Tools, die sich auf andere Lebensbereiche wie Haus und Wohnung usw. beziehen. Hier hat man in der Regel die Möglichkeit, auch spezielle Muster (z. B. Tapetenmuster) in die Komposition mit aufzunehmen. Für die eine oder andere Website ist das bestimmt recht interessant.

Farbdesigner für Joomla Templates

Ich selbst habe für dieses Projekt den Color Scheme Designer 3 verwendet, um eine halbwegs harmonische Farbzusammenstellung zu erzielen. Du hast bei diesem Designer die Möglichkeit, deine online kreativ gestaltete Farbkomposition zu exportieren und somit jederzeit (auch visuell) verfügbar zu haben. Aus dem exportierten Farbschema werden die Farben nach eigenem Belieben in die Stylesheet-Datei übernommen.

Beispiele:
hgroup,h3 background – #FF9933
nav ul li a,aside a:hover – #3333FF
footer a ,main_menu, sidebar1-border,sidebar2-border – #6666CC
nav ul li a, body-background – #003399

Ersetze den Inhalt der vorherige Stylesheet-Datei mit folgenden Werten:

Listing 12
  1. #complett{padding:5px;}
  2. #container{ width: 90%; margin: 0 auto; background:#fff; position:relative; -webkit-border-radius: 10px;
  3. -moz-border-radius: 10px;
  4. border-radius: 10px}
  5. header{ background: url(‚/images/logo.png‘);}
  6. hgroup{background: #FF9933; -webkit-border-radius: 10px 10px;
  7. -moz-border-radius: 10px 10px;
  8. border-radius: 10px 10px;}
  9. h1{padding:10px 5px 5px 10px;}
  10. #titel{ color: #339900;}
  11. h3{background: #FF9933; padding-bottom:1px;}
  12. ul {list-style-type:none;}
  13. nav{ list-style-type:none;padding:3px 10px;}
  14. article ul {background:#fff;}
  15. nav ul li{display:inline;width:80px;margin:1px;}
  16. nav ul li a{background:#9999FF;height: 18px; }
  17. nav ul li a:focus{background:#003399; padding:2px;}
  18. nav ul li a:hover{background:#3333FF;}
  19. #main_menu{border-bottom:1px solid #6666cc;border-top:1px solid #6666cc;}
  20. .menu_sidebar{display: block; }
  21. aside a{text-decoration:none;background:#fff;color:#000;}
  22. aside a:hover{background:#fff;color:#3333ff;}
  23. section{width:60%;padding:10px 15px;margin:0 0 10px 0;float:left;background:#fff;}
  24. article a{background:#fff;color:#993300;}
  25. #inhaltsbereich {width:940px;margin:0 auto;padding-top:10px;padding-bottom:10px;background:#FDFDFD;overflow:hidden;}
  26. #sidebar1{height:100%;min-height:460px;width:15%;margin:0 1% 0;float:left;background:#fff;border-left:1px dashed #6666cc;}
  27. #sidebar2{height:100%;min-height:460px;background:#fff;float:right;margin-right:1%;width:16.2%;border-left:1px dashed #6666cc;}
  28. footer{background: #6666CC ;text-align:right; padding:10px 15px;margin:10px 0 0 0;clear:both;
  29. -webkit-border-radius:0 0 10px 10px;-moz-border-radius:0 0 10px 10px;border-radius:0 0 10px 10px;}
  30. a {display:inline-block;padding:2px 10px;color:#fff;background-color:#666;text-decoration:none;}
  31. a:hover{background-color:#fff;color:#444;}
  32. a:active{background-color:#f6f;color:#222;}
  33. footer a {color:#FF9933;background:#6666cc;}
  34. footer a:hover{color:#FFCC99;background:#6666cc;}
  35. footer a {color:#FF9933;background:#6666cc;}

Wenn deine Lust zum eigenhändigem Eintragen begrenzt ist, findest du die CSS-Datei in getesteter Form in der „ZIP-Datei“, die du über den Download Button (weiter unten) herunterladen kannst. Wer sich schon mit CSS beschäftigt hat, beispielsweise im Rahmen der Entwicklung eigener CSS3 Buttons, für den dürfte der CSS-Quellcode selbsterklärend sein. Andere müssten sich z. B. mittels diverser Tutorials, die im Netz frei verfügbar sind, ein wenig einarbeiten.

Diese CSS-Datei ist aber bei weitem noch nicht vollständig, sondern soll erst einen Rahmen für eigene Joomla Vorlagen liefern. Behalte dabei von Anfang an im Auge, dass das Joomla-Template nicht nur nur auf Desktop-Monitoren vernünftige Ausgaben liefern soll, sondern auch auf Mobilgeräten!

Es ist daher sinnvoll, Größen von Objekten, die sich an unterschiedliche Ausgaben anpassen sollten in „%“ anzugeben (siehe Zeilen 2, 26, 27).

Im Verlauf der weiteren Entwicklung mit diesem Template werde ich mich auch noch mit responsive Webdesign und speziell mit Media Queries auseinandersetzen.

…deshalb, hier ist noch einiges zu tun…

Ein Gedanke zu „Joomla Templates erstellen

Schreibe einen Kommentar

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