NVU, HTML Studio ) oder kostenpflichtige (z.B. Dreamweaver, Phase 5 oder CoffeeCup ). Für dieses Tutorial ist es aber letzendlich egal, welchen Editor du benutzt.
Firefox mit der Erweiterung Web Developer Toolbar kann von Hilfe sein.
Falls du noch kein Design hast, erstelle eine HTML Seite. Am besten in XHTML 1.0 Transitional und mit einem guten/ sauberen Quelltext, der in jedem Browser gleich dargestellt wird. Mit gutem Quelltext meine ich ein Design ohne Tabellen, da die Anzeige ja später auch in jedem Browser gleichgut sein soll. 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>
Design ohne Tabellen )
Lege im /themes 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.
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" type="text/css" href="../css/wakkatest.css" />
#content {
color = #001100;
}
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" type="text/css" href="<?php echo $this->GetConfigValue("theme_url") ?>css/wakkatest.css" />
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 Fussteil (footer), der genau hinter dem Text anfängt.
Es kann also sein (muss fast sogar sein), dass der header mit
<div id=“content“></div>
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 . Hierduch 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.
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.
Nun sollte alles so aussehen, wie gewollt... oder nicht?
Preview online
intern//WackoThemes | extern
|
Diese Seite wurde 4895 aufgerufen.
zum Seiten Anfang
