2.3

From Wiki

1 MediaWiki-Optik (Logo und Skin)
2 Links und Quellen

MediaWiki-Optik (Logo und Skin)

Autor: Matthias Grote

Durch die Wiki-Installation hast Du ein MediaWiki [1] eingerichtet, dessen Optik nicht jeden fasziniert. Wenn Du willst, kannst Du das Aussehen dem eigenen Geschmack anpassen, indem Du zum Beispiel ein neues Logo oder eine neue Oberfläche (Skin [2]) wählst.

[edit]

Logo austauschen

Sicherlich sind Sonnenblumen schön, aber diese auf jedem Wiki immer als Logo [3] zu haben, ist auf die Dauer langweilig. Darüber hinaus bietet das Logo eine erste Orientierung und gibt einen Hinweis auf den Zweck des Wikis.

Deswegen solltest Du für jedes Wiki ein neues Logo anlegen. Hierzu musst Du ein Wiki-Administrator [4] sein und die Wiki-Dateien auf dem Server [5] ändern dürfen.

Ein Logo ist ein ganz normales Bild, das nicht größer als 160 x 160 Bildpunkte sein soll. Du kannst es mit einem Bildbearbeitungsprogramm erstellen und solltest es im PNG-Format [6] abspeichern.

Du kannst das Standard-Logo auf zwei Wegen ersetzen:

Entweder Du löscht das Original-Logo auf Deinem Webspace und lädst Dein Logo (dem Du den Namen wiki.png geben musst) in das Verzeichnis, in dem das Original war (Du ersetzt es also).
Oder Du lädst Dein Logo in einen beliebigen Ort im Internet und sagst Deinem MediaWiki, wo es dieses Logo findet.

Weg 1: Lösche auf Deinem Webspace im Unterordner skins/common/images die Datei wiki.png. Nenne dann Dein Logo auf Deinem Computer wiki.png. Lade es nun in den Ordner, in dem Du eben das Original-Logo gelöscht hast (skins/common/images).

Weg 2: Übertrage Deine Logo-Datei auf den Server. Der Ordner für das Logo ist der Unterordner skins/common/images des Wikis.

Anschließend musst Du das neue Bild, zum Beispiel NeuesLogo.png, in der Datei LocalSettings.php als neues Logo eintragen. Dazu wird die Zeile

$wgLogo = "$wgStylePath/common/images/wiki.png";

einfach durch

$wgLogo = "$wgStylePath/common/images/NeuesLogo.png";

ersetzt. Die Datei LocalSettings.php befindet sich in dem Wiki-Hauptordner auf dem Server. Dieser heißt bei dem Beispiel, das wir bei der Installation verwendet haben, wiki-handbuch.

Wenn sich das Wiki auf einem Web-Server [7] befindet, kannst Du die neue Logo-Datei zum Beispiel mit dem FTP-Programm [8] FileZilla [9] [10] hochladen, das bereits bei der Wiki-Installation beschrieben wurde.

[edit]

Skins hinzufügen

Skin [11] ist die Bezeichnung für die Benutzeroberfläche des Wikis. MediaWiki bringt bereits mehrere Skins mit, die der Nutzer in den persönlichen Einstellungen auswählen kann (siehe unten).

Auf dem Server [12] findest Du die zum Skin gehörenden Dateien und Ordner im Wiki-Unterordner skins. Wenn Dir die vorhandene Auswahl nicht reicht, kannst Du im Internet auf die Suche nach anderen Skins für den MediaWiki gehen und diese hinzufügen.

Eine neue Skin-Archivdatei musst Du zuerst auspacken, wobei Dir zum Beispiel das Programm 7-Zip [13] [14] hilft. Das neue Skin besteht zum Beispiel aus dem Ordner NeuesSkin, der Datei NeuesSkin.php und gegebenenfalls auch noch aus der Datei NeuesSkin.deps.php. Diese Dateien und Ordner speicherst Du auf dem Server im Wiki-Unterordner skins.

Wenn sich das Wiki auf einem Web-Server [15] befindet, kannst Du den Ordner und die Dateien des neuen Skins zum Beispiel mit dem FTP-Programm [16] FileZilla [17] [18] hochladen, das bereits bei der Wiki-Installation beschrieben wurde.

Eventuell muss auch die Datei LocalSettings.php geändert werden. Dabei wird zum Beispiel ein neuer Pfad für das Logo gesetzt. Im Idealfall stehen die notwendigen Änderungen in einer Info-Datei des Skins.

