Dieser Abschnitt der Dokumentation befasst sich mit der Erstellung eigener Templates. Um mal etwas vorweg zu nehmen: Wenn Sie ein eigenes Template erstellen wollen, dann sollten Sie Erfahrung in HTML sowie CSS mitbringen. Wenn Sie nur die Farben oder die Tabellenbreiten eines Templates an Ihre Bedürfnisse anpassen wollen, dann genügt es wenn Sie sich ein wenig durch diese Dokumentation arbeiten.

ACHTUNG: Wenn Sie größere Änderungen am Template durchführen, dann tun Sie das an einer Kopie des Original Templates, dass sie in einem eigenen Ordner speichern. So laufen Sie nicht Gefahr durch ein Update des Gästebuches Ihre Änderungen ungewollt zu überschreiben. Hinweise zu Änderungen am Template finden Sie in den Versionsunterschieden.

Ein Template ist eine Designvorlage, meist in HTML geschrieben, die Platzhalter enthält um dort den Inhalt einzufügen, der von einem Programm wie z.B. in diesem Fall einem Gästebuch generiert wird.

Im Fall des MGB sehen diese Platzhalter so aus:

{PLATZHALTER}

Sie beginnen mit einer geschweiften Klammer, der Text ist GROSS geschrieben, Leerzeichen werden durch Unterstriche (_) dargestellt und sie enden auch wieder mit einer geschweiften Klammer. Diese Platzhalter kommen an die Stelle im Template, wo sie durch den Inhalt ersetzt werden sollen. Beispielsweise wird der Platzhalter

{TITLE}

in der mgbModern/main/index_body.tpl durch den Titel des Gästebuches ersetzt.

Die Dateiendung *.tpl bedeutet nichts anderes als „Template“ und enthält HTML. Die Datei heisst nur anders. Man kann sie mit einem ganz normalen Texteditor wie Notepad oder Notepad2 öffnen.

Das Template ist in verschiedene Bereiche aufgebaut. Ich erkläre es mal anhand der mitgelieferten Vorlage “mgbModern“. Sie befindet sich im Ordner “templates“ im Hauptverzeichnis des Gästebuches. Es gibt vier Unterordner:

-- admin
  - activate.tpl
  - admin.tpl
  - deactivate.tpl
  - delete.tpl
  - edit.tpl
  - edit_single.tpl
  - edit_user.tpl
  - edit_user_adduser.tpl
  - edit_user_single.tpl
  - login.tpl
  - login_ok.tpl
  - lostpassword.tpl
  - lostpassword_sent.tpl
  - navigation.tpl
  - settings.tpl
  - version.tpl
 |-- general_admin
    - copyright.tpl
    - errormessage.tpl
    - footer.tpl
    - header.tpl
    - scrolling_function.tpl
-- css
 |-- black
    - style.css
 |-- blue
    - style.css
 |-- ...
-- general
  - captcha.tpl
  - copyright.tpl
  - errormessage.tpl
  - footer.tpl
  - header.tpl
  - scrolling_function.tpl
-- js
  - overlib.js
-- main
  - email_body.tpl
  - email_body_success.tpl
  - index_body.tpl
  - index_entry.tpl
  - index_entry_aim.tpl
  - index_entry_city.tpl
  - index_entry_comment.tpl
  - index_entry_email.tpl
  - index_entry_hp.tpl
  - index_entry_icq.tpl
  - index_entry_message.tpl
  - index_entry_msn.tpl
  - newentry_bbcodes.tpl
  - newentry_body.tpl
  - newentry_body_entry_success.tpl
  - newentry_smileys.tpl
  - newentry_user_notification.tpl
  - newentry_user_show_email.tpl
- readme.txt
- settings.php

1. admin = Enthält die Vorlagen für die Administration.
   • general_admin = Enthält Vorlagen für Dateien die überall in der Administration zu finden sind. Copyright Anzeige etc.
2. css = Enthält die Cascading Style Sheet Dateien, mit denen die Farben u.s.w. festgelegt werden.
   • black = Das CSS für die schwarze Version.
   • blue = Das CSS für die blaue Version.
   • …
3. general = Enthält Vorlagen für Dateien die überall auf den Hauptseiten zu finden sind. Copyright Anzeige etc.
4. js = JavaScript für die „overLIB“ Bibliothek.
5. main = Enthält alle Dateien die ein normaler Benutzer zu sehen bekommt.

Die Dateien selbst haben immer einen spezifischen Dateinamen. So gehören z.B. zur index.php alle Dateien die mit index beginnen. Es folgt ein Unterstrich und dann die Bezeichnung welchen Teil die Datei enthält. body ist z.B. das Grundgerüst mit HEADER und FOOTER, und bindet andere *.tpl Dateien ein. index_entry.tpl stellt nur einen einzigen Eintrag dar. index_entry_comment.tpl den Kommentar für einen Eintrag. Es ist nötig dies in verschiedene Dateien aufzuteilen, da diese Teile ja dynamisch eingebunden werden, wenn diese Information verfügbar ist. Beispiel:

index_body.tpl enthält den Platzhalter {TEMPLATE_ENTRIES}. Dieser wird ersetzt durch die Datei index_entry.tpl. Diese wiederum enthält den Platzhalter {TEMPLATE_ENTRY_COMMENT} der durch die index_entry_comment.tpl ersetzt wird. Wenn kein Kommentar verfügbar ist, dann wird der Platzhalter {TEMPLATE_ENTRY_COMMENT} einfach durch einen leeren String ersetzt, und es erscheint kein Kommentar unter dem Eintrag.

