Design-Workshop - Teil 1

Funktionelle Webseiten kann jeder mit Papoo CMS erstellen, das ist keine grosse Kunst. Die mitgelieferten Designs ein wenig anpassen, z. B. das Logo im Header austauschen oder die Farben verändern, ist auch nicht so schwierig, wenn man bereit ist, sich ein klitzekleines bisschen mit HTML und CSS auseinanderzusetzen. Doch was mache ich, wenn ich ein komplett neues Design in Papoo einbinden will? Wie geht das überhaupt? Dieses Vorhaben soll in diesem Workshop vermittelt werden. Sie lernen hierbei ein wenig über die Template-Struktur von Papoo und ein paar Grundlagen, wie diese Templates mit Hilfe von CSS designt werden. Am Ende können Sie dann jedes fertige Design in Papoo übernehmen.

Vorbereitungen

Um diesen Workshop nacharbeiten zu können, empfehlen wir folgende Werkzeuge:

1. Eine lokale Papoo-Installation auf Ihrem Rechner, z.B. unter XAMPP; eine Anleitung zur Installation finden sie hier.
2. Einen vernünftigen Editor mit Syntax-Highlighting und anderem Schickschnack, z.B. notepad++
3. Mozilla Firefox mit der Erweiterung firebug

Das Design

Auf freecsstemplates.org gibt es unzählige kostenlose Webseitendesigns zum Download. Man darf die Templates nach belieben verwenden, verändern und anpassen - nur der Copyright-Vermerk mit Backlink darf nicht entfernt werden. Wir werden in diesem Workshop das Template "memoranda " in Papoo einbinden.

(Klick zum vergößern)

Jetzt gehts los

Laden Sie sich das Design "memoranda" herunter und entpacken Sie die zip-Datei.

Gehen Sie nun in die Administrationsoberfläche ihrer lokalen Papoo-Installation zum Menüpunkt "Layout - Styles und Module" und klicken Sie auf "Neues Layout erstellen". Geben Sie als Namen für das neue Layout "memoranda" ein, und klicken Sie auf "Speichern".

Nun werden Sie aufgefordert, Ihre CSS-Anweisungen einzugeben. Dabei handelt es sich in unserem Fall einfach um den Inhalt der Datei "style.css", die Sie mit heruntergeladen haben. Öffnen Sie die Datei "style.css" mit einem Editor und kopieren Sie den gesamten Inhalt in des vorgesehene Fenster und klicken Sie auf "Speichern".

Im nächsten Schritt müssen Sie die Template-Struktur einfügen. Dies ist der Inhalt der Datei "index.html". Fügen Sie den Inhalt dieser Datei in das vorgesehene Feld ein und klicken Sie auf "Speichern". Sie werden sehen, dass nun die reine Struktur aus der Datei extrahiert worden ist. Wir wollen aber auch den Content direkt mitübernehmen, sonst sieht man erstmal nicht viel von dem neuen Template. Löschen Sie daher alles, was Sie in dem Feld sehen und fügen Sie den Inhalt der Datei "index.html" noch einmal ein und klicken Sie dann auf "Speichern". Sie erhalten daraufhin die Meldung, dass der neue Style eingetragen wurde und nun im System zur Verfügung steht.

Gehen Sie nun wieder zu dem Menüpunkt "Layout - Styles und Module". Sie werden sehen, dass der neue Style "memoranda" zweimal vorhanden ist. Dies ist ein Bug, der in einer späteren Version von Papoo noch behoben werden wird. Sie behelfen sich nun, indem Sie den Style deaktivieren, auf "Speichern" klicken und ihn dann noch einmal aktivieren. Der doppelte Eintrag ist nun verschwunden.

In dem Verzeichnis "/styles" Ihrer Papoo-Installation wurde nun ein neuer Unterordner "memoranda" erstellt. Dort befinden sich nun alle Dateien, die das Design beschreiben. Zunächst fehlen uns noch die Bilddateien. Kopieren Sie alle Dateien aus dem Ordner "images", den Sie mit heruntergeladen haben, in den Ordner "/styles/memoranda/css/images" Ihrer Papoo-Installation.

Wenn Sie jetzt ins Frontend wechseln und per Styleswitcher das neue Design "memoranda" auswählen, werden Sie sehen, dass es alles schonmal schön aussieht. Nur funktioniert das neue Design noch nicht. Das liegt daran, dass dem Design immer noch das statische Template zu Grunde liegt, welches Sie heruntergeladen haben.

Wie man das statische Template nun dynamisiert und zu einem Papoo-Template macht, lernen Sie im nächsten Teil dieses Workshops.