[edit]

Skin auswählen

Ein Skin kann über die persönlichen Einstellungen ausgewählt werden. Dazu klickst Du oder ein anderer angemeldeter Nutzer auf den Link Einstellungen in der ersten Zeile des Wikis und dann auf Skin. Die installierten Skins werden angezeigt, von denen Du eines anklicken kannst. Über Einstellungen speichern wird das Skin übernommen und das Wiki hat ein neues Aussehen.

Hinweis:
Nicht jedes Skin kann einfach so ausgewählt werden. Eventuell muss auch die Datei "LocalSettings.php" geändert werden. Dieses kann aber nur der Administrator tun, der auf dem Server Dateien ändern darf. Was genau geändert werden muss, steht im Idealfall in einer Info-Datei, die Du zusammen mit dem Skins herunterlädst.

[edit]

Skin voreinstellen

In der Datei LocalSettings.php kannst Du den Standard-Skin vorgeben, wenn Du der Wiki-Administrator [19] bist und die Datei auf dem Server ändern kannst. Dazu ersetzt Du zum Beispiel die Zeile

$wgDefaultSkin = 'monobook';

durch

$wgDefaultSkin = 'neuesskin';

Hinweis:
Auch wenn das neue Skin zum Beispiel "NeuesSkin" heißt, musst Du es in Kleinbuchstaben geschrieben eintragen: also "neuesskin". Ansonsten wird das Standardskin nicht erkannt und es erscheint eine schlecht formatierte Seite.
Ferner darf diese Zeile nicht durch das #-Zeichen deaktiviert sein. Wenn Änderungen am Bildschirm mal nicht sichtbar werden, kann dies daran liegen, dass Dein Browser lieber die alte Version des Wikis aus einem Speicher (Cache) lädt, anstatt ihn neu aus dem Internet zu laden. In diesm Fall musst Du den Cache leeren! Und so gehts: Im Browser die betreffende Seite aufrufen (also die, die eigentlich anders aussehen sollte als Du sie siehst) und an die URL hinten "?action=purge" anhängen (ohne Gänsefüßchen natürlich, aber mit Fragezeichen). Zum Beispiel: http://www.medienspielwiese.de/wiki/index.php/2.3#Skin_voreinstellen?action=purge

[edit]

Skin RilGrey 01

Um Dir den ganzen Vorgang zu verdeutlichen, sollst Du das Skin RilGrey 01 zu Deinem Wiki hinzufügen, es dann auswählen und als Standardskin setzen. Wir gehen dabei davon aus, dass sich das Wiki auf einem Web-Server [20] befindet. Außerdem musst Du Dateien auf dem Web-Server ändern können.

Zuerst lädst Du die Datei rilgrey_01-mw169-alpha01.zip aus dem Internet von http://demo.rilnet.org/wiki/RilGrey_01 herunter und entpackst sie anschließend mit 7-Zip [21] [22]. Der neue Ordner rilgrey_01-mw169-alpha01 erscheint. Die dort enthaltenen Dateien und den Ordner rilgrey_01 lädst Du nun mit FileZilla [23] [24] auf den Web-Server [25] in den Wiki-Unterordner skins hoch.

Wenn Dir das zu schnell ging, sieh bei der Installation nach, wo wir auf das Entpacken und Hochladen genauer eingegangen sind.

Skin mit FileZilla auf den Web-Server hochladen

Noch hat sich nichts verändert. Denn wenn Du und auf die Hauptseite des Wikis gehst und Dich anmeldest, ist dort noch immer das alte Skin MonoBook zu sehen.

Hauptseite mit Skin MonoBook

Jetzt fügst Du die folgenden Zeilen unten in die Datei LocalSettings.php über ?> ein:

#Skin
$wgDefaultSkin = 'rilgrey_01';
$wgStylePath        = "$wgScriptPath/skins";
$wgStyleDirectory   = "$IP/skins";
$wgLogo             = "$wgStylePath/rilgrey_01/logo-rilgrey_01.png";

Anschließend wählst Du über die persönlichen Einstellungen den neuen Skin RilGrey 01 aus und speicherst die Einstellung.

Auswählen des neuen Skins RilGrey 01

Wenn Du nun zur Hauptseite gehst, siehst Du das neue Skin RilGrey 01.

Hauptseite mit Skin RilGrey 01

Das wars!

[edit]

Skin sperren

