phpBB.de

---

Dieser Artikel gibt grundlegende und fortgeschrittene Informationen, die euch beim Erstellen und Modifizieren eines phpBB 3.1 Styles helfen.

Dateistruktur

Jeder phpBB 3.1 Style hat die gleiche grundlegende Dateistruktur. So befindet sich jeder Style im Ordner styles/ in seinem eigenen Ordner stylename. Der Inhalt des Ordner sieht beispielsweise so aus: Wir empfehlen euch beim Neuerstellen eueres Styles diese Struktur unbedingt einzuhalten. Das vermeidet grundsätzliche Probleme bei denen Dateien und Ordner eures Styles nicht gefunden werden können.

Vorbereitungen

Basis Style auswählen

Es besteht theoretisch die Möglichkeit einen Style komplett von Grund auf neu zu erstellen. Davon raten wir Einsteigern und auch fortgeschrittenen Style-Autoren ab. Denn in den allermeisten Fällen muss man nicht alle Style-Dateien verändern, um einen eigenen Style zu erstellen. Deshalb verwenden wir als Grundlage prosilver.

Dieser Style bietet eine gute Grundlage, enthält alle neuen Features von phpBB 3.1 und verwendet die neusten HTML- und CSS-Elemente. Zudem wurde er schon ausgiebig getestet. Mit seiner Basis stellt ihr zusätzlich sicher, dass alle Template-Events an der richtigen Stelle sind und somit alle Erweiterungen (Extensions) funktionieren. Mehr zu Template-Events gibt es später in diesem Artikel.

Ein Grundgerüst erstellen

Zuerst muss die Dateistruktur nach dem oben genannten Vorbild erstellt werden. Sobald die Ordner: template, theme und theme/images erstellt sind, sowie die Datei style.cfg existiert, kann es losgehen.

Style.cfg

Dies ist die wichtigste Datei eines Styles. In ihr stehen alle wichtigen Informationen, die dein phpBB Board benötigt, um den Style zu installieren und ob weitere Styles für die Installation notwendig sind.
In der Regel sieht die style.cfg so aus: Das Meiste in dieser Datei erklärt sich von selbst. Einen besonderen Blick wert sind die Werte für name, style_version und phpbb_version sowie parent. Letzterer gibt an, ob dieser Style von einem anderen Style erbt, also einen Basistyle besitzt.

Soll nun unser neuer Style den Namen "eigener Style" tragen und von prosilver Dateien erben, dann sind diese beiden Zeilen notwendig: Anstelle von prosilver kann der Style auch von einem anderen Style Dateien erben z. B. prosilver Special Edition. Damit sehen diese beiden Zeilen so aus: Dieser Style wiederum erbt Dateien von prosilver. Deshalb sieht die Erbreihenfolge im Administrations-Bereich (ACP), nachdem ihr den neuen Style eigener Style installiert habt, so aus:

Notwendige Elemente

Jede Webseite benötigt verschiedene Elemente, damit sie richtig funktioniert. Diese Elemente sind in den HTML- und CSS-Spezifikationen definiert.

Neben diesen Elementen brauchen phpBB 3.1-Styles verschiedene Code-Elemente, damit sie richtig funktionieren.

Wenn du deinen Style auf Basis eines guten und funktionierenden Styles aufbaust, dann wird dieser Style alle diese Code-Elemente schon mitbringen. Da diese Elemente allerdings sehr wichtig sind, wollen wir an dieser Stelle nicht darauf verzichten, sie zu erwähnen.

{$STYLESHEETS}

Das phpBB 3.1-Erweiterungssystem erlaubt es Erweiterungen, eigene (externe) CSS-Dateien zu ergänzen. Sie nutzen dafür den Code: <!-- INCLUDECSS my_styling.css --> im Template.

Dieser Code ergänzt eine bestimmte CSS-Datei in der Reihe von Dateien, die mit dem Element {$STYLESHEETS} im Template geladen wird. Deshalb werden viele Erweiterungen nicht funktionieren, wenn du dieses Code-Element nicht in deinem Style verwendest.

