13.3 Templates selbst erstellen

Jetzt wollen wir ein Template selbst erstellen. Bis zum fertigen Template-Paket gibt es viele Dinge zu beachten. Wir gehen in mehreren Schritten vor.

13.3.1 Konzept

Bevor Sie etwas tun, sollten Sie ein Konzept erstellen. Gerade im Bereich der Template-Erstellung fängt die Arbeit mit einer Skizze oder einer Grafik an. Ob Sie diese Skizze mit einem Bildbearbeitungsprogramm wie dem kommerziellen Adobe Photoshop⁷, dem in Windows enthaltenen Microsoft Paint, dem Open Source-Programm Gimp⁸ oder tatsächlich mit einem Zettel und Buntstiften erstellen, ist Ihre Sache.

Feste Größe oder variabel (fluid) oder beides?

Sie können zwei Arten von Templates erstellen. Templates, die sich in der Struktur der Größe des Browserfensters anpassen, und Templates, die eine feste vorgegebene Größe haben. Ein Beispiel zum flexiblen Layout: Wenn jemand 2.048 Pixel Platz auf seinem Bildschirm hat und das Browserfenster maximiert, so wird Ihre Seite entsprechend auseinandergezogen. Wenn Sie grafische, nicht skalierbare Elemente wie Logos und Schriftzüge in Ihrem Template benutzen, kann das sehr eigenartig aussehen. Sie haben also keine echte Kontrolle über das Aussehen.

Die andere Variante ist, sich für eine bestimmte Auflösung zu entscheiden und alle Elemente auf das Pixel genau im Template zu positionieren. Das hat den Vorteil, dass Ihre Homepage immer so aussieht, wie Sie das wollen. Leider wissen Sie nicht, mit welcher Bildschirmauflösung Ihre Seite betrachtet wird. Auf einem Bildschirm mit der Auflösung von 800 x 600 Pixel ist Ihre Seite bildschirmfüllend. Auf einem großen Bildschirm mit 1400 x 1050 Pixel belegt sie nur etwa ein Viertel der Fläche und sieht etwas verloren aus.

Sie müssen die Vor- und Nachteile abwägen und können sich dann für eine Variante entscheiden, oder aber Sie denken in Richtung Barrierefreiheit (siehe Kapitel 14) und bieten beide Varianten an. Sie kennen bestimmt Websites, auf den denen man die Schriftgröße verändern kann. Neben den Buttons zur Schriftgröße gibt es auch oft einen Button zur Einstellung unterschiedlicher Layouts (Abbildung 13.1).

Abbildung 13.1: Layout Umschaltung

Wenn Sie die feste Größe bevorzugen, sollten Sie eine Größe wählen, die auf den meisten Bildschirmen darstellbar ist, also 800 x 600 Pixel. Da der Browser noch eine Scrollleiste auf der rechten Seite besitzt und das Browserfenster noch eingerahmt ist, ist die Ihnen zur Verfügung stehende Breite sogar noch etwas kleiner, so dass Sie in der Breite maximal 780 Pixel haben sollten.

Struktur

Sie haben es mit strukturierten Daten zu tun und sollten sich zunächst eine allgemeine Aufteilung überlegen. Joomla! benutzt normalerweise eine Struktur wie in Abbildung 13.2.

Abbildung 13.2: Idee einer Struktur

Teil 1

• Bereich 1: Hier steht Ihr Logo oder ein Bild und der Seitenname.
• Bereich 2: Hier befindet sich das Suchfeld.
• Bereich 3: Hier ist der verlinkte Navigationspfad (Breadcrumbs).

Teil 2

• Bereich 4: In der linken Spalte werden die wichtigsten Menüs angezeigt.
• Bereich 5: Hier befindet sich der eigentliche Seiteninhalt.
• Bereich 6: Die rechte Spalte bietet Platz für zusätzliche Menüs.

Teil 3

• Bereich 7: Die Fußzeile

13.3.2 HTML-Umsetzung