Skins, die nicht von den Nutzern verwendet werden sollen, kannst Du sperren. Dazu musst Du die Datei LocalSettings.php auf dem Server ändern können. Trage in der Zeile

$wgSkipSkins = array("chick", "cologneblue", "myskin", "nostalgia", "simple", "standard");

die Skins ein, die Du sperren willst. Die Skins "chick", "cologneblue", "myskin", "nostalgia", "simple" und "standard" lassen sich nun von den Nutzern nicht auswählen. "standard" ist das Skin mit dem Namen Classic.

Aus: http://meta.wikimedia.org/wiki/Skins

[edit]

Skins selber machen

Anstatt im Internet auf die Suche nach neuen Skins zu gehen, die Dir gefallen, kann Du ein Skin auch selber schreiben. Am besten ist es, wenn Du dazu ein bestehendes Skin verwendest und modifizierst. Die aktuellen Skins basieren auf CSS [26], sodass der Seitenquelltext der PHP-Datei [27] des Skins nicht verändert werden muss, um ein anderes Aussehen zu erhalten. Die CSS-Dateien findest Du in dem Ordner zu dem entsprechenden Skin.

Um ein neues Skin zu kreieren, brauchst Du Kenntnisse in CSS [28]. Hilfe findest Du unter anderem auf den Seiten des Projekts SELFHTML http://www.selfhtml.org und http://de.selfhtml.org.

Hilfreiche Links für die Skin-Programmierung:

Skin-Programmierung (Englisch)
http://meta.wikimedia.org/wiki/User_styles

Schauseite für verschiedene Styles (Englisch)
http://meta.wikimedia.org/wiki/Gallery_of_user_styles

Skin Projekt (Englisch)
http://meta.wikimedia.org/wiki/Skin_projects

[edit]

Erzeugen eines Skins, das auf MonoBook basiert

Bezieht sich auf MediaWiki 1.6.8.

Angenommen, Du kannst Dateien auf dem Server ändern, auf dem sich Dein Wiki befindet und willst das neue Skin FooBar erstellen. Die nächsten Schritte sind dann:

1) Kopiere im Unterordner skins Deines Wikis die Datei MonoBook.php nach FooBar.php.

2) Erzeuge im Unterordner skins einen Ordner foobar. Kopiere den Inhalt des Ordners monobook nach foobar.

3) Bearbeite FooBar.php im Unterordner skins Deines Wikis.

3a) Suche die Codezeilen:

class SkinMonoBook extends SkinTemplate {
       /** Using monobook. */
       function initPage( &$out ) {
               SkinTemplate::initPage( $out );
               $this->skinname  = 'monobook';
               $this->stylename = 'monobook';
               $this->template  = 'MonoBookTemplate';
       }
}

Ersetze sie durch:

class SkinFooBar extends SkinTemplate {
       /** Using foobar. */
       function initPage( &$out ) {
               SkinTemplate::initPage( $out );
               $this->skinname  = 'foobar';
               $this->stylename = 'foobar';
               $this->template  = 'FooBarTemplate';
       }
}

3b) Suche die Zeile:

class MonoBookTemplate extends QuickTemplate {

Ersetze sie durch:

 class FooBarTemplate extends QuickTemplate {

3c) Suche die Zeile:

wfRunHooks( 'MonoBookTemplateToolboxEnd', array( &$this ) );

Ersetze sie durch:

wfRunHooks( 'FooBarTemplateToolboxEnd', array( &$this ) );

Jetzt kannst Du das neue Skin nutzen und verändern und es als Standardskin in die Datei LocalSettings.php eintragen.

Suche dazu in der Datei LocalSettings.php nach der Zeile:

$wgDefaultSkin = 'monobook';

Ersetze sie durch:

$wgDefaultSkin = 'foobar';

Hinweis:
Auch wenn das Skin "FooBar" heißt, musst Du es in Kleinbuchstaben geschrieben eintragen: also "foobar". Ansonsten wird das Standardskin nicht erkannt und es erscheint eine schlecht formatierte Seite.
Ferner darf diese Zeile nicht durch das #-Zeichen deaktiviert sein. Den Cache (Speicher) des Browsers [29] solltest Du leeren und die Seite neu laden.

Aus: http://meta.wikimedia.org/wiki/Skins

[edit]

Links und Quellen

Nefzger, Wolfgang (2007): Wiki-Wissen. In: PC Magazin. Kreativ 25. Für Einsteiger & Profis. PHP & MySQL. Poing: WEKA Computerzeitschriften-Verlag, S. 58-63

MediaWiki