{$SCRIPTS}

{$SCRIPTS} funktioniert fast genauso wie das Code-Element {$STYLESHEETS}, aber es ist für JavaScript gedacht, der von Erweiterungen deinem phpBB Board ergänzt wird. Dazu nutzen Autoren von Erweiterungen den Code: <!-- INCLUDEJS my_scripts.js -->. Wie bei {$STYLESHEETS} ist der {$SCRIPTS} notwendig, damit Erweiterungen weiterhin funktionieren.

jQuery

Ab Version phpBB 3.1 ist jQuery standardmäßig im Komplettpaket enthalten. jQuery ist für viele Style-Autoren sehr nützlich. Von vielen Erweiterungen wird angenommen, dass es vorhanden und aktiviert ist.

Deshalb sollte dein Style immer den Code enthalten, der jQuery in dein Template einbindet. Wenn du den folgenden Code in deiner Template-Datei overall_footer.html findest, gehst du auf Nummer sicher:

Template-Syntax und Variablen

phpBB 3.1 besitzt eine mächtige Template-Engine, welche es dir erlaubt, an verschiedenen Stellen im Code die Seitenausgabe zu bearbeiten und zu ergänzen.

Für weitere Informationen, wie du die verschiedenen Template-Elemente und Bedingungen verwenden kannst, schau dir bitte das Development Wiki an. Bis jetzt gibt es noch keine phpBB 3.1 spezifischen Inhalte, aber einige Seiten sind trotzdem geeignet:

• Template Syntax Tutorial
• Katalog von verfügbaren Template Variablen
• [url=https://wiki.phpbb.com/Category:Template_Variables]Allgemein Template Fehler

Template-Events

Seit der Einführung des Extension-Systems in phpBB 3.1 können Erweiterungen Code einfügen, ohne dass das Template bearbeitet werden muss. Dies macht die Installation, das Aktualisieren und das Entfernen von Funktionen auf Style-Ebene deutlich einfacher.

Viele Erweiterungen werden Template-Events nutzen, um Funktionen zu phpBB zu ergänzen. Sie nutzen dabei den Template-Code: <!-- EVENT template_event_name -->. Wenn dein Style beliebt und oft genutzt werden soll, dann solltest du versuchen möglichst viele der Template-Events in deinem Style zu übernehmen.

Da prosilver weiterhin der Standard-Style für phpBB 3.1 ist, werden die meisten Erweiterungen für prosilver und damit für dessen Template-Events entwickelt. Deshalb wird das Einbinden dieser Template-Events in nahezu der gleichen Position sicherstellen, dass die meisten und zukünftige Erweiterungen mit deinem Style funktionieren.

Template-Vererbung

Die Template-Vererbung ist so ziemlich die nützlichste Funktion für Style-Autoren der phpBB Template-Engine.

Wenn du deinen Style auf Basis eines Existierenden aufbaust und nur ein paar Template-Dateien verändern willst, must du nicht alle Template-Dateien kopieren. Dies würde dafür sorgen, dass du sehr viele komplett identische Template-Dateien in deinem Board hast. Es wäre zudem sehr aufwändig alle Änderungen in die Dateien einzupflegen, wenn der Basisstyle (parent) ein Update erfährt.

Um die Template-Vererbung (template inheritance) zu aktivieren, muss nur eine Zeile in der style.cfg ergänzt werden.

Wenn du in deinem Style einen "parent", also einen Basisstyle, definierst, wird die Template-Engine fehlende Dateien bei diesem Basisstyle suchen und verwenden, sofern deinem Style diese Dateien fehlen.

Grundsätzlich bedeutet das, dass phpBB versucht, eine Datei im Ordner template deines Styles zu finden. Wenn die Datei dort nicht gefunden wird, wird in jedem template-Ordner der Basisstyles (parent-Styles) gesucht. Dieser Prozess kann mehrere Ebenen tief sein. So kannst du deinen Style als Kind von einem Kind von einem Kind von einem Basisstyle aufbauen, wie die Äste von einem Baum (deshalb "Style-Tree").

Beispiel

Viele Styles beginnen mit dem Modifizieren von vorhandenen Styles (wie z. B. prosilver), weil das Erstellen eines neuen Styles ganz von Vorne ein sehr zeitaufwendiges Unterfangen ist. Das folgende Beispiel zeigt, wie einfach und nützlich die Template-Vererbung sein kann.

Beispiel: "Ich will den Kopf des Board und die Index-Seite von Style "X" bearbeiten, wie mache ich das?"

Das erste was du bedenken musst: du willst jetzt nur zwei Dinge ändern. Nach der Zeit willst du vielleicht mehr und mehr Dinge verändern. Deshalb wäre es am besten, wenn du einen Kind-Style von Style "X" erstellst (im Beispiel Style "Y" genannt).

1. Erstelle das Grundgerüst für Style "Y"
2. Erstelle eine style.cfg für Style "Y" mit "X" als Basisstyle
3. Kopiere overall_header.html und index_body.html von styles/x/template nach styles/y/template.
4. Verändere diese beiden Dateien nach deinen Bedürfnissen.
5. Lade Style "Y" hoch und installiere ihn im Administrations-Bereich.

Ist das alles? Nicht ganz. Du wirst bemerkt haben, dass keine Theme-Dateien (CSS und Grafiken) geladen werden. Im nächsten Kapitel wird dieses Problem besprochen.

Theme-"Vererbung"

Das größte Hindernis für die meisten Style-Autoren ist die Tatsache, dass die Vererbung nur bei Template-Dateien funktioniert und nicht bei den CSS-Dateien. Die Frage ist also, wie man Template-Vererbung und zusätzlich die Vererbung der Theme-Dateien des Vorgänger-Styles umsetzen kann?

Dazu gibt es mehere Wege und der beste Weg hängt davon ab, ob du viele maßgebliche Änderungen an den CSS-Dateien vornehmen willst oder nicht. Wir werden versuchen diese unterschiedlichen Wege zu erklären und die Vor- und Nachteile aufzuzählen.

Methode 1: Kopieren & Einfügen von allen Theme-Dateien

Die einfachste (und vermutlich meist missbräuchlich verwendete) Methode ist: einfach alle Theme-Dateien (d.h. das komplette theme/-Verzeichnis) von dem Vorgänger-Style zum Kind-Style theme/-Verzeichnis zu kopieren und die verschiedenen CSS-Dateien dort seinen Bedürfnissen anzupassen.
Vorteile:

• Einfaches Verändern
• Benötigt keine Template-Modifikationen

Nachteile:

• Schlechte Wartbarkeit
• Potenzielle Probleme beim Aktualisieren von mehreren Vorgänger-Styles
• Doppelte Theme-Dateien im Board

Methode 2: @import-Regel mit relativem Pfad

Wenn du nur wenige Veränderungen an den CSS-Dateien der Vorgänger-Styles machen willst, möchtest du nicht alle CSS-Dateien kopieren und so deinen Style mit doppelten Dateien vollstopfen. Du kopierst nur die CSS-Dateien, die du auch verändern willst in dein theme-Verzeichnis.

In deiner neuen stylesheet.css kann du folgenden Code einbinden, um die anderen CSS-Dateien zu laden: Das lädt alle prosilver CSS-Dateien, außer die colours.css und imageset.css, aus dem theme-Verzeichnis von prosilver. Die letzteren beiden werden aus dem theme/-Verzeichnis deines neuen Styles geladen, die du von prosilver kopiert und deinen Bedürfnissen angepasst hast.

Vorteile:

• Keine doppelten CSS-Dateien
• Keine Anpassung von Template-Dateien erforderlich

Nachteile:

• @import-Regeln mit relativem Pfad sind schlechter Stil (wenn möglich immer vermeiden)
• Benötigt weiterhin Kopien aller CSS-Dateien, die nicht in der stylesheet.css eingebunden werden (responsive.css, /de/stylesheet.css, usw.)

Methode 3: Mehrfach überschreibende stylesheets.css im <head>

Anstatt die kopierten CSS-Dateien zu bearbeiten, kann man auch neue CSS-Regeln schreiben und damit die CSS-Regeln der CSS-Dateien des Vorgängers überschreiben (Stichwort: CSS-Spezifität und Kaskade). Dieser Code lädt zuerst die stylesheet.css von prosilver und alle CSS-Dateien, die davon per @import eingebunden werden. Danach wird die stylesheet.css deines eigenen Styles geladen. Du kannst wiederum in deiner stylesheet.css die @import-Funktion nutzen und so deine CSS-Regeln auf mehrere Dateien aufteilen oder eben alle CSS-Regeln in die stylesheet.css eintragen.
Die gleiche Methode kann verwendet werden, um anderen CSS-Dateien direkt von Basisstyles (parent-Styles) zu laden, ohne sie duplizieren zu müssen (wie z. B. responsive.css, print.css, bidi.css, usw.). Wenn du die CSS-Datei für die Sprachvariablen laden möchtest, kannst du folgendes Code-Snippet nutzen: Vorteile:

• Keine @import-Regeln mit relativem Pfad
• Möglichkeit, eine Doppelung zu verhindern

Nachteile:

• Keine genaue Kontrolle darüber, welche Teile der Vorgänger stylesheet.css eingebunden oder nicht eingebunden werden.

Methode 4:

Diese Methode funktioniert genauso wie Methode 3, aber anstelle die stylesheet.css des Basisstyles (prosilver) zu laden, werden die einzelnen CSS-Dateien direkt geladen, ohne die @import-Regel zu benutzen. Dies ermöglicht es, besser zu kontrollieren welche Datei eingebunden werden und welche nicht. Leicht ersichtlich ist, dass die colours.css und imageset.css nicht eingebunden wird, da wir da unsere eigenen CSS-Regeln verwenden wollen (die wir in einer eigenen stylesheet.css definieren) anstelle der von prosilver.

Vorteile:

• Vollständige Kontrolle darüber, welche CSS-Dateien eingebunden werden und in welcher Reihenfolge
• Keine Verwendung von @import
• Ermöglicht keinerlei Doppelung zu verwenden

Nachteile:

• Komplexe Header Template-Datei

Welche Methode soll ich verwenden?

Das hängt davon ab, wie viele Veränderungen du vornehmen möchtest. Vom technischen und wartungsfreundlichem Standpunkt aus betrachtet, empfehlen wir Methode 3, wenn du relativ wenige Änderungen an den CSS-Regeln vornehmen möchtest. Bei vielen Anpassungen dagegen Methode 4.

Erweiterungen gestalten

Dieser Abschnitt ist vollständig optional. Aber wenn die Nutzer deines Styles vermutlich verschiedene (beliebte) Erweiterungen (Extensions) nutzen, kannst du deinem Style CSS-Regeln ergänzen, die diese Erweiterungen unterstützen.

Das ist besonders dann nützlich, wenn dein Style ein unkonventionelles Layout nutzt oder wesentliche Änderungen an den CSS- und Bilddateien besitzt, die Erweiterungen mit eigenem Style hässlich oder deplatziert aussehen lassen.

Viele Erweiterungen mit Benutzeroberfläche werden ihr Stylesheet mit <!-- INCLUDECSS my_extension.css --> einbinden, so dass diese Datei in der {$STYLESHEETS}-Variable im <head> ergänzt wird (wie hier beschrieben).

Da in vielen Styles {$STYLESHEETS} nach <link href="{T_STYLESHEET_LINK}" /> eingebunden wird, werden die CSS-Regeln des Styles durch die CSS-Regeln der Erweiterungen überschrieben (wie beabsichtigt).

Damit stehen Style-Autoren vor einem Problem. Es ist nicht möglich, CSS-Regeln für Erweiterungen in der Style eigenen stylesheet.css einzubinden, da sie überschrieben werden würden. Das kann umgangen werden, wenn man gemäß der CSS-Spezifität stärkere Selektoren oder die !important-Eigenschaft verwendet, aber das ist keine elegante Lösung.

Deshalb könnten wir einfach die Lade-Reihenfolge umdrehen, die deine erweiterungspezifischen CSS-Regeln einbindet. Der einfachste Weg, um dies zu tun, ist alle CSS-Regeln für die Gestaltung von Erweiterungen in eine eigene CSS-Datei zu verschieben (z. B.: /theme/extensions.css).

Danach binden wir diese CSS-Datei im <head> des Templates nach {$STYLESHEETS} ein. Mit dieser Methode wird sichergestellt, dass deine eigenen CSS-Regeln nach denen der Erweiterung geladen werden und diese so überschreiben.

3.0.x Style zu 3.1.x aktualisieren

Da das Meiste der Template-Engine von phpBB 3.1.x abwärtskompatibel zu 3.0.x ist, sollte es nicht so schwer sein, einen veralteten Style auf die Version 3.1.x zu aktualisieren.

Um das Meiste aus den verfügbaren Funktionen zu machen, schlagen wir einen Blick auf die Seite Template Engine Changes in 3.1 des Development Wikis vor. Kombiniert mit den Informationen aus dem Wiki und diesem Artikel, sollte das Aktualisieren des Styles möglich sein (auch wenn es einen großen Aufwand darstellen mag).

Tipps & Tricks

prosilver CSS-Klassen nachahmen

Da die meisten Erweiterungen primär für prosilver entwickelt werden, werden sie wann immer möglich die CSS-Regeln von prosilver verwenden. Das hilft den Autoren von Erweiterungen, um die Anzahl der CSS-Regel, die sie schreiben müssen, maßgeblich zu verringern.

Wenn Autoren einer Erweiterung einen Block mit Inhalt in Zeilen ergänzen will, könnten sie alle CSS-Regeln selbst schreiben oder sie könnten einfach die Regeln verwenden, die schon existieren. Das wahrscheinlichste Ergebnis ist, dass sie die prosilver CSS-Regeln verwenden, wie z. B. ul.topiclist.

Wenn du möchstest, dass Erweiterungen mit deinem eigenen Style mit dem kleinst möglichem Aufwand funktionieren, ist es ein probates Mittel die CSS-Klassen an so ziemlich den gleichen Elementen zu verwenden.

Rekompilieren veralteter Style-Komponenten aktivieren

Während du Veränderungen an den Template-Dateien vornimmst, ist es oft nützlich, wenn man die Änderungen sofort im Board sehen kann, ohne dass du jedesmal den Cache des Boards löschen musst. Ein nützlicher Trick ist es, das Rekompilieren veralteter Style-Komponenten während der Entwicklung des Styles zu aktivieren.

Gehe dafür zu: Administrations-Bereich > Tab: Allgemein > Server-Konfigurationen > Serverlast > "Rekompilieren veralteter Style-Komponenten": Ja

Benutze Programme zum Vergleichen von Dateien

Benutzer vergessen oft, welche Änderungen sie an den verschiedenen Styles vorgenommen haben. Oder sie tun sich schwer die Unterschiede zwischen verschiedenen Versionen von Dateien zu sehen.

Bei diesen Problemen sind Programme nützlich, mit denen man verschiedene Dateien vergleichen kann. Fortgeschrittene Editoren haben solche Funktionen schon mit dabei, die dir helfen verschiedene Dateien oder ganze Ordner zu vergleichen. Alternativ kannst du Programme nutzen, die nur diese Funktion erfüllen. Ein paar beliebte Programm sind: WinMerge und Meld.

Code-Validierung

Validen HTML und CSS Code zu schreiben, erhöht maßgeblich die Chance, dass dein Style korrekt in verschiedenen Browsern auf verschiedenen Betriebssystemen und Geräten dargestellt wird.

Wenn du deinen Style in der Style-Datenbank auf phpBB.com anbieten willst, muss dein Style aus validem HTML und CSS bestehen.

Glücklicherweise gibt es automatische Tools, die dir helfen Probleme zu im Code zu finden. Wir empfehlen den Unicorn - W3C's Unified Validator.