Loading...
 
Skip to main content
Translations
Deutsch (de)English (en)
1
Page actions
PDF Print Get a short URL Open in WebDAV

Themes anpassen

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.

  1. 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.
  2. 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.
  3. 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.
  4. Kopieren Sie das Standardtemplate oder andere Templatedateien Ihres Themes in das neue Themeverzeichnis.
  5. 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 smarty.php.net.

Smarty Templates mit dem Tiki Web Interface bearbeiten

SieheEdit 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.

  1. 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.)
  2. 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.
  3. Editieren Sie die Datei nun um Ihren eigenen Style zu erstellen. — Wählen Sie Schriftarten, Hintergrundfarben oder die Eigenschaften von Hypertextlinks aus.
  4. 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 Question.

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.

History Source
Slideshow