Jetzt müssen Sie das Konzept in HTML und CSS umsetzen. Abhängig vom Bildbearbeitungsprogramm, mit dem Sie es erstellt haben, gibt es vielleicht eine Möglichkeit, das Bild automatisch in HTML-Code zu exportieren. Sie können die Umsetzung auch per Hand in einem Texteditor oder in einem HTML-Editor wie Dreamweaver⁹ oder einem der zahlreichen freien HTML-Editoren¹⁰ erstellen.

Der Quellcode der HTML-Umsetzung sieht etwa so aus wie in Listing 13.1. Der Code ist bewusst einfach gehalten und entspricht im Kopfbereich nicht dem XHTML-Standard¹¹. Der Dateiname dieser Layoutdatei muss index.php sein, da sie von Joomla! per PHP auf eingebettete Befehle untersucht wird.

Im Head-Bereich des Codes wird die spätere CSS-Datei des individuellen Templates eingebunden (siehe Listing 13.2). In dieser CSS-Datei befindet sich momentan nur ein Befehl, der die Schriftart bestimmt.

<html>
<head>
  <link 
  href="/joomla150/templates/joomla150buch/css/template.css"   
  rel="stylesheet" type="text/css"/>
</head>
<body>
 <div id="Teil1">Kopfbereich/header
   <div id="Bereich1">Bereich1</div>
   <div id="Bereich2">Bereich2</div>
 </div>
 <div id="Teil2">Hauptanzeigebereich/main
   <div id="Bereich3">breadcrumbs</div>
   <div id="Bereich6">rechte Seite</div>
   <div id="Bereich4">linke Seite</div>
   <div id="Bereich5">Inhalt</div>
 </div>
 <div id="Teil3">Fusszeile /footer
   <div id="Bereich7">Bereich7</div>
 </div>
</body>
</html>

Listing 13.1: HTML-Datei /index.php

  body { font-size: 12px;
    font-family: Helvetica,Arial,sans-serif;
    }

  #Teil1 { border: 2px dotted green;
    width: 100%;
    height: 4em;
    }

  #Teil2 { border: 2px dotted yellow;
    float: left;
    width: 100%;
    }

  #Teil3 { border: 2px dotted red;
    float: left;
    width: 100%;
    }

  #Bereich1 { border: 1px dashed silver;
    margin: 0pt 0pt 1.2em;
    width: 18em;
    background-color: rgb(238, 238, 238);
    float: left;
    }

  #Bereich2 { border: 1px dashed silver;
    margin: 0pt 0pt 1.1em;
    background-color: rgb(238, 238, 238);
    float: right;
    width: 16em;
    }

  #Bereich3 { border: 1px dashed silver;
    background-color: rgb(238, 238, 238);
    }

  #Bereich4 { border: 1px dashed silver;
    margin: 0pt 0pt 1.2em;
    float: left;
    width: 15em;
    }

  #Bereich5 { border: 1px dashed silver;
    margin: 0pt 12em 1em 16em;
    padding: 0pt 1em;
    }

  #Bereich6 { border: 1px dashed silver;
    margin: 0pt 0pt 1.1em;
    float: right;
    width: 12em;
    background-color: rgb(238, 238, 238);
    }

  #Bereich7 { border: 1px dashed silver;
    margin: 0pt 0pt 1.1em;
    background-color: rgb(238, 238, 238);
    }

Listing 13.2: CSS-Datei /css/template.css

Dieses erste Template werden Sie komplett per Hand im Joomla!-Verzeichnis erstellen. Wenn das Template fertig ist, können Sie ein gepacktes Installationspaket daraus machen, das dann auch von Dritten (oder Ihnen selbst) per Joomla!-Installer installiert werden kann. Speichern Sie die HTML-Layoutdatei unter dem Namen index.php im ebenfalls neu angelegten Verzeichnis [PfadzuJoomla]/templates/joomla150buch/. Die Datei template.css im Verzeichnis [PfadzuJoomla]/templates/joomla150buch/css/.