Um die Farben oder die Tabellenbreiten des Templates zu verändern, ist es nötig die benutzte CSS Datei zu bearbeiten. Eine CSS Datei enthält verschiedene Angaben, zu verschiedenen Klassen, die im Template benutzt werden. Eine Klasse wird im allgemeinen so definiert:

span.title {
	font-family: 'lucida console', verdana, arial, helvetica, sans-serif;
	font-size: 14px;
	color: #7F7F7F; }

Somit wird jeder Text der in einem <span> Tag mit der Klasse title

<span class="title">

erscheint, mit der Schriftart Lucida Console (falls verfügbar, wenn nicht wird die nächste in der Reihe genommen: verdana), der Schriftgröße 14 und der HTML Farbe #7F7F7F dargestellt.

Hier die wichtigsten CSS Attribute:

Ich empfehle die Seite http://www.css4you.de/. Dort wird sehr ausführlich erklärt was die einzelnen Attribute bedeuten, und was man damit alles anstellen kann. Sehr zu empfehlen ist der CSS Workshop für blutige Anfänger.

Hier eine „kleine“ Liste der wichtigsten verfügbaren Farben, um seinem Template die richtigen Farben zu geben. Vielen lieben Dank an http://mahopa.de/ für die freundliche Bereitstellung! :)

Um das Template zu verschiedenen Grafiksets kompatibel zu machen, muss folgendes beachtet werden. Grafiksets werden in dem Ordner “images“ im Hauptverzeichnis des Gästebuches in einem jeweils eigenem Ordner gespeichert. Um dem Template jetzt verschiedene Grafiksets zuweisen zu können, darf im Template nicht direkt auf die Grafiken verlinkt werden, sondern der Pfad muss den für die Datei bestimmten Platzhalter enthalten. Beispiel:

Die Datei index_entry_email.tpl enthält die Anzeige des eMail Symbols unter einem Eintrag. Das sieht so aus:

<a href="{ENTRY_EMAIL_PATH}"><img class="icon" src="{ENTRY_EMAIL_PIC}" alt="{LANG_EMAIL_OF}" title="{LANG_EMAIL_OF}" height="16" width="16"></a>

{ENTRY_EMAIL_PIC} wird hier durch den Pfad zum jeweils eingestellten Grafikset ersetzt. Es ist natürlich auch möglich hier direkt auf eine Grafik zu verlinken, dann hat eine Änderung des Grafiksets jedoch keine Auswirkung auf das Symbol. Somit wäre das Template nicht 100% kompatibel.

Was ist bei einem eigenen Grafikset zu beachten? Nun, eigentlich nicht viel. Die Grafiken müssen die selben Dateinamen haben wie die Originalgrafiken, und es muss in einem eigenen Ordner gespeichert werden. Sollte dann so aussehen:

-- images
  |-- default (mgbModern Grafikset)
  |-- blabla (Ihr Grafikset)
    |-- captchas
       - captchabg1.png
       - ...
    |-- smileys
       - smilley_angry.gif
       - ...
     - activate.png       
     - ...

Wenn Sie Ihr Grafikset gleich an das Template binden wollen, dann sollten Sie es gleich in der richtigen Ordnerstruktur packen. Ungefähr so:

-- images
  |-- blabla
-- templates
  |-- blabla

Sie müssen für das Template in der Datei „settings.php“ die sich im Verzeichnis des Templates befinden muss, eine Standard CSS Datei sowie ein Standard Grafikset festlegen. Es empfiehlt sich hier für das Grafikset den selben Namen zu wählen, wie für das Template. Den Namen des CSS Ordners sollten sie nach den Hauptfarben wählen. Ist Ihr Standard CSS in vielen Gelbtönen gehalten, dann nennen sie es z.B. „yellow“ oder „desert“. Beispiel:

define('TEMPLATE_DEFAULT_STYLE', 'yellow');
define('TEMPLATE_DEFAULT_ICONSET', 'blabla');

Wenn ihr Template keine eigenen Grafiken benutzt, sondern die des MGB Standardtemplates dann lassen Sie den Wert für TEMPLATE_DEFAULT_ICONSET auf „default“.

• Beachten Sie die Ordnerstruktur, und dass die Dateien die selben Namen wie die Vorlage haben.
• Studieren Sie den Code der Vorlage ein wenig. Sie werden sehen es ist gar nicht so schwer.
• Der Code Ihres Templates muss nicht 100%ig so sein wie der, der Vorlage. Sie können z.B. eigene Klassen für das CSS erstellen, solange Sie beachten dass Sie Ihrem HTML in den *.tpl Dateien auch die selben Klassen zuweisen.
• Wenn Sie nur die Farben anpassen wollen, dann erstellen Sie im Ordner “css“ einen eigenen Unterordner und verwenden Sie eine Kopie der originalen “style.css“ um damit zu experimentieren.
• Wenn Sie an Ihrem Template arbeiten, dann tun Sie das von Anfang an in einem eigenen Ordner. Erstellen Sie bevor Sie an der Vorlage herumschrauben eine Kopie davon, und arbeiten Sie damit. So können Sie immer wieder auf das Original zurückgreifen, sollte etwas schief gehen.
• Bei Fragen besuchen Sie das Forum.
• Wenn ich Ihr Template auf meiner Seite zum Download anbieten soll, dann müssen Sie es unter der GNU/GPL veröffentlichen. Anders ist eine offizielle Unterstützung von meiner Seite aus nicht möglich.

— mopzz 22/07/2007 20:58