Schritt-für-Schritt Anleitung

1. Im Basisverzeichnis Ihrer Anwendung finden Sie ein Verzeichnis mit dem Namen "skins/" in diesem Verzeichnis finden Sie alle derzeit installierten Skins.
2. Um einen neuen Skin anzulegen kopieren Sie zunächst den Inhalt des Verzeichnisses "default/" inklusive seiner Unterverzeichnisse in ein neues Verzeichnis mit dem Namen Ihres Skins. Zum Beispiel "skins/meinskin/".
3. Öffnen Sie die Datei "index.html" in einem Webeditor Ihrer Wahl. Sie können dazu auch Notepad bzw. unter Unix/Linux Emacs verwenden.
4. Passen Sie Datei Ihren Wünschen an und speichern Sie Ihre Änderungen ab.
5. Abschließend müssen Sie eine Konfigurationsdatei für Ihren Skin erstellen. Diese Datei enthält den Namen Ihres Skins, eine Beschreibung zum Autor. Sie können dazu die Datei "skins/default.config" als Vorlage verwenden. Kopieren Sie diese Datei unter einem neuen Namen. Zum Beispiel "skins/meinskin.config".
6. Diese Skindatei können Sie mit einem beliebigen Texteditor editieren. Öffnen Sie die Datei, ändern Sie die Angaben so, wie gewünscht. Achten Sie darauf, dass die Dateipfade korrekt sind. Speichern Sie anschließend Ihre Änderungen.

Konfiguration von Skins

Im Folgenden ein einfaches Beispiel.

<SKIN_INFO>
    <NAME>mein Skin</NAME>
    <DESCRIPTION>das ist eine Beschreibung meines Skins</DESCRIPTION>
    <AUTHOR>mein Name</AUTHOR>
    <CONTACT>meine Webseite</CONTACT>
    <LOGO>%SKINDIR%mein_skin/data/preview.gif</LOGO>
    <DIRECTORY>mein_skin/</DIRECTORY>
</SKIN_INFO>

Die Syntax ist weitgehend selbsterklärend. Die Felder "Name", "Description" (Beschreibung), "Author" (Autor) und "Contact" (Kontakt) sind Freitext. Für das Feld "Name" können Sie sich einen beliebigen Namen ausdenken, der Ihren Skin beschreibt. Ebenso beliebig ist das Feld "Description" (Beschreibung). Achten Sie darauf, dass als Whitespace nur Leerzeichen erlaubt sind. Sie können einen Zeilenumbruch bei Bedarf einfügen, indem Sie den Text "[br]" verwenden. Das Feld "Author" (Autor) sollte Ihren Namen enthalten und das Feld "Contact" (Kontakt) sinnvollerweise eine Mail- oder Internetadresse, über welche man Sie erreichen und/oder Updates downloaden kann.

Das Feld "Logo" gibt eine Vorschaugrafik an. Der Platzhalter %SKINDIR% bezieht sich auf das Verzeichnis, in welchem die Skins gespeichert sind und sollte stets angegeben werden. Die Grafik sollte vorzugsweise im GIF-, PNG- oder JPEG-Format gespeichert sein und etwa 300x300 Pixel groß sein.

Das Feld "Directory" muss stets angegeben werden. Es gibt an in welchem Verzeichnis der Skin gespeichert ist.

Konfiguration von Templates

Im Folgenden ein einfaches Beispiel.

<MY_TEMPLATE>
    <FILE>template.html</FILE>
    <STYLE>
        <0>style/default.css</0>
        <1>foo1/foo2.css</1>
        <MEIN_CSS>foo3/foo4.css</MEIN_CSS>
    </STYLE>
    <SCRIPT>
        <0>foo5/foo6.js</0>
        <MEIN_SCRIPT>foo7/foo8.js</MEIN_SCRIPT>
    </SCRIPT>
    <LANGUAGE>
        <0>guestbook</0>
        <1>admin</1>
    </LANGUAGE>
</MY_TEMPLATE>

