Druckansicht
Kontakt
RSS-Newsfeed
Sitemap
Impressum
How-To design a phpBB3 style
Die phpBB3-Forensoftware ist eine komplexe und funktionsreiche Anwendung, welche viele Optimierungen im Hinblick auf Performance und Usability erhalten hat. Letzteres ist auch der Grund dafür, dass Administratoren am Anfang etwas Probleme mit der Template-Entwicklung haben, denn bei phpBB3 gibt es ein paar Dinge, die man diesbezüglich beachten muss. Wichtigste Erneuerung bei phpBB3 im Vergleich zur Vorgängerversion ist das Caching des Templates bzw. Styles. Durch das Zwischenspeichern können oft auftretende Anfragen beschleunigt und die gesamte Performance des Forums gesteigert werden.
In diesem Artikel wird gezeigt, wie man ein neues Design installiert und dieses dann an die eigenen Bedürfnisse anpasst. Diese Anleitung ist also für jene Anwender gedacht, welche das erste Mal ein phpBB3-Forum aufgesetzt haben und dieses nun an Ihren individuellen Style und Designvorstellungen anpassen möchten.
1.) Prinzip / Aufbau eines phpBB3-Styles
Wie gewohnt kann man in phpBB3 mehrere Styles installieren und diese auch den Mitgliedern zur Verfügung stellen, so dass diese sich für einen Style ihrer Wahl entscheiden können. Auf www.phpbb3styles.net gibt es eine große Auswahl an Styles, die für phpBB3 entwickelt wurden. Wem also die Standard-Styles Prosilver und Subsilver2 von phpBB3 nicht gefallen, dem sei geraten, sich ein Style herauszusuchen, welches den jeweiligen Vorstellungen am besten entspricht. Nun gilt es, diesen Style anzupassen.
Ein Style besteht im Prinzip aus HTML-(Grundgerüst), CSS-Dateien (Farben, Formatierungen, Layout, etc.) und Grafiken, welche in vorgegebenen Verzeichnissen im Verzeichnis styles gespeichert werden. In dem Verzeichnis styles befinden sich beispielsweise die beiden Verzeichnisse prosilver und subsilver2, welche die beiden Standard-Styles widerspiegeln.
phpBB3 - Style-Verzeichnisse
In den 3 Verzeichnissen liegen die Style-Dateien
Jedes Style-Verzeichnis besitzt wiederum drei weitere Hauptverzeichnisse namens template (HTML-Dateien), theme (CSS-Dateien) und imageset (Grafiken, Icons, Logos).
Die Datei style.cfg enthält Informationen zu dem jeweiligen Style. Hier könnte man beispielsweise den Namen des Styles, wie es dann im Adminbereich angezeigt wird. Dazu muss man einfach den Eintrag name ändern.
# Auszug der style.cfg
name = prosilver
copyright = © phpBB Group, 2007
version = 3.0.0
 |
2.) phpBB3 und das Caching des Styles
In phpBB3 muss man bezüglich des Styles zwei Dinge wissen: zum einen werden alle Informationen zum Style (HTML-, CSS-Dateien, usw) in einem Cache zwischengespeichert und zum anderen ist es sogar möglich, die Style-Informationen in der Datenbank abzulegen. Letzteres bedeutet, dass die Inhalte der HTML-, CSS-Dateien, usw. einmalig ausgelesen und in der Datenbank gespeichert werden.
Was bedeutet das für den phpBB3-Administrator: anders als in der Vorgängerversion tut sich erst einmal gar nichts, wenn er Änderungen an diesen Dateien vornimmt, da phpBB3 das Style aus dem schnellen Cache ausliest. Man muss also die Änderungen nach Fertigstellung erst wieder in den Cache laden bzw. diesen neuen einlesen.
Bezüglich des Caches in phpBB3 findet man im phpBB3-Administratorbereich (in folgendem nur noch ACP, Admin Control Panel, genannt) folgende Einstellungen:
ACP -> Allgemein -> Den Cache leeren
Diese Funktion kann man immer dann manuell benutzen, wenn es temporäre Probleme bezüglich des Styles gibt. Wenn alle Einstellungen keine Wirkung haben, kann man sich manuell mit dieser Funktion weiterhelfen
ACP -> Allgemein -> Serverlast -> Rekompilieren veralteter Style-Komponenten
Diese Option sollte bei der Entwicklung auf Ja gesetzt sein, denn sie bewirkt, dass die Änderungen an den Styles sofort in den Cache gespeichert werden. Man muss also Änderungen nicht immer manuell aktualisieren. Für den späteren Online-Betrieb des Forums sollte diese Option deaktiviert werden, da sie viel Serverlast erzeugt.
ACP -> Styles
Unter Styles sieht man eine Übersicht der zur Zeit installierten Styles. Folgende Grafik soll verdeutlichen, was sich hinter den Bezeichnungen verbirgt:
Mit einem Klick auf Styles können die installierten Styles administriert werden.
 |
