Tutorial: Wie erstelle ich mein eigenes Layout/Theme

1. Einleitung

Diese Seite soll auf eine einfach Art und Weise beschreiben wie jeder, der sich ein bisschen (lieber auch ein bisschen mehr) mit HTML auskennt und WackoWiki an seine Seite anpassen möchte, schnell zu einem Ergebnis kommen kann.
Dieses ist kein "So geht es und alles andere ist doof". Vielmehr versuche ich mit minimalen Aufwand der Seite eine andere Optik zu geben.
Falls du Anmerkungen zu dieser Seite hast, füge diese bitte den Diskussionen zu oder editierte einfach die Seite.


2. Voraussetzungen

  • laufende Basisinstallation von R4.2 (auf diese bezieht sich zur Zeit dieses Anleitung)
  • HTML Editor – Hardcore Coder nehmen Notepad oder vgl. Texteditor, WYSIWYG Editoren sind aber später sehr von Vorteil bei CSS Anpassungen.
  • Firefox mit der Erweiterung Web Developer Toolbar und FireBug kann von Hilfe sein.
  • 1 – 4 Stunden Zeit (ohne HTML und Grafikdesign) und je nach Kenntnisstand.

3. Schritt 1: HTML coding

Falls du noch kein Design hast, erstelle eine HTML Seite. Am besten in HTML 5 und mit einem guten/ sauberen Quelltext, der in jedem Browser gleich dargestellt wird. Am besten ein div Aufbau mit entsprechenden Verschachtelungen.
Zur späteren Anpassung des Designs über CSS, gib jedem div eine eindeutige und einzigartige id. Der Einsatz von Id's hat sich bei mir bewährt, weil der Wacko Code mit Klassen arbeitet. So kannst du später genau unterscheiden, was vorgegeben ist und was du selbst gemacht hat. So kannst du später schneller und einfacher Fehler finden und beseitigen.


Wenn du die Datei noch erstellen musst, füge der HTML Datei gleich entsprechende Platzhalter für die verschiedenen Wackoabschnitte ein. So kannst du später bei Problemen die Stelle noch schneller wieder finden und auch schon im Vorfeld die Formatierung testen.
Beispiel

<div id="content">
  <!-- start content -->Dieses ist der Platzhalter für den Content mit der id="content"<!-- end content -->
</div>

Ob in der HTML Datei Grafiken was zu suchen haben, ist Geschmacks Sache. Besser ist es diese, wenn sie für das Design der Seite ausschlaggebend sind, über die Style- Definition einzufügen. (Grund siehe Design ohne Tabellen )

4. Schritt 2: kopieren und speichern

Lege im /theme Ordner deiner Wacko Installation einen neuen Ordner an und kopiere den gesamten Inhalt des default Ordners dort hinein. Der Name des Ordners wird später der Name deines Themes.
Lege zusätzlich den Unterordner images an. Hier werden alle für das Design der Seite benötigten Grafiken gespeichert.
Speichere die im Schritt 1 erstelle HTML Datei in dem Ordner /appearance unter dem Namen design.php.

5. Schritt 3: CSS erstellen

Um die Datei design.php nun in eine Form zu bringen, leg eine CSS Datei im entsprechenden Unterordner an und verlinke binde/ verlinke diese mit der HTML Datei.
Beispiel

<link rel="stylesheet" href="../css/wackotest.css" />

Füge alle in der HTML Datei angezogenen id's erst blanko in dieser CSS Datei der Reihe nach auf. Zu diesem Zeitpunkt ist das am übersichtlichsten und so wird keine vergessen.
Fülle im Anschluss die einzelnen ID's mit Style Definitionen und beobachte immer wieder deine design.php ob auch der gewünschte Effekt eintritt.
Beispiel

#content {
  color = #001100;
} 

Der Übersicht wegen ist eine Kommentierung der einzelnen ID's sinnvoll. So vermeidest du nach einiger Zeit, nach einem harten Wochenende bspw., dich komplett neu einzuarbeiten.

