Auch verfügbar in English, Español, Française, Русский , 简体中文

1. Allgemeines über Layouts

In WackoWiki gibt es die Möglichkeit, um mit Hilfe von eigenen HTML- und CSS-Dateien das Erscheinungsbild (fast) nach Belieben zu ändern. Diese sogenannten Layouts, auch Erscheinungsbild oder Oberflächendesign genannt, befinden sich in den Unterordner theme/.

2. Was sind Themen

WackoWiki erlaubt es jedem, das Aussehen komplett zu verändern, ohne den PHP-Quellcode von WackoWiki zu ändern - dies erfolgt mit den im Themen-Verzeichnis gespeicherten Dateien.

Die Themen definieren das Aussehen aller Seiten in der Installation und können durch Hinzufügen (oder Abändern) der Konfiguration installiert werden.

Die Distribution kommt mit dem Default-Thema, welches man in der WackoWiki Installation sehen kann.

3. Eigene Themen erstellen

Wenn die Installation angepasst werden soll, ist es am besten, ein neues Thema zu erstellen.

Ein neues Thema erstellt man am besten, indem man das alte Thema in ein neues Verzeichnis kopiert und die kopierten Dateien sorgfältig bearbeitet.

3.1. Weitere Layouts

Eine Übersichtsseite aller veröffentlichten Layouts mit Bildschirmabdrücken gibt es im englischen Bereich:
-> WackoThemes

3.2. Installation von neuen Layouts

Entpacke die Datei und kopiere den entpackten Ordner in das Verzeichnis: theme/.

4. Default-Layout ändern

Standardmäßig ist das default-Layout ausgewählt, das man als Gast und als angemeldeter Benutzer sieht. Das kann in der Konfiguration geändert werden.

Zudem hat jeder registrierte Benutzer die Möglichkeit, in seinen Einstellungen das Layout zu ändern. Dieses wirkt sich allerdings nur auf seine persönliche Ansicht des Wikis aus.

5. Eigenes Layout entwerfen

5.1. Unterseiten zum Entwerfen eines Layouts

• Usage of Template Engine
• Pulls, Escaper and Filters
• Entwerfen

5.2. Inhalt der Layoutordner

Die Dateien sind in folgender Weise aufgeteilt:

5.2.1. Appearance

wird durch die .php-Dateien im Layout-Unterordner theme/neues_layout/appearance/ festgelegt, welche den Kopf und den Fuß eines Wiki-Dokuments am Ende jeder Seite beschreiben, sprich das Layout um den selbst geschriebenen Inhalt.

• header.php - Der Kopf jeder Seite. (Name der Seite, und die Lesezeichen sind gewöhnlich dort platziert)
• footer.php - Der Fuß (das Ende) jeder Seite. (Links zum Editieren und andere Angaben sind in der Regel dort untergebracht).
• headerprint.php und footerprint.php - Kopf- und Fußzeile für den Ausdruck (das Layout ist dafür vereinfacht)
• headerwordprocessor.php und footerwordprocessor.php - Kopf- und Fußzeile für LibreOffice (ebenfalls sehr einfach gehaltenes Layout)

5.2.2. CSS

Die .css-Dateien befinden sich im Layout-Unterordner theme/neues_layout/css/. Diese sind von Layout zu Layout sehr unterschiedlich aufgebaut und definieren teilweise auch ganz unterschiedliche Seitenbereiche.
Beim Layout default wird in der .css-Datei vorzugsweise das Aussehen von Text und Links festgelegt. Die Formatierung wird über die verschiedenen Klassen (class="name" in der HTML Ausgabe und .name in der CSS) gesteuert.
Bei den Layouts tabs und mambo sind diese Dateien weitaus größer und komplexer, da hier nicht nur Textformatierungen, sondern auch das Aussehen von einzelnen Tabellen oder weiteren Seitenbereichen festgelegt sind.

5.2.3. Icons

im Ordner theme/neues_layout/icon/ eines jedes Layouts werden vom System benutzt, um bestimmte Informationen vereinheitlicht hervorzuheben. Man kann die standardmäßig verwendeten Piktogramme hier ansehen.

• xml.svg - RSS
• web.svg - Externe Verweise im Wiki
• mail.svg - E-Mail-Adresse
• file.svg - Link auf eine Datei (z.B. mit der Endung .zip o.ä.)
• lock.svg - Verweis auf eine Seite, welche nicht angesehen kann (da dies vom Besitzer/Admin nicht gestattet ist)
• key.svg - Verweis auf eine Seite, welche nur eingeloggte Besucher ansehen können
• favicon.ico - Wiki Icon
• ...

Natürlich können diese Grafiken gegen eigene ersetzt werden.

5.2.4. Lang - Die Spracheinstellungen für das Design

Die Sprachdateien zu den in der Lokalisierung beschriebenen Sprachen befinden sich im Ordner lang/.
Zusätzliche neue Wortgruppen, die du in dem neuen Layout benutzen willst, müssen im Unterordner theme/neues_layout/lang/ gespeichert sein. Der Name der Datei lautet wacko.xy.lang.php, wobei xy für die Sprache steht:

<?
//Beispielinhalt der Datei:
$theme_translation = [
  'TextSearchPage' => 'Seite suchen',
  'LoginPage' => 'Anmelden',
];
?>
	

Aufruf im Layout:

<?php echo $this->_t('LoginPage'); ?>
	

...Template

[ ' _t: LoginPage ' ]	

5.2.5. Konfiguration

In der Theme-Konfigurationsdatei lassen sich darüber hinaus eigene Konfigurationsoptionen festzulegen und vorhandene überschreiben.

lang/wacko.all.php

<?php
// theme options =========
$this->db->revisions_hide_cancel = 1;
$this->db->site_desc  = 'My Theme for WackoWiki';
$this->db->footer_inside = 0;

// ============================
$theme_translation = [
    'EditIcon' => '...',
    '' => '',
];
	

5.3. WackoWiki upgraden

Wenn Du den Ratschlag befolgt hast, ein neues Layout in einem neuen Ordner zu erstellen, anstatt eines der standardmäßigen bestehenden Layouts zu überschreiben, dann werden keine größeren Komplikationen auftreten. Nach der Aktualisierung der Skripte wird Wacko mit Ihrem neuen Layout wie früher funktionieren. Es muss bei Änderungen oder Erweiterungen des CSS möglicherweise das eigene CSS um die neuen Erweiterungen ergänzt werden.

Anders sieht es aus, wenn du das eigene Layout in eines der Standard-Layouts eingefügt habt bzw. ein bestehendes Layout an deine Bedürfnisse angepasst habt. Hierfür gibt es für Windows WinMerge, mit dem ein Text auf Veränderungen untersucht und ergänzt werden kann. Linux/*nix können mit den mitgelieferten Programmen z.B. emacs oder Meld das Problem lösen. Eine einfachere Möglichkeit ist, den alten Ordner mit dem neu erstellten zu ersetzen.

5.4. Erfolgreich ein neues Layout erstellt?

Wenn Du ein neues Layout erstellt hast und es auch funktioniert, dann sende das neue Layout bitte an das WackoTeam. Mit hoher Wahrscheinlichkeit wird dein Design auf diesen Seiten veröffentlicht oder zu der nächsten Version hinzugefügt. Schon im voraus Danke dafür.