ACP -> Styles -> Template / Theme
Hier werden die HTML- und CSS-Dateien geändert. Man hat sogar die Möglichkeit, die Dateien über den Browser direkt zu bearbeiten. Wichtig zu wissen ist, ob man die Dateien lokal auslesen oder in der Datenbank speichern möchte. Klickt man dazu auf ändern, erscheint folgendes Fenster:
 |
Die Beschreibung in phpBB3 zu den Punkten Template / Theme ist genau passend:
Templates
Eine Template-Sammlung umfasst all den HTML-Code, der für das Layout des Boards verwendet wird. Du kannst bestehende Template-Sammlungen ändern, löschen, exportieren, importieren und eine Vorschau anzeigen. Du kannst des Weiteren den Code ändern, der für BBCode verwendet wird.
Themes
Hier kannst du Themes erstellen, installieren, ändern, löschen und exportieren. Ein Theme ist eine Kombination von Farben und Grafiken, die in den Templates verwendet wird, um das grundlegende Aussehen deines Boards zu definieren.
Wenn man nun Änderungen an den Templates oder Themes vorgenommen hat, kann auf Aktualisieren klicken. Jetzt wird man abgefragt, ob der Cache neu generiert werden soll, damit die Änderungen auch aktiv werden:
Wenn man aber die Funktion Rekompilieren aller Styles aktiviert hat, kann man diesen Schritt weglassen. Die Funktion eignet sich dafür, Änderungen während des Online-Betriebs vorzunehmen.
3.) Wichtige Style-Dateien
Wie geht man beim Design nun am besten vor? Da muss wahrscheinlich jeder seine eigene Strategie entwickeln. Ich kann in diesem Fall nur ein paar Tipps geben, wie ich das Design entwickelt habe.
Wie bereits erwähnt setzt sich das Design vor allem aus den HTML-Dateien aus dem template-Verzeichnis und aus den CSS-Dateien aus dem theme-Verzeichnis zusammen. Die Dateien in diesen Verzeichnissen sind relativ zahlreich, aber die Namen lassen darauf zurückschließen, für welchen Bereich des Forums sie zuständig sind.
Hilfreich ist auch die URL: wenn dort beispielsweise etwas von viewtopic.php?t=32512 steht, so ist das Template in der Datei enthalten, welche die Bezeichnung viewtopic enthält. In diesem Falle wäre es die Datei viewtopic_body.html.
Hier eine Aufzählung der wichtigsten phpBB3 Template-Dateien:
overall_footer.html = Zentraler Forenfuß
overall_header.html = Zentraler Forenkopf (Logo, Menü, usw.)
viewforum_body.html = Forenansicht
viewtopic_body.html = Topicansicht
index_body.html = Inhalt der Startseite
Bei den CSS-Dateien ist es etwas schwieriger. In diesem Fall ist es sinnvoll, sich im Browser den Quellcode anzuschauen, die entsprechende Passage ausfindig zu machen und anschließend die CSS-Dateien nach der passenden Klasse zu durchsuchen.
Hier eine Aufzählung der wichtigsten phpBB3 Theme-Dateien:
colours.css = Definition der Farben
common.css = Allgemeines Layout
content.css = Inhalt
Ab diesem Punkt sind die klassischen (X)HTML- und CSS-Kenntnisse gefordert.
4.) Grafiken, Icons & Buttons ändern
Sämtliche Grafiken, Icons und Buttons werden in einem Imageset verwaltet. Hierbei handelt es sich um eine einfache Textdatei im Verzeichnis imageset.cfg. In dieser Datei wird dann für jede Funktion (Antworten, Editieren, ICQ, AIM, usw.) ein Icon definiert. Hier ein Auszug aus der imageset.cfg:
[...]
img_forum_link = forum_link.gif*27*27
img_forum_read = forum_read.gif*27*27
img_forum_read_locked = forum_read_locked.gif*27*27
[...]
Vor dem Gleichzeichen steht der Alias der phpBB3-Forum Funktion. img_forum_read steht beispielsweise für das Symbol, das ein gelesenens Forum symbolisieren soll. Anschließend folgt der Dateiname des Icons gefolgt von den Abmessungen in Pixeln. Auch hier muss der Cache beachtet werden, sofern Änderungen vorgenommen werden.