6. Schritt 4: Code einfügen

Kopiere die einzelnen Elemente auch Codefragmente genannt an die entsprechenden Stellen in deine Datei. Du solltest keinen vergessen, wenn du den vollen Funktionsumfang deines WackoWikis weiterhin nutzen möchtest.
Natürlich kannst du einzelne Fragmente, wie zum Beispiel Drucken, weglassen, wenn diese Funktion nicht zur Verfügung stehen soll. Wenn du Drucken anbieten möchtest, müssen jedoch auch die beiden Dateien headerprint.php und footerprint.php im Unterordner appearance vorhanden sein.
Ändere den Link zu deiner eigenen CSS Datei wie folgt ab:


<link rel="stylesheet" href="<?php echo $this->config['theme_url']; ?>css/wackotest.css" />

7. Schritt 5: Teilen

Jetzt fehlt noch der letzte Teil zu einem lauffähigem Wacko. Der Platz für den eigentlichen Inhalt (wie diesem Text). Für diesen gibt es keinen PHP Code oder vergleichbares. Dieser Text wird zwischen der Datei header.php und footer.php eingefügt.
Daher musst du deine Seite nun in zwei Teile gliedern. Den oberen Kopfteil (header), der genau bis zu start des Textes gehen soll und den Fußteil (footer), der genau hinter dem Text anfängt.
Es kann also sein (muss fast sogar sein), dass der header mit 

<div id=“content“>
endet und der footer mit 
</div>
anfängt. Nur so wäre der Tag wieder komplett und geschlossen.


Wichtig: Der footer darf nicht mit </body> und </html> enden. Diese werden vom dem Template Script automatisch erstellt und dürfen nicht in der footer.php enthalten sein.

8. Schritt 6: CSS ändern

Dieses ist von der benötigten Zeit und Arbeit wohl der längste und aufwändigste Schritt.
Öffne dein Wacko mit Firefox und lass dir mit der Erweiterung "Web Developer Toolbar" den CSS Code in einer Seitenleiste anzeigen.
Aktiviere zusätzlich die Display Element Information . Hierdurch werden die Informationen zu den einzelnen Elementen deiner Seite angezeigt, wenn du mit der Maus über den Text fährst. Die Entsprechende Klasse oder ID suchst du dann in der CSS Datei und ändere diese nach deinen Vorstellungen im Quelltext der Seitenleiste ab und drücke Apply. Du siehst live die Auswirkung auf dein Wacko.
Führe dieses mit allen Klassen durch, die du ändern möchtest.


Achtung: Ein erneutes Aufrufen der Seite verwirft alle Änderungen. Speichere also regelmäßig die CSS Datei und lade diese wieder auf den Server hoch.
Nachdem dieser Vorgang beendet ist und die Seite so aussieht wie du es möchtest, speichere die CSS ab und lade sie endgültig auf den Server.
Nun aktualisiere die Wacko Seite im Browser und surfe durch die einzelnen Seiten (z.B. Einstellungen). Hier solltest du neue/ andere Klassen finden, die du noch nicht angepasst hast. Einfach die oberen Schritte mit dieser Seite wiederholen bis alle Unterseiten deinen Vorstellungen entsprechen.

9. Schritt 7: Icons

Wenn du die einzelnen ID's und Klassen angepasst hast, kannst du die einzelnen Icons ändern.
Diese müssen alle im entsprechenden Unterordner liegen, da du in Schritt 2 ja den gesamten Inhalt des default Ordners kopiert hast.
Dafür einfach das entsprechende Icon erstellen und über das "alte" drüber speichern. Wichtig ist, dass alle Namen erhalten bleiben, da sonst Fehler in der Anzeige der Seite entstehen.

10. Schritt 8: Fertig

Nun sollte alles so aussehen, wie gewollt... oder nicht?