Zum Verständnis von Mocha einige Beispiele. Die Minimalvarianten sind so aufgebaut, dass die Beispiele zunehmend komplexer werden:
Fenster 2 (Fenster mit Desktop)
Fenster 3 (Fenster mit Desktop und Pagewrapper)
Screens 2 (Screens mit Desktop)
Navigationsleiste 1 (nur Navigationsleiste)
In den Minimalvarianten wurde nicht auf die Elemente mochaDesktopHeader und mochaDesktopTitlebar eingegangen. Deren Verwendung erschließt sich am einfachsten durch den Quelltext dieser Datei.
Ein gutes Beispiel für das Zusammenspiel aller Varianten ist diese Datei selbst.
An der optischen gestaltung sind bei Mocha keinerlei Grafikdateien beteilig. Alle Anpassungen erfolgen in den Dateien mocha.css und style.css sowie in der mocha.js.
Zur Umsetzung dieses Farbbeispiels wurden aus:
Die Anpassungen im JS-Code wurden nicht direkt vorgenommen sondern in der Datei index_braun.html. In dieser Datei wurde vor dem </body>-Tag ein JS-Abschnitt eingefügt. Die einzelnen Optionen und ihre Bedeutung sind im Quelltext dieser Datei ausführlich dokumentiert.
Grundlage aller Anpassungen war dieses Farbschema.