Damit ist die Grundstruktur Ihres Templates fertig. Jetzt müssen Sie Joomla! mithilfe einer XML-Datei das Template näher erklären, damit es im Template-Administrationsbereich angezeigt wird.

13.3.3 Verzeichnisstrukturen des Templates

Nun wird es Zeit, uns um gewisse Konventionen zu kümmern. Wie bereits angesprochen, muss das Template in einer besonderen Verzeichnisstruktur abgelegt sein.

[PfadzuJoomla]/templates/[Name des Templates]/
[PfadzuJoomla]/templates/[Name des Templates]/css/
[PfadzuJoomla]/templates/[Name des Templates]/images/

Der Name des Templates sollte keine Umlaute, Leerzeichen und sonstige Sonderzeichen enthalten. Wenn das Template später als Paket installiert wird, erzeugt der Template Installer daraus ein Verzeichnis. Abhängig vom Betriebssystem kann das bei exotischen Zeichenkombinationen zu Problemen führen. Außerdem sollte der Name aussagekräftig sein. Ich habe als Template-Namen joomla150buch genommen.

Im Template-Verzeichnis müssen verschiedene Dateien mit bestimmten Namen vorhanden sein.

Layoutdatei

/templates/joomla150buch/index.php

Das ist die HTML-Layoutdatei, die wir schon erstellt haben. Sie muss die Endung .php haben, da die dynamischen Joomla!-Modulelemente, die wir noch einfügen werden, von PHP interpretiert werden müssen.

Vorschaubild

/templates/joomla150buch/template_thumbnail.png

Diese Datei enthält das Vorschaubild Ihres Templates für die Auswahlvorschau in der Joomla!-Administration unter dem Menü Erweiterungen - Template Manager. Vorschaubilder haben das Format 200 x ca. 150 Pixel. Sie können diese Datei später erzeugen, wenn Sie Ihr Template sehen können.

Metadaten des Templates

/templates/joomla150buch/templateDetails.xml

Diese Datei stellt die Bauanleitung für den Template Installer dar und enthält die Installationen für die Template-Auswahl im Template-Manager. Hier beschreiben Sie, welche Dateien Ihres Templates wohin kopiert werden sollen, wer der Autor ist und weitere Metadaten über das Template. Bei der späteren Installation des Templates über den Joomla!-Installer liest PHP diese Datei aus und kopiert die Dateien an den Platz, der in der XML-Datei angegeben worden ist. Für das Beispiel-Template können Sie die Datei in Listing 13.3 verwenden und mit eigenen Daten versehen. Sie müssen für jede Datei, die Sie im Template benutzen, einen entsprechenden XML-Container mit dem Dateinamen und dem richtigen Pfad füllen.

<files>
  <filename>   
    ... Dateiname einer Datei im TemplateRoot-Verzeichnis eingeben ... 
  </filename>
  <filename>
    ... für jede Datei einen filename-Container 
  </filename>
</files>

Die anderen Container der XML-Datei dienen der Beschreibung des Templates. Hier das komplette funktionsfähige Listing der XML-Datei (Listing 13.3):

<install version="1.5" type="template">
  <name>joomla150buch</name>
  <version>1.0</version>
  <creationDate>11.11.2007</creationDate>
  <author>Hagen   Graf</author>
  <copyright>GNU/GPL</copyright>
  <authorEmail>hagen@cocoate.com</authorEmail>
  <authorUrl>http://www.cocoate.com</authorUrl>
  <version>0.1</version>
  <description>... Beschreibung</description>
  <files>
    <filename>index.php</filename>
    <filename>templateDetails.xml</filename>
    <filename>template_thumbnail.png</filename>
    <filename>css/template.css</filename>
  </files>
</install>

Listing 13.3: templateDetails.xml

Erstellen Sie die Datei templateDetails.xml ebenfalls im Verzeichnis [PfadzuJoomla]/ templates/joomla150buch/.

CSS-Datei

/templates/joomla150buch/css/template.css

