[3.1/3.2] Einen Style für phpBB 3.1/3.2 modifizieren und erstellen

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

Warnung: Dieser Artikel ist für phpBB 3.1. Es lässt sich nicht auf ältere Versionen von phpBB (wie 3.0) anwenden.

Hinweis: Um diesen Artikel in seiner Gänze verstehen zu können, sind zumindest grundlegende Kenntnisse in HTML und CSS notwendig. Auf der Suche nach Tutorials zu diesen Sprachen empfehlen wir euch diesen Artikel: Wo finde ich Scripte & Tutorials?

Profi-Tipp: In unserer Rubrik 3.1.x Styles in Entwicklung könnt ihr euch anschauen, wie erfahrene Style-Autoren und Einsteiger ihre Styles für phpBB 3.1 aufbauen.


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:

Code: Alles auswählen

template/
    overall_header.html
    eigene-js-datei.js
theme/
    images/
        logo.png
    stylesheet.css
style.cfg


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


Warnung: Wie immer gilt: bitte erstellt vor allen Änderungen an Dateien ein Backup (Sicherheitskopie) der jeweiligen Dateien und der Datenbank. Das erspart euch unnötigen Ärger und Zeit bei der langwierigen Fehlersuche, wenn ihr euch eine Datei zerstört habt.


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.

Info: Am besten liest du den Artikel erst ganz durch, bevor du dich ans Erstellen deines eigenen Styles machst.

Profi-Tipp: Vorhandenes Styles zu bearbeiten ist aus mehreren Gründen keine gute Idee und auch nicht notwendig. Du kannst eine Kopie des Styles anfertigen und dessen style.cfg anpassen, so dass er Inhalte vom Original-Style erbt. Dadurch musst du nur Dateien bearbeiten, die du auch verändern willst, was dir enorm viel Zeit spart.


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:

Code: Alles auswählen

#
# phpBB Style Configuration File
#
# This file is part of the phpBB Forum Software package.
#
# @copyright (c) phpBB Limited <https://www.phpbb.com>
# @license GNU General Public License, version 2 (GPL-2.0)
#
# For full copyright and license information, please see
# the docs/CREDITS.txt file.
#
# At the left is the name, please do not change this
# At the right the value is entered
#
# Values get trimmed, if you want to add a space in front or at the end of
# the value, then enclose the value with single or double quotes.
# Single and double quotes do not need to be escaped.
#
#

# General Information about this style
name = prosilver
copyright = © phpBB Limited, 2007
style_version = 3.1.0
phpbb_version = 3.1.0

# Defining a different template bitfield
# template_bitfield = lNg=

# Parent style
# Set value to empty or to this style's name if this style does not have a parent style
parent = prosilver


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:

Code: Alles auswählen

name = eigener Style
parent = prosilver


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:

Code: Alles auswählen

name = eigener Style
parent = prosilver Special Edition

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:

Code: Alles auswählen

prosilver
     prosilver Special Edition
          eigener Style

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.

Hinweis: Für weitere Informationen wie diese Code Snippets von Styles und Erweiterungen verwendet werden, schau dir die "Eine Erweiterung schreiben"-Seite oder die Development Wiki Seite New Template Commands in 3.1 an.


