History: Themes anpassen

            !Themes anpassen
{DIV(float=>right,width=>67%,bg=>lightyellow)}{DIV}
Die Themes in TikiWiki werden von drei Dateitypen gesteuert, die das HTML-Layout bestimmen -- __.tpl-Dateien__, die den HTML-Code und die Steuerung enthalten (gemeinsam mit den PHP Dateien), __.css-Dateien__ Cascading Style Sheets beinhalten das Styling der Html Elemente, und __Bilder__, also die grafischen Dateien (.png, .jpg, .gif).

Eine Übersicht der bereits bestehenden Themes finden Sie unter ((themes))

!!Wie erstellt man ein individuelles Theme ?
TikiWiki Themes steuern sowohl das Layout als auch die Struktur einer Site ''und'' sein gesamtes Aussehen. Sie können die Posistion von Elementen auf Ihrer Webseite verändern (hinzufügen oder entfernen von Komponenten) ''und'' Sie können stilistische Elemente anpassen wie die Schriftart oder die Farbe.
So können Sie, wenn Sie ein neues Theme erstellen oder anpassen, folgende Optionen definieren:

* Das Applikationslayout (Grundstruktur)
* Die Darstellung der Elemente im Layout (Style)

!! Verzeichnis der Themedateien
Um ein Theme zu erstellen, müssen Sie die Dateien und Verzeichnisse in die Ordner ''Styles'' und ''Templates'' im Hauptverzeichnis stellen.
# Wählen Sie einen Namen für das Theme. Überprüfen Sie im Verezichnis ''Styles'', dass dieser Name nicht schon existiert. 
**In diesem Beispiel werden wir ein Theme erstellen mit dem Namen ''screensite''.
# Zuerst erstellen Sie im Verzeichnis ''styles'' eine .css-Datei mit dem Namen Ihres Themes. Wenn Sie auf Basis eines bereits bestehenden Themes arbeiten möchten, dann kopieren Sie dessen .css-Datei und benennen Sie sie um. Alternativ können Sie mit der CSS- Datei unter [http://themes.tiki.org/tiki-index.php?page=Tikiwiki2_CSS_selectors] beginnen, die (hoffentlich alle, aber zumindest) die meisten aktuellen CSS Selektoren enthält. 
# Wenn Sie Änderungen durchführen wollen, die sich mit CSS allein nicht mehr bewerkstelligen lassen, dann brauchen Sie spezifische Templates. Richten Sie dazu ein Unterverzeichnis im Ordner ''templates/styles'' ein mit dem Namen Ihres neuen Themes.
** Zum Beispiel: ''templates/styles/screensite''. Allerdings ist es nicht zu empfehlen eigene Templates zu erstellen, weil so ein Update Ihrer TikiWiki-Installation erschwert wird. 
# Kopieren Sie das Standardtemplate oder andere Templatedateien Ihres Themes in das neue Themeverzeichnis. 
# Für weitere Informationen siehe [http://themes.tiki.org].

Nun ist Ihr neues Theme erstellt. Wenn Sie auf __Benutzereinstellungen__ gehen und dort in Drop-Down-Menü __Theme__ nachsehen, werden Sie Ihr Theme aufgelistet finden (z. Bsp. ''screensite.css''). Noch sieht Ihr neues Theme natürlich so aus wie das, das Sie als Grundlage herangezogen haben, denn es wurden ja noch keine Änderungen vorgenommen. 

