Einen Style installieren und benutzen

Beschreibung: Styles sind runterladbare Pakete, die in dein phpBB Board installiert werden können, um die Optik und die Bedienung zu verändern.

Kategorie: Installation und Update, Styles und Templates

Link zu diesem Artikel: Alles auswählen

[url=https://www.phpbb.de/kb/viewarticle?a=25&sid=910f2aede2c7cb3ce24c9ae05bde979c]Knowledge Base - Einen Style installieren und benutzen[/url]

Styles sind runterladbare Pakete, die in dein phpBB Board installiert werden können, um die Optik und die Bedienung zu verändern. In diesem Artikel werden wir dir erklären, wie du einen Style installieren und in deinem Board benutzen kann.
Warnung: Dieser Artikel ist für phpBB ab 3.1 und höher. Es lässt sich nicht auf ältere Versionen von phpBB (wie 3.0) anwenden.

Gliederung eines Styles

Innerhalb deines phpBB Board Verzeichnisses befindet sich der Ordner styles/. Dies ist der Ort an dem alle Styles gespeichert werden und in den neue Styles hochgeladen werden. Jeder Style besitzt die gleiche Ordnerstruktur.

phpBB 3.1x/3.2x/3.3.x Styles haben drei Hauptbereiche:
  • Templates
  • CSS- und Bild-Dateien
  • config-Datei
Template
Template-Dateien sind die HTML-Dateien, die sich verantwortlich für das Layout eines Styles zeigen. Alle Template- und JavaScript-Dateien (welche zusätzliche Funktionen bereitstellen können) eines jeden Styles befinden sich im Ordner:
phpBB/styles/<eigenerStyleName/template/
CSS- und Bild-Dateien
CSS- und Bild-Dateien sind eine Kombination aus Farbschemen und Bildern, die die grundlegende Optik deines Boards definieren. Das schließt in der Regel CSS-Dateien (von denen die stylesheet.css die wichtigste ist) und anderen audio-visuellen Dateien mit ein. Diese Dateien befinden sich im Ordner:
phpBB/styles/<eigenerStyleName>/theme/
Config-Datei
Eine Config-Datei (style.cfg) enthält alle Meta-Informationen über einen Style sowie technische Anweisungen für dein phpBB Board. Diese Datei ist notwendig, ohne sie wird dein phpBB Board den Style nicht als solchen erkennen. Die Config-Datei befindet sich im Ordner:
phpBB/styles/<eigenerStyleName>/style.cfg

Einen Style installieren

Hinweis: Dieser Artikel geht davon aus, dass du phpBB 3.1.x/3.2.x/3.3.x korrekt installiert hast. Zusätzlich wird ein schreibender Zugang auf die Dateien des Servers (via FTP-Programm oder ähnlich) benötigt.
1. Einen Style auswählen
Es wird empfohlen, Styles nur aus der phpBB.com Customization Datenbank runterzuladen, da dies eine vertrauenswürdige Quelle ist und alle Styles durch das Style-Team geprüft wurden. Alle Styles aus dieser Datenbank sollten bereit zum Hochladen in den Ordner styles/ deines Boards sein. Sie müssen zur verwendeten phpBB-Version deines Boards passen.

Zusätzlich kannst du Styles ausprobieren, die noch nicht offiziell geprüft wurden und sich teilweise noch in Entwicklung befinden (und sich deshalb noch nicht in der Datebank befinden). Diese Styles findest du auf phpBB.com im Forum Styles in Development sowie auf phpBB.de im Forum: Styles in Entwicklung
Info: Vergewissere dich, dass der Style, den du runtergeladen hast für deine Version von phpBB geeignet ist. Styles für phpBB 3.0.x sind mit Versionen von phpBB 3.1.x und höher nicht kompatibel und können deshalb nicht installiert werden. Auch ein Style für 3.1 passt nicht zu 3.2 und so weiter.
2. Runterladen und entpacken
Sobald du den Style runtergeladen hast, musst du den Style zunächst entpacken. Normalerweise sind Styles in einem Format wie "zip" komprimiert.

Um in Windows eine "zip" zu entpacken, musst du sie nur per Doppelklick im Windows Explorer auswählen. Fahrefort in dem du auf "Alle Dateien extrahieren" unter der Adresszeile in Windows Vista, 7 und 8 klickst (unter dem Datei Menü in Windows XP) des Explorer Fensters, und dort den Anweisungen folgst.

Auf dem Mac werden gezippte Dateien automatisch von Safari entpackt (dieses Verhalten kann im Safari in den Einstellungen verändert werden) und durch die Download-Liste aufgerufen werden.

Vergewissere dich, dass der Style alle notwendigen Ordner und Dateien besitzt, die wir in Gliederung eines Styles beschrieben haben.
3. Style in dein Board hochladen
Um die Dateien hochladen zu können, musst du ein FTP-Programm deiner Wahl (z.B. FileZilla, CuteFTP, SmartFTP, usw. - auch manche Internet Browser haben eine FTP-Funktion) öffnen, und dich mit deinem Hosting-Account auf deinem Server anmelden.

Lade dann deine Style-Dateien (das komplette Verzeichnis) in den Ordner styles/ innerhalb deines phpBB Hauptverzeichnisses hoch. Zur Kontrolle kannst du schauen, ob sich die style.cfg am korrekten Ort befindet:
phpBB/styles/<eigenerStyleName>/style.cfg
4. Installation
Wenn der Style komplett hochgeladen wurde, musst du in deinem phpBB Board in den Administrations-Bereich gehen.
Dort zu: Tab: Anpassen > Style-Verwaltung > Styles installieren

Du sollst deinen eben hochgeladenen Style in der Liste der Styles sehen, die du installieren kannst (davon ausgehend, dass du alles richtig gemacht hast und der Style korrekt funktioniert), erscheint in der Spalte "Vorgänge" "Style installieren". Einfach diesen Link anklicken, danach ist die Installation vollständig.
Info: Wenn dein neuer Style die Template-Vererbung (eine Methode mit der Style-Autoren auf der Basis eines anderen Styles erstellen können) nutzt, musst du sicher stellen, dass du den Basisstyle zuerst installierst. phpBB wird die Installation eines Styles ablehnen, wenn der Basisstyle fehlt.

Styles verwalten

Viele Styles haben als Basis einen anderen Style (wie z. B. prosilver), da das Erstellen eines neuen Styles völlig ohne Grundlage ein sehr zeitzehrendes Unterfangen ist. Template-Vererbung ist schon seit langem ein Teil von phpBB 3 und du wirst ihm spätestens jetzt begegnen.

Du kannst die Beziehung und Hierarchie (Kind-/Basisstyle) deiner installierten Styles sehen, wenn du auf der Seite "Style-Verwaltung" im Administrations-Bereich bist.
Es könnte solch eine Beziehung geben:

Code: Alles auswählen

prosilver
    prosilver Special Edition
        prosilver SE Red Edition
        prosilver SE Gold Edition
newstyle pro
    newstyle ultra
        newstyle ultra-black
    newstyle mono
Obwohl es theoretisch möglich wäre die Hierarchie der Vererbung zu verändern, wird es vermutlich für sehr viele Probleme sorgen und deshalb raten wir davon ab. Die Styles erkennen automatisch welche anderen Styles sie als Basisstyle benötigen. Deshalb ist es das Beste dort nicht einzugreifen.
Standard Style-Einstellungen
Für gewöhnlich sind die Benutzer deines Boards in der Lage zwischen verschiedenen Styles nach ihren Bedürfnissen zu wählen (im Persönlichem Bereich). Allerdings gibt es trotzdem einige Funktionen, mit denen Administratoren in die Verwendung der Styles durch die Benutzer eingreifen können. Diese Einstellungen können verändert werden. Dazu muss im Administrations-Bereich > Tab: Allgemein > Board-Konfiguration > Board-Einstellungen aufgerufen werden.
  • Standard-Style: der dort ausgewählte Style ist der Standard-Style für registrierte Benutzer (bis sie den Style in ihreren Board-Einstellungen im Persönlichem Bereich verändern)
  • Style für Gäste: Der dort ausgewählte Style ist der Standard-Style für alle unregistrierten Besucher (Gäste)
  • Benutzer-Style überschreiben: Diese Einstellung zwingt die Benutzer (und Gäste) dazu den Standard-Style zu verwenden, ungeachtet welche Einstellung sie im Persönlichem Bereich vorgenommen haben

Styles verändern

Warnung: Einen Style zu verändern ist keine triviale Angelegenheit. Solange du keine grundlegenden Kenntnisse von HTML und CSS besitzt und weißt was du tust, empfehlen wir den Style nicht selbst zu verändern.
Info: Informiere dich immer, ob es für deine gewünschten Änderungen eine Erweiterung (Extension) gibt, die deine Anpassungen vornimmt. Erst wenn das nicht möglich ist, solltest du Veränderungen am Style vornehmen.
Wie bereits im Abschnitt Gliederung eines Styles erwähnt, besteht ein Style aus mehreren Teilen. Welche Dateien du bearbeiten musst (Template oder Theme) hängt davon ab, welche Anpassungen du vornehmen willst.

Da es normalerweise nicht möglich ist Dateien direkt auf dem Server zu bearbeiten, musst du die Anpassungen in deiner "lokalen" Kopie (auf deinem Computer) des Styles vornehmen. In der Regel hat es sich bewährt eine lokale Kopie deines kompletten Boards zu besitzen, so kannst du Änderungen erst ausprobieren, bevor du sie zu deinem "Live"-Board hochlädst.

Auf jeden Fall musst du eine lokale Kopie deines Styles besitzen. Entweder indem du die Style-Dateien deines Boards (z. B. via FTP) runterlädst oder in dem du die Dateien deines runtergeladenen Styles bearbeitest (den du von der Style-Datenbank runtergeladen hast).
Hinweis: Dieser Artikel betrachtet nur einige Grundlagen (für unerfahrene Benutzer). Für detailiertere Informationen, schau dir bitte den Artikel Knowledge Base - Einen Style für phpBB 3.2/3.3 modifizieren und erstellen.
Profi-Tipp: Wenn du Änderungen an deinem Style machen willst, empfehlen wir einen Kind-Style auf Basis deines aktuellen Styles anzufertigen. Lies unseren Artikel Knowledge Base - Einen Style für phpBB 3.2/3.3 modifizieren und erstellen für weitere Informationen.
Vorbereitungen
Um Webdateien (wie .html, .css, usw.) bearbeiten zu können, benötigst du einen Text-Editor. Du kannst jeden Text-Editor wählen, den du willst. Allerdings haben manche besondere Funktionen, die dir das Leben erheblich erleichtern. Notepad++ ist z. B. ein guter Text-Editor mit Syntax-Hervorhebung.

Andere Software, die dir hilft, sind Entwickler-Tools für deinen Browser. Wenn du einen modernen Browser benutzt, kannst du diese Tools per Taste F12 aufrufen. Diese Funktionen sind wertvoll und nützlich, wenn du Änderungen an deinem Style vornehmen willst und unentbehrlich, wenn du Fehler suchst. Das Addon "Firebug" ist für Browser wie Firefox und Chrome sehr zu empfehlen.
Ändern des Template
Du kannst so gut wie alles zum Template ergänzen (wenn du die Fähigkeiten besitzt). Alle verschiedenen Aspekte des Template-Systems abzudecken übersteigt den Umfang und die Tiefe dieses Artikels. Deshalb werden hier nur ein paar Dateien, die Benutzer am häufigsten verändern möchten, und Template-Grundlagen vorgestellt.

Diese Liste bezieht sich auf Template-Dateien, wie sie in prosilver (3.1.x) verwendet werden, doch viele Styles haben eine sehr ähnliche oder die gleiche Struktur.
  • template/overall_header.html: ist vermutlich die wichtigste Template-Datei. Sie kontrolliert den Kopf jeder Seite und das <head>-Element.
  • template/overall_footer.html: bestimmt den "Fuß" jeder Seite
  • template/navbar_header.html: bestimmt die Hauptnavigations-Elemente im "Kopf" der Seite
  • template/navbar_footer.html: bestimmt die Hauptnavigations-Elemente im "Fuß" der Seite
  • template/index_body.html: bestimmt die Struktur der Foren-Übersicht
  • template/viewforum_body.html: bestimmt die Struktur der Foren-Ansicht
  • template/viewtopic_body.html: bestimmt die Struktur der Themen-Ansicht
Für weitere Information, wie die verschiedenen Template-Tags und -Conditionals verwendet werden können, empfehlen wir einen Blick in unser Development Wiki zu werfen. Im Moment gibt es keine speziellen Seiten für phpBB 3.1.x Styles, aber ein paar Seiten sind trotzdem zu empfehlen:
Hinweis: Die phpBB Template-Engine muss die Template-Dateien verarbeiten, bevor es sie darstellen kann. Das ist ein ressourcenintensiver Prozess, deshalb werden die Seiten im "Cache" für einen schnellen Zugriff zwischen gespeichert. Wenn du Änderungen an den Template-Dateien machst, musst du danach den Cache leeren (sonst werden deine Änderungen nicht sichtbar sein). Der Cache kann im Administrations-Bereich auf im Tab "Allgemein" geleert werden.
Ändern des Theme
Das Theme ist der kreative Teil des Styles. Änderungen an den CSS-Dateien im Ordner theme/ können weitreichende Effekte bewirken. Die meisten Anwender wollen nur ein paar Farben, Bilder, Schriften und Textgrößen ändern. An dieser Stelle kann ein guter Text-Editor viel Zeit sparen (z.B. wenn er dich optisch auf Syntax- und andere Fehler hinweist).

Benutzer wissen oft genau, was sie verändern möchten, aber nicht welche Datei und welche Zeile genau sie verändern müssen. Das ist der Punkt an dem die Entwickler-Tools (F12) ins Spiel kommen. Die Tools unterscheiden sich von Browser zu Browser, diese Anleitung für die Entwickler-Tools von Google Chrome sollte alles notwendige erklären und lässt sich analog in anderen Browsern anwenden.

Sobald du die passende CSS-Regel oder Klasse ausfindig gemacht hast, die zu dem Element gehört, das du verändern willst, musst du nur in den CSS-Dateien des Styles nach dem entsprechendem Klassenamen suchen. Manche Text-Editoren können in allen Dateien gleichzeitig suchen. Sobald die Änderung vorgenommen wurde, muss die Datei gespeichert und hochgeladen werden.
Hinweis: Alte Eigenschaften und Regeln von CSS-Dateien bleiben manchmal im Cache deines Browser, so siehst du die vorgenommen Änderungen nicht an deiner Website. Mit einem "hard-refresh" kannst du das Problem beheben. Normalerweise funktioniert das in deinem Browser mit der Tastenkombination STRG + F5.

Einen Style aktualisieren

Styles können ohne Vorbereitung aktualisiert werden. Alles was du machen musst, ist: alle neuen Dateien in den gleichen Ordner wie der alte Style hochladen und dich dabei vergewissern, dass du alle Dateien überschreibst.

Danach einfach im Administrations-Bereich in den Tab: Allgemein den "Cache leeren".
Warnung: Wenn du Änderungen an deinem Style vorgenommen hast, wirst du bei einem Update alle Änderungen verlieren. Deshalb muss vor dem Aktualisieren des Style ein Backup der alten Dateien angefertigt werden. Nach dem Update des Styles kannst du deine Änderungen erneut an den neuen Dateien durchführen.

Einen Style deinstallieren

Manchmal ist es notwendig einen Style zu entfernen. phpBB gibt dir die Möglichkeit einen Style entweder zu deaktivieren oder dauerhaft von deinem Board zu deinstallieren.
1. Deaktivieren
Einen Style zu deaktivieren bedeutet ihn quasi auszuschalten und vor deinem Board zu verstecken. Alle Dateien des Styles bleiben genauso auf dem Server erhalten wie Einträge in der Datenbank. So kann der Style ohne ursprünglich vorgenommene Einstellungen reaktiviert werden. Um einen Style zu deaktivieren, muss der Link "Deaktivieren" unter "Tab: Anpassen > Style-Verwaltung > Styles" betätigt werden.
2. Deinstallieren
Um einen Style zu deinstallieren, muss der Link "Deinstallieren" unter "Tab: Anpassen > Style-Verwaltung > Styles" geklickt werden. Das wird den Style von deinem Board entfernen und auch alle Datenbank-Einträge, die zu dem Style gehören. Du bekommst eine Option angezeigt, die es dir ermöglicht den Style vom Dateisystem zu löschen.
Warnung: Bitte sei vorsichtig, wenn du die Funktion "Vom Dateisystem löschen" verwendest. Diese Funktion ist permanent und kann nicht rückgängig gemacht werden. Du musst die Dateien des Styles erneut hochladen, bevor du ihn erneut benutzen kannst.