{$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.

Info: {$STYLESHEETS} sollte gegen Ende des <head>-Elements in der Template-Datei overall_header.html verwendet werden. Am besten direkt vor </head>.


{$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.

Info: {$SCRIPTS} sollte gegen Ende der Template-Datei overall_footer.html verwendet werden. Am besten direkt vor </body>.


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:

Code: Alles auswählen

<script src="{T_JQUERY_LINK}"></script>
<!-- IF S_ALLOW_CDN --><script>window.jQuery || document.write(unescape('%3Cscript src="{T_ASSETS_PATH}/javascript/jquery.min.js?assets_version={T_ASSETS_VERSION}" type="text/javascript"%3E%3C/script%3E'));</script><!-- ENDIF -->

Info: Dieser jQuery-Code sollte am besten das erste Script sein, was im Footer geladen wird. Auf jeden Fall muss er vor {$SCRIPTS} eingebunden werden.


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-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.

Info: Eine umfassende Liste aller Template-Events, die in prosilver 3.1.x (und subsilver2) verwendet werden, kann im Development Wiki Event List nachgelesen werden.

Profi-Tipp: Anstelle alle Template Events an korrekter Stelle in deinem Style einzubauen, empfiehlt sich wieder einmal der Einsatz der Template-Vererbung.


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").

Info: Mit der Einführung von Template-Events wurde die Template-Vererbung deutlich mächtiger. Wir empfehlen deshalb den Einsatz der Template-Vererbung so häufig wie möglich.


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.

Info: Theme-Dateien können nicht genauso wie Template-Dateien vererbt werden. Es gibt kein automatisches System. Die Theme-"Vererbung" sollte mehr so verstanden werden: "Lade Theme-Dateien von anderen Styles mit manuellen Anweisungen".


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:

Code: Alles auswählen

@import url("../../prosilver/theme/common.css");
@import url("../../prosilver/theme/links.css");
@import url("../../prosilver/theme/content.css");
@import url("../../prosilver/theme/buttons.css");
@import url("../../prosilver/theme/cp.css");
@import url("../../prosilver/theme/forms.css");
@import url("colours.css");
@import url("imageset.css");


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).

Code: Alles auswählen

<link href="{ROOT_PATH}styles/prosilver/theme/stylesheet.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />

<link href="{T_STYLESHEET_LINK}" rel="stylesheet" />

Notiz: phpBB nutzt {T_ASSETS_VERSION} als rudimentäre Art der Browser-Cache-Kontrolle.

Hinweis: Obwohl {T_SUPER_TEMPLATE_NAME} immer noch unterstützt wird, schreitet es nur eine Ebenen im Style-Baum nach oben. Deshalb ist es nicht für komplexe Vererbungssituationen geeignet.


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.

Hinweis: Wir raten davon ab, sowohl @import-Regeln als auch CSS-Regeln in der gleichen Datei zu verwenden.

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:

Code: Alles auswählen

<link href="{ROOT_PATH}styles/prosilver/theme/{T_THEME_LANG_NAME}/stylesheet.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />


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.

Code: Alles auswählen

<link href="{ROOT_PATH}styles/prosilver/theme/common.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />
<link href="{ROOT_PATH}styles/prosilver/theme/links.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />
<link href="{ROOT_PATH}styles/prosilver/theme/content.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />
<link href="{ROOT_PATH}styles/prosilver/theme/buttons.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />
<link href="{ROOT_PATH}styles/prosilver/theme/cp.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />
<link href="{ROOT_PATH}styles/prosilver/theme/forms.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />

<link href="{T_STYLESHEET_LINK}" rel="stylesheet" />

<link href="{ROOT_PATH}styles/prosilver/theme/{T_THEME_LANG_NAME}/stylesheet.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />


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.

Profi-Tipp: Wenn du die Serverlast von CSS-Dateiübertragungen reduzieren willst, kannst du die Anzahl der CSS-Dateien verringern und alle CSS-Regeln in eine einzelne CSS-Datei schreiben. Die Umsetzung ist allerdings nicht für Anfänger geeignet und benötigt einen komplexeren Workflow (was den Umfang dieses Artikel übersteigt).


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.

Code: Alles auswählen

{$STYLESHEETS}

<link href="{T_THEME_PATH}/extensions.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" />


Mit dieser Methode wird sichergestellt, dass deine eigenen CSS-Regeln nach denen der Erweiterung geladen werden und diese so überschreiben.

Profi-Tipp: Wenn (und nur dann) du einen sehr beliebten Style hast und eine bestimmte Erweiterung verschiedene Template-Dateien verwendet, die nicht gut mit deinem Style funktionieren, solltest du den Autor der Erweiterung kontaktieren. Wenn er/sie zustimmt, kannst du ihm eine spezielle Template-Datei für seine Erweiterung zur Verfügung stellen (ggf. via Github oder ähnlich).


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.

Zuletzt bearbeitet: 13.06.2017 18:44 von • Der Artikel wurde 14910 mal angeschaut.