phpBB.de

Link zu diesem Artikel: Alles auswählen

[url=https://www.phpbb.de/kb/viewarticle?a=32]Knowledge Base - Code des Styles finden und ändern[/url]

Irgendwann kommt jeder Neu-Admin an den Punkt, wo er kleinere Änderungen an der Optik seines Forums vornehmen will. Sei es nur ein zusätzlicher Link im unteren Bereich oder Kopf der Seite, eine Farbe eines Fensters oder Rahmens oder vielleicht doch größere Änderungen in der Beitragsansicht. Irgendwie und irgendwo muss man anfangen und Template- und CSS-Dateien gibt es viele, wo also anfangen mit suchen? Diese Fragen werden in diesem Artikel geklärt und an Beispielen wird der Umgang mit "Firebug" und dem Texteditor "notepad++" gezeigt.

Dieser Artikel setzt voraus, dass du die Grundlagen von CSS und HTML beherrschst. Zusätzlich solltest du Dateien von deinem Webspace/Server runter- und wieder hochladen können. Nützliche Links zum CSS und HTML lernen oder auffrischen gibt es hier: Wo finde ich Scripte & Tutorials?

Vorbereitungen

Zuerst brauchst du einen tauglichen Text-Editor. Am besten einen der HTML- und CSS-Syntax-Highlighting unterstützt. D.h. der Code wird erkannt und entsprechend hervorgehoben. Das erleichtert das Editieren ungemein. Wir empfehlen den Text-Editor notepad++.

Um einfach die passende HTML-Elemente und CSS-Regeln identifizieren zu können, benötigst du ein Tool wie Firebug. Manche Browser bringen sowas Ähnliches schon von Haus aus mit oder es gibt Addons die ähnliches veranstalten. Dort bitte nach dem Link "Element untersuchen" und ähnliches im Kontextmenü eures Browsers Ausschau halten.

HTML-Code finden und ändern

Das erste Beispiel dreht sich um das Finden von HTML-Code in der Themenansicht viewtopic.php?f=1&t=1 und dem Style "prosilver".
Ziel: Der Nickname des Beitragsautors soll statt unter dem Avatar über dem Avatar angezeigt werden.
Bild: Ansicht eines Beitrags in einem Thema

Du solltest dich jetzt in der Themenansicht befinden. Jetzt klickst du auf den "Käfer" von Firebug, am unteren Rand des Browserfensters öffnet sich ein kleines Fenster. Das Fenster ist in zwei Spalten eingeteilt: rechts ist der HTML-Code zu sehen und links der CSS-Code des jeweilig markierten HTML-Elements. Im Beispiel-Bild ist <body> markiert und deshalb werden rechts davon die entsprechenden CSS-Regeln angezeigt.
Bild: Firebug-Fenster im Browser

In der linken, oberen Ecke des Firebug-Fensters ist ein blauer Pfeil. Diesen klickst du jetzt an und fährst mit der Maus über das Forum. Du siehst nun, dass automatisch um deinen Mauszeiger verschiedenen große Blaukästen ausgewählt werden und sich in HTML-Spalte der Code ändert, sprich es werden andere HTML-Elemente markiert.

Jetzt fährst du mit dem Mauszeiger über den Nick des Beitragsautors (im Bild: Admin) und klickst ihn an. In der HTML-Spalte siehst du jetzt den dazu gehörigen HTML-Code. Das hilft uns noch nicht besonders viel weiter. Jetzt scrollst du in der HTML-Spalte ein wenig nach oben. Alle Elemente, die noch andere Element in sich haben, haben ein kleines "Plus" davor. Mit Klick auf das "Plus" öffnen sie sich und zeigen die enthaltenen Elemente.
Bild: Mit Firebug ausgewählter Nickname und Markierung in HTML-Spalte

Das sichtbare <dt> ist so ein Element und es ist schon geöffnet, weil wir sein Kinderelement <a class="username-coloured" ... >Admin</a> markiert haben. Direkt über <dt> ist sein Elternelement, nämlich der Anfang der Definitionsliste: <dl id="profile1" class="postprofile"> Diese Angabe reicht uns, um den HTML-Code im Template zu finden.

Nun brauchen wir notepad++. Also das Programm starten. Oben im Menü wählen wir Suchen und dann In Dateien suchen. In nun erscheinenden Fenster werden die Einstellungen wie im Bild getroffen und zusätzlich bei Verzeichnis wird der Pfad zum Template-Verzeichnis von "prosilver" eintragen:
...\styles\prosilver\template (die "..." sind ein Ersatz, bei dir wird sowas wie C:\phpBB3 davor stehen; wenn du den Pfad nicht auswendig kennst, kannst du auf den "..."-Button rechts neben dem Eingabefeld auswählen)
Bild: Notepad++ "In Dateien suchen"

Es wird absichtlich nicht nach dem ganzen Code <dl id="profile1" class="postprofile"> gesucht, weil er sich in Form und Ziffer unterscheiden kann und wir dann nichts finden. Jetzt auf Alle suchen klicken. Das kann einen Moment dauern, ein bisschen Geduld.

Nun hat sich in Notepad++ auch ein kleines Fenster am unteren Rand geöffnet. Es zeigt an:

nach was gesucht wurde: Seach "class="postprofile""
wie viele Treffer es gibt: (3 hits in 3 files) (3 Treffer in 3 Dateien)
und die Treffer an sich.

Letzteres ist immer so ausgebaut:

F:\xampp\htdocs\blank\styles\prosilver\template\search_results.html (1 hits)
Line 101: <dl class="postprofile">

Pfad zur Datei, Zeile des Fundes inkl. kurzem Auszug aus dem HTML-Code.
Bild: Suchergebnisse von Notepad++

In unserem Fall gibt es 3 Treffer in 3 Dateien. Da wir in der Themenansicht mit dem Link viewtopic.php?f=1& t=1 sind, ist das Ergebnis zur viewtopic_body.html am sinnvollsten:

F:\xampp\htdocs\blank\styles\prosilver\template\viewtopic_body.html (1 hits)
Line 169: <dl class="postprofile" id="profile{postrow.POST_ID}">

Per Doppelklick auf die Zeile:

Code: Alles auswählen

Line 169: 			<dl class="postprofile" id="profile{postrow.POST_ID}">

öffnet Notepad++ automatisch die Datei und springt die Zeile 169 an.
Bild: Gefundene Code-Stelle vor der Änderung

Der erste Schritt ist gemacht. Jetzt müssen wir den Code für den Nicknamen finden. Durch die Firebug-Anzeige wissen wir, dass sich das Nickname innerhalb des <dt>-Elements befindet, was direkt nach <dl class="postprofile" id="profile{postrow.POST_ID}"> kommt. Letzteres ist unser Fund. Zurück zum Browser und Firebug sehen wir, dass der Nick ein Link ist <a>, der sich direkt nach einem   ist (Achtung: Firebug macht zwischen   und   keinen Unterschied in der Anzeige. Da das phpBB XHTML 1.0 Strict ist, suchen wir nach  )

Wir sehen sofort diese Stelle:

Code: Alles auswählen

<dt>
				<!-- IF postrow.POSTER_AVATAR -->
					<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
				<!-- ENDIF -->
				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
			</dt>

Das umschließende <dt>-Element ist vorhanden und dadrin die Abfrage bezüglich AVATAR und die Ausgabe des Avatar, direkt dahinter das  . Also muss danach der Link zum Nicknamen kommen. Stattdessen findet man nur dies hier:

Code: Alles auswählen

<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->

Kein <a> und zwei verschiedene Ausgaben. Das  können wir auch nicht ausmachen. Aber durch den Text der Variable {postrow.POST_AUTHOR_FULL} liegt der Verdacht nahe, dass wir richtig sind.

Die einfachste Lösung ist jetzt: ausprobieren. Alternativ: kann man der Variable hinterher gehen und schauen, wie sie erstellt und womit gefüllt wird.

Wir markieren also die ganze Zeile 174 (einfach mit der Maus: drücken, halten und drüber fahren; der Code wird dunkelgrau hinterlegt) und schneiden sie aus (Tastenkombination: "STRG + X" oder Menüleiste: "Bearbeiten --> Ausschneiden") und fügen den Code über dem Avatar ein. Dazu setzen wir den Cursor in Zeile 171 vor  und drücken einmal "Enter" und danach fügen wir den Code in Zeile 171 ein (Tastenkombination "STRG + V" oder Menüleiste: "Bearbeiten einfügen"). Das eben erwähnte   muss nun auch umplatziert werden. Wir löschen es hinter {postrow.POSTER_AVATAR} und tragen es direkt hinter {postrow.POST_AUTHOR_FULL} in Zeile 171 neu ein.

Die Datei muss jetzt noch gespeichert und hochgeladen werden. Danach muss das Template des phpBB aktualisiert werden, siehe Einen Style installieren und benutzen

Das war es schon. Im nächsten Beispiel suchen und finden wir CSS-Code.

CSS-Code finden und ändern

Jetzt wollen wir uns mit dem CSS-Code beschäftigen. Jeder CSS-Code, genauer gesagt die CSS-Regeln für den Style sind im Ordner \styles\prosilver\theme\ gespeichert. Je nach Style in einer oder mehreren Dateien. Wir nehmen uns wieder "prosilver" an. Diesmal möchten wir den blauen Hintergrund der Kategorien auf der Foren-Übersicht verändern. Wir befinden uns also hier: /index.php
Bild: Ansicht des Kategorie-Hintergrunds

Nun wählst du wieder den Käfer von Firebug an und danach auf den blauen Pfeil. Jetzt wird die Kategorie markiert und zwar so, dass der blaue Rahmen von Firebug die ganze Kategorie, und nur die eine Kategorie, umschließt. In der HTML-Spalte von Firebug ist das HTML-Element <div class="forabg"> markiert.
Bild: Ausgewählte Kategorie mit Anzeige von CSS-Regeln in Firebug

In der CSS-Spalte wird ganz oben folgende CSS-Regel angezeigt:

Code: Alles auswählen

.forabg {
    background-color: #0076B1;
    background-image: url("./styles/prosilver/theme/images/bg_list.gif");
}

Jetzt kann man auf #0076B1 klicken und die Farbe durch eine andere ersetzen, wir nehmen zum Beispiel mal #FF0000. Wenn du das tust, wirst du bei einer Kategorie die nur ein Forum enthält keine Änderung feststellen. Schuld ist die Angabe des Hintergrundbildes direkt da drunter. Diese überdeckt die neue Farbe. Also klickst du auf url("./styles/prosilver/theme/images/bg_list.gif") und löscht es zum testen einfach mal raus. Die Kategorie ist jetzt rot. Damit haben wir die Bestätigung, dass wir die richtige CSS-Regel gefunden haben.

Also wieder Notepad++ gestartet und zu Suchen --> In Dateien suchen. Diesmal suchen wir nach dem Selektor .forabg. Also Verzeichnis wird: styles\prosilver\theme eingetragen. Der Filter sollte auf *.* oder *.css stehen. Alle suchen.

Notepad++ zeigt jetzt 11 Treffer in 4 Dateien an. Das ist auf den ersten Blick ein wenig unübersichtlich, aber ein genauerer Blick löst die Sache auf. Der erste Treffer zeigt einen Selektor .rtl .forabg an, dass nicht der aus der Firebug, wir suchen einen alleinstehenden Klassen-Selektor. Diesen gibt es nur in der colours.css und common.css. Da wir eine Farbe ändern wollen, probieren wir zuerst colours.css, also Doppelklick auf Line 60: .forabg {.
Bild: Ansicht der gefundenen Code-Stelle in der colours.css

Wir erhalten die CSS-Regel in der colours.css:

Code: Alles auswählen

.forabg {
	background-color: #0076b1;
	background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}

Das sieht genauso aus, wie in der CSS-Spalte von Firebug. Wir ändern die Farbe auf #FF0000 und löschen das Hintergrundbild (Zeile 62). Danach wird die Datei gespeichert, hochgeladen und gemäß KB:tippstyles das "Theme" aktualisiert. Die Kategorien sind jetzt rot hinterlegt.

Auf diese Art könnt ihr jede CSS-Regel, jeden HTML-Code-Abschnitt finden und ändern.