Ein eigenes Template, basierend auf Atomic

Das Atomic-Template ist ein Gerüst für Ihr eigenes Template. Es besteht aus:

• /htdocs/templates/atomic
  component.php – das Template für die Druckansicht
  error.php – das Template für die Fehlerseite
  favicon.ico – das Icon der Website (Favicon)
  index.html – eine leere HTML Datei, die eine weisse Seite darstellt, wenn jemand das Verzeichnis direkt aufruft. Damit wird vermieden, dass die Dateien des Verzeichnisses dem Besucher angezeigt werden. Joomla! Nutzt diese Technik in allen Verzeichnissen.
  index.php – das Hauptseiten-Template
  templateDetails.xml – Die Konfigurationsdatei mit allen Informationen über Dateien, Positionen und Optionen ist notwendig, damit das Template im Template-Bereich angezeigt wird und um später ein installierbares Zip-Archiv zu erzeugen.
  template_preview.png – das große Template-Vorschaubild, das im Template-Bereich angezeigt wird
  template_thumbnail.png – das kleine Template-Vorschaubild, das im Template-Bereich angezeigt wird
• /htdocs/templates/atomic/css
  Das Verzeichnis für CSS-Dateien
• /htdocs/templates/atomic/html
  Das Verzeichnis für Override-Dateien. Atomic bietet bereits einige Override-Dateien für Module an.
• /htdocs/templates/atomic/images
  Das Verzeichnis für Grafiken und Fotos
• /htdocs/templates/atomic/js
  Das Verzeichnis für JavaScript-Dateien
• /htdocs/templates/atomic/languages
  Das Verzeichnis für Sprachdateien. Atomic enthält bereits die Sprachdateien für Englisch.

Die Haupt-Template-Datei index.php

Der Name dieser Layout-Datei muss index.php lauten, da Joomla! nach eingefügten <jdoc>- und PHP-Befehlen sucht. Die notwendigen HTML-Auszeichnungen sind bereits eingebaut und kommentiert. Sie können den Inhalt der Datei Ihren Bedürfnissen anpassen.

Lassen Sie uns kurz die Datei durchgehen, um einen Überblick zu erhalten:

In Zeile 24 können Sie sich entscheiden, ob Sie mit dem Blueprint-CSS-Framework arbeiten wollen oder nicht. (Zu Blueprint erfahren Sie weiter unten mehr.)

In Zeile 50, 56, 62 und weiteren Zeilen können Sie sehen, dass das Template Positionen mit besonderen Namen (atomic-search, atomic-topmenu, ...) zur Verfügung stellt. Wenn Sie diese Namen benutzen wollen, müssen Sie Ihre Module den vorgegebenen Positionen zuordnen. Wenn Sie die Namen ändern wollen, können Sie das in der templateDetails.xml-Datei tun.

In Zeile 42 sehen Sie den Ausdruck:

echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js

Die Wert von baseurl (Name des Joomla!-Verzeichnisses) und der Name Ihres Templates sind Joomla! bekannt, und Sie können sie bei Bedarf abrufen.

In Zeile 48 sehen Sie:

echo $app->getCfg('sitename');

Dieser Ausdruck liefert den Namen Ihrer Website.

In Zeile 50 sehen Sie:

if($this->countModules('atomic-search')) ...

Dieser Ausdruck zählt die Module an der Position atomic-search. Sie können das Ergebnis benutzen, um Ihr Layout unterschiedlichen Situationen anzupassen.

In Zeile 52 sehen Sie:

<jdoc:include type="modules" name="atomic-search" style="none" />

Das ist ein <jdoc>-Aufruf, der als Namensraum nur in Joomla! existiert. Er wird genutzt, um die HTML-Ausgabe der in den Attributen angegebenen Typen einzufügen. In diesem Fall betrifft dies die Template-Position atomic search. Das style-Attribut nennt sich Modulechrom und kann die folgenden Werte annehmen:

• table – Die Ausgabe wird in einer Tabelle dargestellt.
• horz – Die Ausgabe wird horizontal in einer Zelle innerhalb einer Tabelle dargestellt.
• xhtml – Die Ausgabe wird XHTML-gemäß in <div>-Tags dargestellt.
• rounded – Die Ausgabe wird in einem Format dargestellt, sodass runde Ecken dargestellt werden können (geschachtelte <div>-Tags). Die Klasse des Elements wird von moduletable in module umbenannt.
• none – ohne Formatierung
• outline – die Ausgabe der Positionsvorschau (?tp=1)
• Template-spezifische Styles – Das Beez-Template hat weitere Styles (siehe das Kapitel Angie Radtke über Ihr Beez-Template).

Sie finden eine komplette Liste in der Joomla!-Dokumentation (What is module chrome).

Andere <jdoc>-Typen sind:

<jdoc:include type="head" />
<jdoc:include type="message" />
<jdoc:include type="component" style="none" />

Jede Seite benötigt einen head (Kopfbereich mit Meta-Tags), manchmal eine message (beispielweise eine Nachricht nach dem Speichern) und natürlich eine Komponente. Pro Seite ist es möglich, eine Komponente darzustellen. Die Komponente kann ebenfalls mit Modulechrom umgeben werden.

Die Fehler- und die Druckvorschau-Template-Datei arbeitet genau wie die Haupt-Template-Datei.

CSS-Ordner

Sie finden drei Dateien in diesem Ordner:

1. Die Datei css/template.css mit vordefinierten und kommentierten CSS-Anweisungen. Falls Sie das Blueprint-Framework nicht benutzen, müssen Sie ein paar davon auskommentieren. Die Stellen sind entsprechend markiert.
2. Die Datei css/template_ie.css ist leer. Sie können hier spezielle CSS-Anweisungen für den Internet Explorer eintragen.
3. Die Datei css/template_rtl.css ist ebenfalls leer. Sie können spezielle CSS-Anweisungen für Sprachen angeben, die von rechts nach links geschrieben werden.

Das Blueprint-Framework

Blueprint ist ein CSS-Framework, das erstellt wurde, um Entwicklungszeit zu sparen, und das in allen Browsern laufen soll.

Hier folgen ein paar Sätze aus der readme-Datei.

Willkommen bei Blueprint! Dies ist ein CSS-Framework, das erfunden wurde, um Ihre Entwicklungszeit zu minimieren. Es bietet eine solide Basis für Ihre eigenen CSS-Anweisungen. Blueprint bietet folgende Features:
* ein leicht anzupassenden Grid
* behutsame Typographie
* typografische Basis
* verbessertes Browser CSS Reset
* ein Druck Stylesheet
* leistungsfähige, anpassbare Scripte
* definitiv kein aufgeblähter Code!

Sie finden Demos und Anleitungen auf der Projekt-Website unter http://www.blueprintcss.org/.