!! Template-Dateien anpassen 
Template Dateien sind in der Smarty Template Sprache geschrieben. 
Siehe [http://smarty.php.net/|smarty.php.net].

!!! Smarty Templates mit dem Tiki Web Interface bearbeiten
Siehe((Edit Templates))

!! Das TikiWiki Layout 
Um das Layout mit Ihrem eigenen Theme anzupassen, editieren Sie die CSS-Datei und alle Template-Dateien die Sie in den neuen Unterordner ''templates/styles/Ihrtheme'' kopiert haben. Sie können Bilder hinzufügen, die Größe und Position von Elementen ändern, Spalten definieren und vieles mehr.   
Siehe ((Theme layout schema)).

Die spezifischen Template-Dateien können unterschiedlich sein, je nachdem welches Theme Sie vorausgewählt haben. Einige gemeinsam genutzte Dateien sind: 
* ''tiki.tpl'': das Haupttemplate, das das Layout der gesamten anwendung definiert.
* ''tiki-show_page.tpl'': Diese Datei zeigt den ''wiki'' Inhalt in Zentrum der Seite.  (ersetzt $mid_data in tiki.tpl). Analog dazu gibt es zahlreiche andere Template-Dateien, deren Name bereits Auskunft über ihre Funktion gibt, wie z. Bsp.: tiki-view_blog_post.tpl. 
* ''error.tpl'': zeigt Fehler an (nur bis TikiWiki Version 2.0) 
* ''header.tpl'': beinhaltet den HTML Abschnitt head.
* ''tiki-site_header.tpl'': "Look and Feel" Seite Überschrift.
* ''tiki-top_bar.tpl'': abhängig vom gewählten Theme, enthält aber in der Regel die obere Navigationbsleiste usw. 
* ''tiki-bot_bar.tpl'': Icons in der unteren Leiste.
* Templates-Dateien mit den Namen ''tiki-print.tpl'' o.ä. werden für Druckversionen einer Seite eingesetzt. Sie werden daher im Allgemeinen nicht verändert.  

Sie sehen also, dass es ziemlich einfach ist das Layout der gesamten TikiWiki-Anwendung zu ändern. Sie brauchen nur das Stylesheet entsprechend anzupassen oder ein, zwei Template-Dateien. 

!!Templates überschreiben. 
Die Standardtemplatedateien liegen im 
''templates'' Verzeichnis und seinen Unterverzeichnissen, z.Bsp.:
* ''templates/modules'

Wie wir oben gesehen haben, liegt die Template-Datei für ein individuelles Theme in einem Verzeichnis namens 
 ''templates/styles/screensite'' oder ähnliches. 

Diese Technik funktioniert auch mit den Dateien in den Unterverzeichnissen. Wenn Sie zum Beispiel das Anwendungsmenü in Ihrem Theme ändern wollen, kopieren Sie die Datei mod-application_menu.tpl von
* ''templates/modules/mod-application_menu.tpl''
nach
* ''templates/styles/custom_theme_name/modules/mod-application_menu.tpl''.

Wenn Sie ein Theme erstellen, können Sie jede Template-Datei überschreiben. Dazu legen Sie einfach eine geänderte Datei in das Verzeichnis ''templates/styles/screensite'' oder entsprechend einem seiner Unterverzeichnisse.

(Ein Theme, dessen Name diese Zeichen enthält hat besondere Eigenschaften. Siehe unten 'Mehrere .css in einem Template-Satz verwenden'.)

Wenn wir zum Beispiel die Forenliste in unserem ''screensite'' Theme ändern möchten, und zwar mehr als es mit CSS möglich ist, dann kopieren wir die Datei ''tiki-forums.tpl'' von
* ''templates/tiki-forums.tpl''
nach
* ''templates/styles/screensite/tiki-forums.tpl''

Nun können wir die neue verschobene Kopie der Datei bearbeiten. 

TikiWki ersetzt alle Dateien, die sich im Standardverzeichnis befinden, durch die gleichen in Ihrem individuellen Theme-Verzeichnis. 


!! Verschiedene Themes mit einem gemeinsamen individuellen Templatesatz

Wenn Sie möchten, dass mehr al ein Theme auf ein gemeinsames Templateset zugreift, können sie das erreichen in dem Sie die verschiedenen Themes auf eine bestimmte Weise benennen. Der erste Teil des Themenamens ist der des Templates, dann folgt ein Bindestich und der zweite Namensteil wird dann individuell für das Theme vergeben. Zum Beispiel nutzen die Themes 
"screensite-gold" und "screensite-silver" beide die Templates aus dem Verzeichns ''templates/styles/screensite''. Das ist günstig, wenn Sie geringfügige Änderungen am Style unterschiedlicher Bereiche oder zwischen Multitikis bewirken wollen.  

!! Darstellung 
Die Darstellung der Elemente, der visuelle Stil Ihres Themes wird mittels CSS (Cascading Style Sheets) realisiert.
Daher ist der nächste Schritt um Ihr eigenes Theme zu erstellen, eine CSS-Datei dafür anzulegen.  

^W3C unterstützte Tutorials und andere Tools um die CSS-Grundlagen zu lernen finden Sie hier: [http://www.w3.org/Style/CSS].^

# Beginnen Sie mit dem Stylesheet unter [http://themes.tiki.org/Tikiwiki2_CSS_selectors] für ein Theme, das die  *litecss Layout Methode  verwendet(üblich in TikiWiki 2 und Standard in TikiWiki 3), oder wählen Sie ein bestehendes Theme und verwenden Sie seine CSS Dateien aus dem Ordner ''styles''.  Bitte beachten Sie, dass sich die CSS-Dateien  __nicht__  im  ''templates'' Verzeichnisbaum befinden.  In der Standard TikiWiki_Installation gibt es ''zwei'' Verzeichnisse mit dem Namen ''styles'' unter dem Tiki-Wurzelverezichnis. 
** ''styles'' (für CSS Dateien)
** ''templates/styles'' (für die Unterverzeichnisse individueller Themes, in die Sie Ihre eigenen Template-Dateien legen sollten, so wie wir es oben getan haben.)
# Kopieren Sie die CSS-Datei, benennen Sie sie entsprechend Ihrem Themenamen um und speichern Sie sie im ''styles'' Verzeichnis gemeinsam mit allen anderen CSS Dateien.  Zum Beispiel unter ''screensite.css''.
# Editieren Sie die Datei nun um Ihren eigenen Style zu erstellen. -- Wählen Sie Schriftarten, Hintergrundfarben oder die Eigenschaften von Hypertextlinks aus. 
# Falls Sie Ihrem Style Bilder hinzufügen wollen, ist es zweckmäßig wenn Sie ein neues Unterverzeichnis mit dem namen Ihres Themes dafür einrichten unterhalb des ''styles'' Verzeichnisses.
**Zum Beispiel ''styles/screensite''

!! Überschreiben globaler zweckgebundener CSS Dateien 
In Tikiwiki>=3.0, bedinden sich einige CSS-Dateien in dem Verezichnis ''TIKI_ROOT/css'', zum Beispiel, calendar.css (für Kalender) oder cssmenu.css o.ä. (für CSS Menüs). Diese können überschrieben werden, in dem Sie eine entsprechende Datei in dem Verezichnis It is possible to override them by creating the file in styles/Ihr_style/css anlegen.

!! Theme Optionen 
''(ab Version 3.0)''

Themeoptionen ermöglichen Variationen eines Themes, zum Beispiel das Ändern von Farben, der Spaltenbreite oder andere Details. Die CSS Dateien der Theme Optionen (soweit vorhanden) befinden sich im Verzeichnis __styles/themename/options__. Die Dateien können irgendwie benannt sein, aber maximal eine ist zu einem bestimmten Zeitpunkt aktiv und überschreibt so die Anweisungen der Haupt-CSS-Datei.


!!Überschreiben von Icons
In Tikiwiki>=2.0 ist das teilweise möglich. Man kann nur solche Icons überschreiben, die sich in den Smarty Templates befinden mit der Smarty Funktion {icon}.

Die Icon-Datei muss im   ''styles/Ihr_style'' Verzeichnis liegen. 

Wenn Sie zum Beispiel img/icons/module.png und img/icons/omodule.png überschreiben möchten (die beiden Icons für das Modulflipping), stellen Sie die zu verwendenden Bilder in das Verzeichnis ''styles/Ihre_Domain/Ihr_style/img/icons''.
* ''Ihre_domain'' muss dabei nur verwendet werden, wenn Sie in einer Multitiki Umgebung arbeiten. 
* ''Ihr_style'' ist ein Unterverzeichnis Ihres aktuellen Styles.  - wenn Ihr aktueller Style  my_look-2010.css ist, dann muss Ihr_style s my_look sein (Der Teil nach dem Bindestrich wird als Variante aufgefasst.)
* Die neuen Icon-Bilder müssen in der gleichen Pixelgröße sein wie die im Template festgelegten. (Standard: 16x16).

^Since you can change the CSS file and you can override any template your themes can make your Tiki site look like anything you want. The only limit is your imagination.^