Sie können mehrere CSS-Dateien für Ihr Template benutzen. Die Namensgebung und die Gestaltung der CSS-Datei steht Ihnen frei. Es gibt jedoch Standardbezeichnungen für verschiedene CSS-Elemente. Eine Tabelle dazu finden Sie im Anhang. Für Ihren ersten Versuch benötigen Sie nur eine CSS-Datei.

Grafiken, Bilder

/templates/joomla150buch/images/[beliebige Bilddateien]

In diesem Verzeichnis können Sie beliebige Bilddateien, die Sie in Ihrem Template benötigen, eintragen. Der Installer kopiert die Dateien dann in den images-Ordner.

13.3.4 Erster Probelauf

Wenn Sie alle Strukturen im Unterverzeichnis [PfadzuJoomla]/templates/ nachvollzogen haben (Abbildung 13.3), können Sie bereits Ihr neues Template in der Joomla!-Administration im Menü Erweiterungen - Template sehen und zum Standard erklären (Abbildung 13.4).

Abbildung 13.3: Verzeichnisstruktur und Dateien des joomla150buch-Templates

Abbildung 13.4: Neues Template im Manager

Wenn Sie Ihre Website aufrufen, sehen Sie Ihr neues Template (Abbildung 13.5). Leider werden noch keine Inhalte dargestellt. Da diese Inhalte dynamisch erzeugt werden, müssen Sie sie jetzt Stück für Stück in Ihr neues Template integrieren.

Abbildung 13.5: Aufruf im Browser

13.3.5 Integration der Joomla!-Module

Die Integration der Joomla!-Module erfolgt über in den HTML-Code eingebettete Befehle. Der Namensraum jdoc wird von Joomla! verwendet, um verschiedene Elemente in den Templates einblenden zu können. Wenn Sie im Kopfbereich der Layoutdatei index.php die (hier kursiv hervorgehobene) Zeile

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

einfügen, erscheint bereits der Titel der Seite und das Newsfeed-Symbol korrekt (Abbildung 13.6).

Abbildung 13.6: Favicon und Seitentitel

Wenn Sie den HTML-Quellcode dieser Seite aufrufen, stellen Sie fest, dass Joomla! die gesamten Metadaten, die Sie in der Administration eingegeben haben, in den HTML-Code geschrieben hat (siehe Listing 13.4). Außerdem werden die RSS-Feeds per Link-Tag eingebunden und in Browsern wie Firefox, die diese Technik unterstützen, als Feed-Symbol angezeigt.

...
<head>
<base href="http://localhost/joomla150/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots"   content="index, follow" />
<meta name="keywords"   content="joomla, joomla!, Joomla, Joomla!, J!" />
<meta name="description" content="Joomla! - dynamische 
    Portal-Engine und Content-   Management-System"   />
<meta name="generator" content="Joomla!
    1.5 - Open Source Content Management" />
<title>Welcome to the Frontpage</title>
<link href="/joomla150/index.php?format=feed&amp;type=rss"
      rel="alternate" type="application/rss+xml"
      title="RSS 2.0" />
<link href="/joomla150/index.php?format=feed&amp;type=atom"
      rel="alternate" type="application/atom+xml"
      title="Atom 1.0" />
<script type="text/javascript"
        src="/joomla150/media/system/js/mootools.js"></script>
<script type="text/javascript"
        src="/joomla150/media/system/js/caption.js"></script>
...

Listing 13.4: Joomla!-Metadaten

Nachdem das so gut funktioniert hat, kommen wir gleich zu den anderen relevanten jdoc-Tags-Einschüben.

Der Befehl

<jdoc:include type="modules" name="top" style="none" />

beispielsweise erwartet als Parameter type den Typ des Einschubs, in unserem Fall modules. Der Parameter name kennzeichnet die Position des Moduls (top, right, left, user1, ...) auf der Website. Diese Position können Sie Ihrem Modul im Modulbereich, erreichbar über das Menü Erweiterungen - Module, zuordnen. Der Parameter style schließlich enthält einen Wert, der die Art des aus dem Modul gelieferten HTML-Codes betrifft. Der Wert none beispielsweise liefert die reine HTML-Ausgabe ohne umgebende <div>-Tags (siehe nachfolgende Tabelle).