Beachten Sie, dass "MY_TEMPLATE" als Identifier fungiert, welcher das Template identifiziert. Sie können diese Id in den Konfigurationsdateien Ihrer Plugins verwenden, um auf das Template zu verweisen. Der Text kann beliebig gewählt werden. Achten Sie jedoch darauf, dass die Id keine Sonderzeichen oder Leerzeichen enthält, mit einem Buchstaben beginnt und über die gesamte Anwendung hinweg eindeutig ist. Groß- und Kleinschreibung spielt keine Rolle.

Es gibt 4 Felder: "File", "Style", "Script" und "Language". Das Feld "File" gibt den Dateinamen an. Die restlichen Felder sind optional und dienen der Automatisierung.

Das Feld "Language" enthält Verweise auf eine oder mehrere Dateien, welche die Sprachinformationen für dieses Template enthalten. Beispielsweise bezieht sich der Wert "guestbook" auf die Datei "languages/XX/guestbook.config", wobei der Text "XX" automatisch vom System durch die vom Nutzer gewählte Sprache ersetzt wird. Zum Beispiel "de" für Deutsch beziehungsweise "en" für Englisch.

Das Feld "Style" kann mehrere Verweise auf Stylesheets enthalten. Ebenso enthält das Feld "Script" einen oder mehrere Verweise auf JavaScript-Dateien. Die angegebenen Dateien werden jeweils automatisch eingebunden, wenn das Template aufgerufen wird.

Hinweis: Ist in einem Skin ein erforderliches Template nicht definiert oder sind Eigenschaften dieses Templates ("Styles", "Script", "Languages") nicht erneut erklärt, so fällt das Programm automatisch auf den "Default"-Skin zurück.

Dies geschieht wie folgt.

1. Fehlt im Skin ein Template, werden die Default-Einstellungen komplett verwendet.
2. Existiert das Template, aber beispielsweise "Style" ist nicht definiert, dann wird dieser mit der "Style"-Definition des gleichnamigen Templates im Default-Skin überschrieben. Für "Language" und "Script" gilt dies analog.
3. Existiert das Template und die Eigenschaft ist definiert, dann werden die definierten Eigenschaften mit denen des Default-Skins zusammengeführt.
   Dabei geht das Programm wie folgt vor:
   • Alle numerischen Einträge werden stets angehängt. Zum Beispiel: die Einträge STYLE.0, STYLE.1 usw. aus dem Default-Skin werden übernommen und die Einträge STYLE.0, STYLE.1, STYLE.2 usw. aus dem neuen Skin werden an die Liste angehängt.
   • Konkret benannte Einträge, wie zum Beispiel STYLE.MEIN_CSS aus dem Default-Skin, werden durch gleichnamige Einträge im neuen Skin ersetzt.

Dieses Verhalten mag zunächst unlogisch erscheinen, hat jedoch einen durchaus einen tieferen Sinn. Es erlaubt einzelne Stylesheets oder Scripts in einem neu erstellten Skin ganz gezielt auszutauschen. Gleichzeitig gestattet es aber auch einzelne Stylesheets oder Scripts von diesem Mechanismus auszuschließen. Beide Variante kommen vor und haben ihre Einsatzgebiete.

Ein weiteres Beispiel zur Illustration dieses Verhaltens. Die folgende Definition tauscht für das Template "MY_TEMPLATE" nur die CSS-Datei "MEIN_CSS" aus dem Default-Skin durch eine andere aus. Alle anderen Einstellungen bleiben unverändert.

<MY_TEMPLATE>
    <STYLE>
        <MEIN_CSS>foo/bar.css</MEIN_CSS>
    </STYLE>
</MY_TEMPLATE>

Wie Sie in diesem Beispiel sehen, wird keine neue HTML-Vorlage festgelegt, sondern es wird wieder die Vorlage des Default-Skin verwendet. Das heißt: es ist nicht erforderlich die HTML-Vorlage aus dem Default-Skin in den neuen Skin zu kopieren, oder zu editieren um ein neues Layout zu erzeugen. Dies vermeidet unnötige Redundanz und erleichtert Ihnen die Pflege Ihres HTML-Codes.

* "erforderlich" meint in diesem Fall "ungleich NULL"