Erstellen Sie auf der Basis von Atomic ein eigenses Template

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. (muß ggbf. im Webserver konfiguriert werden)
  • 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 als Basis 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, 61 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

Der 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 46 sehen Sie:

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

Dieser Ausdruck liefert den Namen Ihrer Website.

In Zeile 48 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 50 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 Kapitel 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.

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