Tabelle 13.1:  Modul-Parameter

Eine Beschreibung der jdoc-Einschübe in der Datei index.php sehen Sie in Listing 13.5.

ACHTUNG: Die <jdoc> Befehle müssen in einer Zeile stehen - Keine Zeilenumbrüche!

<html>
<head>
  <jdoc:include   type="head" />
  <link   
    href="/joomla150/templates/joomla150buch/css/template.css"   
    rel="stylesheet" 
    type="text/css"   />
</head>
<body>
  <div id="Teil1">Kopfbereich / header
    <div id="Bereich1">Bereich1 
      <jdoc:include type="modules" name="user3" style="xhtml" />
    </div>
    <div id="Bereich2">Bereich2  
      <jdoc:include type="modules" name="top" style="xhtml"   />
    </div>
  </div>
  <div id="Teil2">Hauptanzeigebereich / main
    <div id="Bereich3">breadcrumbs  
      <jdoc:include type="modules" name="breadcrumb" style="xhtml" />     </div>
    <div id="Bereich6">rechte Seite 
      <jdoc:include type="modules" name="right" style="xhtml" />     </div>
    <div id="Bereich4">linke Seite   
      <jdoc:include type="modules" name="left" style="xhtml" />     </div>
    <div id="Bereich5">Inhalt  
      <jdoc:include type="component" style="xhtml"/>     </div>
  </div>
  <div id="Teil3">Fusszeile   /footer 
    <div id="Bereich7">Bereich7
      <jdoc:include type="modules" name="footer" style="xhtml"   />
    </div>
  </div>
</body>
</html>

Listing 13.5: index.php mit jdoc-Einschüben

Wenn Sie die Website mit dem geänderten HTML-Code auf dem lokalen Server aufrufen, sehen Sie bereits die dynamischen Inhalte. Ihr neues Template wurde mit allen Daten gefüllt. Das Ergebnis sieht natürlich optisch noch verbesserungswürdig aus, aber immerhin: Das Prinzip hat jetzt schon mal funktioniert (Abbildung 13.7).

Abbildung 13.7: Template mit dynamischen Daten

Jetzt müssen wir das Template noch in ein Installationspaket packen.

13.3.6 Ein Template-Paket erstellen

Um Ihr Template weitergeben zu können, müssen Sie es in ein Zip-Archiv verpacken. Bevor Sie das tun, erstellen Sie noch ein aktuelles Vorschaubild Ihres Templates (template_thumbnail.png) in der Größe 227 x ca. 162 Pixel. Im Template-Bereich sollte dieses Vorschaubild jetzt beim Überfahren des Namenslinks angezeigt werden (Abbildung 13.8).

Abbildung 13.8: Vorschaubild des joomla150buch-Templates

Packen Sie jetzt alle Template-Dateien von joomla150buch inklusive Ihrer Unterverzeichnisse in ein Zip-Archiv.

Markieren Sie dazu alle Dateien und Ordner im Ordner

[PfadzuJoomla]/templates/joomla150buch/

und packen Sie alles in die Datei joomla150buch.zip.

Sichern Sie den Ordner und die ZIP-Datei.

Deinstallation des Templates

Das von Ihnen erstellte Paket können Sie an andere weitergeben oder selbst installieren. Um die Installation ausprobieren zu können, müssen Sie das eben erstellte Template wieder aus dem Joomla!-System entfernen.

Um es entfernen zu können, müssen Sie zunächst ein anderes Template als Standard festlegen. Klicken Sie in das Menü Erweiterungen - Template, wählen Sie das gewünschte Template aus und klicken Sie auf das Icon Standard.

