#||
||
Auch verfügbar in ((../English/Themes English)), ((../Francophone/Themes Française)), ((../Russian/Temy Ðóññêèé @@ru))

Individuelle Optik erstellen | {{toc numerate=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/##.

===Mitgelieferte Layouts==
Die aktuelle Version kommt standardmäßig mit 4 verschiedenen Layouts:
  * **default:** das aktuelle Layout
  * **tabs:**
  * **coffee:**
  * **wakka:**

====Weitere Layouts==
#||
||Eine Übersichtsseite aller veröffentlichten Layouts mit Bildschirmabdrücken gibt es im englischen Bereich:
-> **((/Dev/Themes WackoThemes))** |%%(wacko wrapper=text wrapper_align=right) file:bluenatic_small.png --- ++((/Dev/Themes/Bluenatic Bluenatic)) von ((user:RobertVaeth Robert Vaeth))++%% ||
||#

====Installation von neuen Layouts==
Entpacke die Datei und kopiere den entpackten Ordner in das Verzeichnis: ##theme/##.
++Entferne ggf. die .htaccess Dateien aus den Unterverzeichnissen, falls keine Grafiken und kein CSS interpretiert werden)++

===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 Konfiguration)) geändert werden.

++**Groß-/Kleinschreibung beachten!**++

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.

===Eigenes Layout entwerfen==
====Unterseiten zum entwerfen eines Layouts==
  * ((!/entwerfen Entwerfen))
  * ((!/SelberErstellen Tutorial: Wie erstelle ich mein eigenes Layout))

====Inhalt der Layoutordner==
Die Dateien sind in folgender Weise aufgeteilt:
%%(wacko wrapper=box wrapper_width=300)
**theme/**
  * default/
    * appearance/
      * footer.php
      * footewordprocessor.php
      * footerprint.php
      * header.php
      * headerwordprocessor.php
      * headerprint.php
    * ((Layouts/CSS css/))
      * .htaccess
      * default.css
      * ((Layouts/CSS/WackoCss wacko.css))
      * wordprocessor.css
      * print.css
    * ((Layouts/Symbole icon/))
      * .htaccess
      * del.svg
      * file.svg
      * key.svg
      * lock.svg
      * mail.svg
      * print.svg
      * referer.svg
      * rename.svg
      * toolbar1.svg
      * toolbar2.svg
      * unvisibl.svg
      * visibl.svg
      * favicon.ico
      * web.svg
      * xml.svg
    * ((Lokalisierung lang/))
      * wacko.de.php
      * ...
    * .readme
%%
=====Die äußere Erscheinung==
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. ++Es kann mit der Kopf und Fußzeile eines Textverarbeitungs-Dokuments verglichen werden.++
  * ##**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)++

=====((!/Codefragmente Die Codefragmente))==
In die Kopf- und Fuß-Dateien können verschiedene Codefragmente eingefügt werden. Ein solches Codefragment erstellt dann zum Beispiel das Feld zur Suche.
Auf der Unterseite sind die einzelnen zur Verfügung stehenden Fragmente aufgeführt und beschrieben.

=====((Glossar/C/CSS CSS - Cascading Style Sheets))==
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.

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

  * ##**xml.svg**## - Referenzen auf RSS (Rich Site Summary)
  * ##**web.svg**## - Externe Verweise im Wiki
  * ##**mail.svg**## - Angabe einer 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**## - WackoWiki Icon
  * ...

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

=====Lang - Die Spracheinstellungen für das Design==
Die Sprachdateien zu den in der ((Lokalisierung 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##, wobei //xy// für die Sprache steht:

%%(php)<?
//Beispielinhalt der Datei:
$theme_translation = array(
  'TextSearchPage' => 'Seite suchen',
  'LoginPage' => 'Anmelden',
);
?>%%

Aufruf im Layout:
%%(php)<?php echo $this->_t('LoginPage'); ?>%%

====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 ((Glossar/W/WinMerge 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.

====Erfolgreich ein neues Layout erstellt?==
Wenn Du ein neues Layout erstellt hast und es auch funktioniert, dann ((https://wackowiki.org/bugs/ sende das neue Layout)) bitte an das ((/Org/Team 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.

===Fragen==
  * ((user:AntonG AntonG)): Ist es möglich, den Benutzern das Layout vorzugeben? D.h. dass diese nicht mehr die Möglichkeit haben, das Layout selbst zu ändern.
    * ((user:KuMe KuMe)): Ja, das ist für die nächste Version in Planung.
    * Es gibt eine simple Methode in R4.2, damit die Benutzer nicht mehr das Layout umstellen können: Einfach die restlichen Layout-Ordner (##theme/##) wegschieben. ((user:RobertVaeth RobertVaeth))

  * ((user:MrM MrM)): Ich müsste per Code (im Inhaltstext der jeweiligen Seite) eine zu ladende CSS-Source-Datei oder ein ganzes Theme eintrage bzw. auswählen können - d.h. wenn ich z.B. ~{{blauestheme}} schreibe, sollte eine blau.css in die template geladen werden (alternativ könnte ich auch ein ganzes theme "blau" anlegen, aber ersteres wäre mir lieber. Für Hilfe wäre ich unsagbar dankbar. Viele Grüße.

{{backlinks}}
((../Deutsch zurück zur Übersicht))

----
original is located at: ((/Doc/Deutsch/Layouts))