Jetzt können Sie Ihr Template deinstallieren. Besuchen Sie das Menü Erweiterungen - Installieren/Deinstallieren und klicken Sie dort auf den Reiter Templates. Wählen Sie Ihr gerade erstelltes Template joomla150buch aus und klicken Sie auf das Icon Deinstallieren (Abbildung 13.9).

Abbildung 13.9: Deinstallation des Templates

13.3.7 Installation mit dem Joomla!-Template Installer

Nachdem Sie alle Spuren der Entwicklung beseitigt und ihr Werk gesichert haben, rufen Sie den Menüpunkt Erweiterungen - Installieren/Deinstallieren auf.

Dort können Sie Ihr ZIP-Paket installieren. Wählen Sie die Datei joomla150buch.zip aus und installieren Sie sie durch einen Klick auf den Button Datei hochladen & installieren. Der Installer meldet die erfolgreiche Installation des Templates. In der Erfolgsmeldung wird Ihnen die Beschreibung aus der XML-Datei angezeigt (Abbildung 13.10).

Abbildung 13.10: Installation der Template-Paketdatei

Wenn Sie jetzt in den Template-Bereich wechseln, sollte das joomla150buch-Template installiert und auswählbar sein (Abbildung 13.8).

13.3.8 Welcher Quellcode kommt aus Joomla!?

Nachdem wir nun die härtesten Hürden bei der Template-Erstellung genommen, wollen wir kurz in einen Blick in den HTML-Code werden, den Joomla! zurückliefert.

Joomla! erzeugt natürlich Code, der in die von uns erzeugten Container eingeblendet wird. Dieser Code besteht aus HTML mit eingesprenkelten CSS-Klassen und -IDs. Joomla! enthält unter anderem zwei CSS-Dateien, die bestimmte Klassen und IDs beschreiben und in jedes Template eingebunden werden sollten.

Es handelt sich dabei um die Dateien /templates/system/css/system.css und /templates/ system/css/general.css.

Sie werden in das Template im <head>-Bereich mit den folgenden Befehlen eingebunden:

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

In beiden Dateien finden Sie die Klassen und IDs, die im weiteren Verlauf des Kapitels auftauchen werden.

Die Modulposition links im Detail

Nehmen wir uns die linke Modulleiste mal etwas genauer vor (Abbildung 13.11).

Abbildung 13.11: Template – Module an der Position links

Das ist der HTML-Code in der Layoutdatei index.php:

<div id="Bereich4">linke Seite <jdoc:include type="modules" name="left" style="xhtml" />

Das <div>-Tag für diesen Bereich wird über eine CSS id mit dem Namen Bereich4 formatiert.

Wenn Sie sich mal den ausgelieferten HTML-Code in einem Browser ansehen (Rechtsklick auf die Website, Quellcode anzeigen), sehen Sie natürlich viel mehr Code, der von Joomla! durch den jdocs-Aufruf erzeugt wurde (Listing 13.6).

... weitere HTML Befehle
<div id="Bereich4">linke Seite
  <div class="moduletable_menu">
    <h3>Hauptmenü</h3>
    <ul class="menu">
      <li id="current" class="active item1">
        <a href="http://localhost/joomla150/">Startseite</a>
      </li>
      <li class="item2">
        <a href="/joomla150/joomla-license">Joomla! License</a>
      </li>
    </ul>
  </div>
... weitere HTML Befehle

Listing 13.6: Auszug aus dem ausgelieferten HTML-Quellcode

Auffallend bei diesem Code sind die CSS-Klassen menu, active item1, item2. Im Kapitel 7.2 sind wir auf die zusätzlichen CSS-Suffixe in den Modul-Parametern eingegangen. Hier ist offensichtlich so ein Fall. In einer CSS-Datei des Standard-Templates rhuk_milkyway werden Sie auch sofort fündig¹²:

div.module_menu h3{
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #eee;
  margin: -23px -4px 5px -5px;
  padding-left: 10px;
  padding-bottom: 2px;
}
div.module_menu {
  margin: 0;
  padding: 0;
  margin-bottom: 15px;
}
div.module_menu div   div div {
  padding: 10px;
  padding-top: 30px;
  padding-bottom: 15px;
  width: auto;
}
div.module_menu div   div div div {
  background: none;
  padding:   0;
}
div.module_menu ul {
  margin: 10px 0;
  padding-left: 20px;
}
div.module_menu ul li a:link, 
div.module_menu ul li a:visited {
  font-weight: bold;
}

Diese CSS-Blöcke sorgen in diesem Fall für die abgerundeten Ecken der Menüs. Es gibt noch weitere Einträge in der CSS-Datei, die die Überschrift dritter Ordnung (<h3></h3>) und eine unsortierte Liste (die Menülinks) für diesen Fall formatieren.

So weit, so gut. Diese Art der Formatierung ist gewollt, und die Ausgabe der benötigten <div>-Tags kann noch über das Attribut style verändert werden. In unserem Beispiel-Template haben wir den Parameter style xhtml benutzt, in diesem Template wird der Parameter style rounded benutzt. Er liefert das entsprechende vierteilige <div>-Tag.

Diese Art der Code-Erzeugung eignet sich sehr gut zum Formatieren per CSS. Wenn Sie etwas weiterlesen im Quellcode, werden Sie jedoch auch wieder über Tabellen stolpern! Die Content Komponente arbeitet noch mit Tabellen! An dieser Stelle beginnt Ihr Problem, wenn Sie den Content (der Inhalt in der Mitte) individuell ohne Tabellen formatieren wollen. Joomla! hat aber auch hier eine Lösung.

Template Overrides (HTML-Ausgabe anpassen, ohne die Core-Dateien zu verändern)

Um das Problem mit der Tabellenausgabe in den Griff zu bekommen, müssten Sie jetzt normalerweise die Joomla!-Core-Dateien ändern. Ihr Content wäre zwar frei von Tabellen, aber beim nächsten Update von Joomla! könnte es sein, dass die Datei wieder überschrieben wird.

Als Lösung für das Problem gibt es seit Joomla! 1.5.0 erstmals die so genannten views. Jede Komponente enthält einen zusätzlichen Ordner view, dort finden Sie viele unterschiedliche Sichten auf die Ausgabe der Logik-Komponente. Bei der Content-Komponente com_content sind das beispielsweise archive, article, category, frontpage und section. Diese fünf Ordner enthalten Dateien, die verschiedene Sichten des Inhalts zur Verfügung stellen. Sie erinnern sich bestimmt an die Tabellen- und die Blogsicht. Jeder dieser fünf Ordner enthält auch einen Ordner tmpl und dieser wiederum verschiedene Dateien, die für die Darstellung zuständig sind (Abbildung 13.12).

kap13_0200_views.bmp
Abbildung 13.12: Verzeichnisstruktur views

Um diesen Weg zu nutzen, benötigen Sie ein zusätzliches Verzeichnis in Ihrem Template-Verzeichnis. Wenn wir bei diesem Beispiel bleiben, muss das Verzeichnis com_content/article heißen, da Sie das Layout der content-Komponente in der Darstellungsform article verändern wollen.

Sie müssen also die Dateien in

[PfadzuJoomla}/components/com_content/view/article/tmpl/*.*

in Ihr neues Template-Verzeichnis kopieren und können sie dann an Ihre Bedürfnisse anpassen.

[PfadzuJoomla}/templates/[ihrTemplate]/html/com_content/article

Sie können diesen Weg gut im Beez-Template nachvollziehen. Hier liegen die oben angesprochenen Dateien in

[PfadzuJoomla}/templates/beez/html/com_content/article

und überschreiben damit die Core-Dateien, ohne sie zu verändern (override).

Joomla! sucht im Template-Verzeichnis zunächst nach diesen Dateien. Sind sie vorhanden, werden sie genutzt. Sind sie nicht vorhanden, werden die Core-Dateien aus den Komponenten genutzt.