Implementierung der PHP Applikationen in RW – phpBB Forum

Ich wurde öfters nach einer Implementierung des phpBB Forums wie das Test-Forum auf meiner Seite.
Ich möchte deswegen hier ein HowTo erstellen. Ich hoffe dass die Schritte in Bild und Schrift genug Informationen geben auch andere Vorlagen zu benutzen.

Die schon bestehende Homepage hat erstmal drei Seiten (Home, Kontakt und Impressum):

in RW:

wp-phpbb-02
auf dem Server:

wp-phpbb-01
und soll das phpBB Forum als Hauptseite.

Ich habe für die Homepage die RW-Vorlage Caribou mit der Vorgabe der Vorlage als Stil benutzt und das Forum soll die Vorlage xabb Blue bekommen (allerdings ohne Header).

1. Instalation des Forums
Das Komplettpaket der deutschen Version runterladen und installieren.
Die Instalation des Forums wurde hier in dem Ordner phpBB3 aber man kann den Ordner phpBB3 auch in forum umbenennen. Ob der Name des Ordners eines schon bestehendes Forums umbenannt werden darf weiss ich zur Zeit, aber ich vermute stark dass zumindest die Tabelle phpbb_config der Datenbank geändert werden muss.
Die xabb Blue Vorlage für phpBB3 runterladen. Die Vorlage benutzt die Farbe blau vorwiegend. Es gibt allerdings auch eine grüne und eine rote Variante.
Und die Vorlage xabb Blue in dem Ordner styles des Forums kopieren:
wp-phpbb-03

2. Eine “leere” Seite in RW erstellen
Damit das Forum in einer Seite mit einer RW-Vorlage “einfliessen” kann, muss die Vorlage des Forums die Angaben über die Pfade der CSS Dateien dieser Vorlage und die HTML Bereiche dieser Vorlage beinhalten.
Man kann dafür jetzt eine “leere” Seite erstellen und nachdem die Seite publiziert wird, die benötigte Teile des Codes kopieren und in der Vorlage des Forums einfügen.
Eine RW-Seite stellt immer den Inhalt in dem Bereich:

<div id="content">
...
</div>

Man kann dadurch (um gleich ein Orientierungspunkt zu erstellen) in dieser “leeren” Seite ein Wort schreiben der sicher nicht in dem Code der Seite oder des Forums auftaucht. Ob jetzt der Nachname einer Persönlichkeit oder ein Name eines Gegenstandes es ist egal. Ich werde hierfür das Wort Nikon nehmen.
Eine HTML-Seite an dem Platz der Navigation einfügen wo später auch das Forum stehen wird:
wp-phpbb-04
Dieser Seite den Stil vergeben der später die Forum Seite auch haben wird.
Da gar nicht ausgeschlossen ist dass die Seite des Forums nicht bestimmte CSS Bestimmungen haben muss, und es einfacher ist diese CSS Befehle gleich in einer separaten CSS Datei der Vorlage schreibt, würde ich vorschlagen eine CSS Variation der Vorlage einzufügen nach dem Muster der auf der Seite http://www.costel-marian.de/?p=19 sich befindet.
Dafür den Punkt 1. Neue Varianten dieser Vorlage einfügen mit seinen Unterpunkten befolgen.
ALLERDINGS:
Bei dem Punkt 1.2 Eine Variante in dieser Gruppe erstellen
die CSS Datei die erstellt werden soll NICHT content-blocksatz.css benannt werden sondern fuer-phpbb.css.
Diese Datei soll leer gespeichert werden:
wp-phpbb-05
Und als Code in theme.plist:

				<key>GroupName</key>
				<string>Content Colour</string>
			</dict>
			<dict>
				<key>GroupMembers</key>
				<array>
					<dict>
						<key>Enabled</key>
						<false/>
						<key>Files</key>
						<array>
							<string>css/zusatz/fuer-phpbb.css</string>
						</array>
						<key>Name</key>
						<string>Zusatzcode für phpBB</string>
						<key>Type</key>
						<string>Stylesheet</string>
					</dict>
				</array>
				<key>GroupName</key>
				<string>[+] Zusatzeinstellungen</string>
				<key>GroupSelectionLimit</key>
				<integer>0</integer>
			</dict>
		</array>
	</dict>
	<key>RWTemplateHTML</key>
	<string>index.html</string>

eingeben. Damit wird eine neue CSS Datei bei der Publizierung in der Vorlage erstellt.
Die Breite eines Forums wird bestimmt genauso groß wie die Seite selbst, so dass Sidebar Location auf None gestellt werden muss.
Zusammen mit dem ausgewählten neue Zusatzeinstellung “Zusatzcode für phpBB” den erzeugten Stil

als zusatzcsscode-phpbb speichern:

wp-phpbb-06

und der Seite vergeben:

wp-phpbb-07

Jetzt die Seite publizieren.

RW wird die index.html Datei in dem Ordner phpBB3 erstellen die alle HTML Angaben hat die in der Vorlage des Forums eingefügt werden:
wp-phpbb-08

3. Anpassung der Forum Vorlage
3.1 Administration des Forums
Zuerst in der Administration des Forums die xabb Blue Vorlage installieren, aktivieren und als Standard-Style festlegen (STYLES/STYLE-VERWALTUNG/Styles):
wp-phpbb-09
Ob prosilver Vorlage deinstalliert werden soll oder nicht, kann jeder selber entscheiden.

In ALLGEMEIN/SERVER-KONFIGURATION/Serverlast Rekompilieren veralteter Style-Komponenten auf Ja stellen (um die Seiten nicht immer aus dem Cache aufgerufen zu werden):
wp-phpbb-10
Wenn die Implementierung abgeschlossen ist, man soll diese Einstellung wieder auf Nein stellen um die Seiten wieder aus dem Cache aufgerufen zu werden.

3.2 Die Datei phpBB3/styles/xabbblue/template/overall_header.html
In dieser Datei werden die Pfade zu den CSS Dateien und der JavaScript der RW-Vorlage, die Weichen zu der Internet Explorer und die Bereiche des Layouts bis zu #content eingebracht. Die Datei beinhaltet auch die erste Hälfte des Forums und von da muss die Headergrafik rausgenommen. Unter Umständen müssen auch noch einige Elemente des Forums (wie der Text-Zoom) entfernt werden (wenn sie den Layout zerstören).
(Am Ende des Beitrages werde ich den geenderte Code der Datei overall_header.html nochmal posten.)

Die Datei phpBB3/index.html und die Datei phpBB3/styles/xabbblue/template/overall_header.html in einem Texteditor öffnen. Gute Texteditoren wie TextWrangler oder Smultron benutzen.

3.2.1 Die Pfade zu den CSS Dateien der RW-Vorlage anbringen
Aus der von RW erstellten index.html Datei den Code:

<link rel="stylesheet" type="text/css" media="screen" href="../rw_common/themes/caribou/styles.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="../rw_common/themes/caribou/css/ie6.css" /><![endif]-->
<link rel="stylesheet" type="text/css" media="screen" href="../rw_common/themes/caribou/colourtag-zusatzcsscode-phpbb.css" />
<link rel="stylesheet" type="text/css" media="print" href="../rw_common/themes/caribou/print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="../rw_common/themes/caribou/handheld.css" />
<!--[if IE 6]><style type="text/css" media="screen">body {behavior: url(../rw_common/themes/caribou/csshover.htc);}</style><![endif]-->
<link rel="stylesheet" type="text/css" media="screen" href="../rw_common/themes/caribou/css/banner/swirls.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../rw_common/themes/caribou/css/logo_position/center.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../rw_common/themes/caribou/css/sidebar/sidebar_none.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../rw_common/themes/caribou/css/icons/black.css" />

kopieren und in overall_header.html hinter dem Text:

<!--
	phpBB style name: xabbBlue
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by: www.phpbb-styles.com

	NOTE: This page was generated by phpBB, the free open-source bulletin board package.
	      The phpBB Group is not responsible for the content of this page and forum. For more information
	      about phpBB please visit http://www.phpbb.com
-->

einfügen.
3.2.2 Die Pfade zu der JavaScript Datei der RW-Vorlage und IE-Weichen anbringen
Dann aus index.html den Code:

		<link rel="stylesheet" type="text/css" media="screen" href="../rw_common/themes/caribou/css/zusatz/fuer-phpbb.css" />

		<script type="text/javascript" src="../rw_common/themes/caribou/javascript.js"></script>

		<!--[if IE 6]><script type="text/javascript" charset="utf-8">	var blankSrc = "../rw_common/themes/caribou/png/blank.gif";</script>
		<style type="text/css">	img { behavior:	url("../rw_common/themes/caribou/png/pngbehavior.htc"); }</style><![endif]-->

kopieren und in overall_header.html VOR

</head>

einsetzen.
3.2.3 Die HTML Bereiche der Vorlage bis zu dem festgelegten Wort anbringen
Dann aus index.html den Code:

<div id="bar"></div>
<div id="container"><!-- Start container -->
	<div id="pageHeader"><!-- Start page header -->
		<div id="navcontainer"><!-- Start Navigation -->
			<ul><li><a href="../index.html" rel="self">Home</a></li><li><a href="index.html" rel="self" id="current">Forum</a></li><li><a href="../kontakt/kontakt.php" rel="self">Kontakt</a></li><li><a href="../impressum/impressum.html" rel="self">Impressum</a></li></ul>
		</div><!-- End navigation -->
		<div id="title">
			<div id="logo"></div>
			<h1>Meine Website</h1>
			<h2>Changing the world, one site at a time…</h2>
			<div id="overlay_swirls"><img src="../rw_common/themes/caribou/images/header_swirls.png" alt="" style="width: 900px; height: 150px;" /></div>
			<div id="overlay_stripes_glow"><img src="../rw_common/themes/caribou/images/header_stripes_glow.png" alt="" style="width: 900px; height: 150px;" /></div>
			<div id="overlay_stripes_solid"><img src="../rw_common/themes/caribou/images/header_stripes_solid.png" alt="" style="width: 900px; height: 150px;" /></div>
			<div id="overlay_curve_solid"><img src="../rw_common/themes/caribou/images/header_curve_solid.png" alt="" style="width: 900px; height: 150px;" /></div>
		</div>
		<div id="background"><img src="../rw_common/themes/caribou/images/header_bg.png" alt="" style="width: 914px; height: 197px;" /></div>
	</div><!-- End page header -->

	<div id="contentContainer"><!-- Start main content wrapper -->
		<div id="content"><!-- Start content -->
			<div class="contentSpacer"></div><!-- this makes sure the content is long enough for the design -->

kopieren (hier sind alle Bereiche VOR dem Wort Nikon das ich bei der Erstellung der HTML Seite in RW festgelegt habe)
und in overall_header.html NACH

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

	<a id="top" name="top" accesskey="t"></a>

einsetzen.

3.2.4 In der Navigation index.html in index.php ersetzen
Die index.html Datei ist selbst in der Navigation mit index.html aufgeführt.
Das Forum aber wird immer mit index.php aufgerufen. So dass in der Navigation muss das geändert werden.
In overall_header.html nach

<li><a href="index.html" rel="self" id="current">Forum</a></li>

suchen und mit

<li><a href="index.php" rel="self" id="current">Forum</a></li>

ersetzen.

3.2.5 Alle Pfade zu den Dateien der Homepage mit phpBB Funktion ersetzen
Die Vorlage hat mit Funktion

	var base_url = '{A_BASE_URL}';

die Möglichkeit auf root zu gelangen. Und da der Ordner rw_common (die RW-Vorlage) oder die Ordner zu den anderen Seiten der Homepage sich da befinden kann man jetzt nach

../

suchen und mit

{A_BASE_URL}/

ersetzen.
Befindet sich die Homepage NICHT im root sondern in einem anderen Ordner auf dem Server (Testordner etc), dann muss mit

{A_BASE_URL}/pfad-zu-homepage/

ersetzt werden.

Jetzt kann man die Datei overall_header.html speichern.

3.3 Die Datei phpBB3/styles/xabbblue/template/overall_footer.html
In dieser Datei wird nur der Code Bereich aus index.html HINTER dem festgelegten Wort kopiert und eingesetzt.
(Am Ende des Beitrages werde ich den geenderte Code der Datei overall_footer.html nochmal posten.)

Die Datei phpBB3/index.html und die Datei phpBB3/styles/xabbblue/template/overall_header.html in einem Texteditor öffnen.
Den ganzen Code der hinter dem festgelegtem Wort sich befindet kopieren und in overall_footer.html STATT

</body>
</html>

einsetzen und die Datei overall_footer.html speichern.

4. Die Weiterleitung Seite zu dem Forum in RW erstellen
Alle Seiten in dem RW-Projekt haben in deren Navigation Pfade zu der Datei index.html aus dem Ordner phpBB:
wp-phpbb-04
Diese Seite muss zuerst mit einer Weiterleitungsseite ersetzt werden (in der Navigation des RW-Projekts die Forum-Seite mit der rechten Maustaste klicken und aus dep Popup-Fenster Forum ersetzen… anklicken).
Dann in Page Inspector das Icon Seite anklicken und in dem URL Feld den absoluten Pfad zu phpBB3/index.php eingeben (http://deine-homepage.de/phpBB3/index.php oder wenn die Homepage in einem Unterordner sich befindet http://deine-homepage.de/pfad-zu dem-ordner/phpBB3/index.php):
wp-phpbb-11
Dann bei den allgemeinen Einstellungen dieser Seite
in dem Feld Ordner: phpBB3
und in dem Feld Dateiname: index.php
eingeben.
wp-phpbb-12
Das Projekt speichern und publizieren.

“Technisch und theoretisch” ist das Forum eingebunden. Das Ergebnis kann bestaunt werden, allerdings gibt es noch einige Einstellungen zu erledigen.
5. Anpassungen
5.1 Titel und Slogan RW – Forum
Wenn der Titel under der Slogan von RW-Projekt in der Forum-Administration bei ALLGEMEIN/BOARD-KONFIGURATION/Board-Einstellungen eingefügt wurde dann muss man nichts mehr tun.
Hat man aber in dem Forum andere Angaben und möchte man sie auch in dem Hintergrund des Headers haben dann muss man den Code aus overall_header.html:

				<h1>Meine Website</h1>
				<h2>Changing the world, one site at a time…</h2>

mit

				<h1>{SITENAME}</h1>
				<h2>{SITE_DESCRIPTION}</h2>

ändern.
5.2 Header des Forums löschen
In overall_header.html den Code:

		<div class="headerbar">
		 <div id="wrap">
			<div class="inner">

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>

			</div>
		 </div>
		</div>

löschen.

5.3 CSS Anpassung
phpBB hat ein komplizierten System für das Management der CSS Dateien und der CSS Angaben.
Der Code aus der Datei overall_header.html

<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

ruft auf eine Zusammensetzung der CSS Befehlen aus der MySQL Datenbank.
Diese Zusammensetzung der CSS Befehle befindet sich in der Tabelle phpbb_styles_theme und wird bei der Instalation des Styles (Forum-Vorlage) in der Datenbank eingefügt, nachdem die Datei stylesheet.css (aus dem Ordner styles/name-des-styles-/theme) mehrere CSS Dateien zusammengefügt hat.
Diese Dateien sind ersichtlich in dem Code dieser stylesheet.css Datei:

@import url("common.css");
@import url("links.css");
@import url("content.css");
@import url("buttons.css");
@import url("cp.css");
@import url("forms.css");
@import url("tweaks.css");
@import url("colours.css");

Alle Styles die auf der Basis von dem Originalstyle prosilver arbeiten nach dem gleichen System.

5.3.0 Aktualisierung der CSS Angaben in der Datenbank
Deswegen, entweder nach einer Änderung oder nach mehreren Änderungen der CSS Befehlen in den entsprechenden Dateien man muss diese Datenbanktabelle aktualisieren.
Sie wird in STYLES/STYLE-KOMPONENTEN/Themes durchgeführt wenn den Link Aktualisieren des entsprechendes Style angeklickt wird:

wp-phpbb-13
wp-phpbb-14

Aber nach der Änderung einigen Befehle und das Durchführen dieses Schrittes wird das Ganze einfach zu verstehen.

5.3.1 Die Breite des Forums
In der Datei styles/xabbblue/theme/common.css wird unter

#wrap {
	padding: 0px 20px;
	min-width: 650px;
	width: 860px;
	margin: 0 auto;
}

die Breite des Forums mit 860px angegeben und dadurch zu breit.
Einfach die

	width: 860px;

Angabe löschen, die Datei abspeichern und dann den Schritt 5.3.0 durchführen.
Schon besser!

5.3.2 Der leere Platz unter der Forum-Navigation entfernen
Für diesen Platz sind einige clear-Befehle verantwortlich die auf both gesetzt sind. Warum auch immer, viele RW-Vorlagen haben ein Problem damit.
Die Bereiche die diese Befehle benutzen befinden sich auch in der Datei styles/xabbblue/theme/common.css:

#page-body {
	margin: 4px 0;
	clear: both;
}

.forabg {
	background: #b1b1b1 none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 0 5px;
	clear: both;
}

.forumbg {
	background: #ebebeb none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 0 5px;
	clear: both;
}

span.corners-bottom {
	background-image: none;
	background-position: 0 100%;
	margin: 0 -5px;
	clear: both;
}

Bis auf #page-body wo

	clear: left;

sein muss, alle andere bekommen

	clear: none;

Die Datei speichern und dann den Schritt 5.3.0 durchführen.
Noch besser!

5.3.3 Der leere Platz vor dem Anfang eines Threads entfernen
Für diesen Platz sind wieder zwei clear-Befehle verantwortlich die auf both gesetzt sind.
In der Datei styles/xabbblue/theme/common.css:

.clear {
	display: block;
	clear: both;
	font-size: 1px;
	line-height: 1px;
	background: transparent;
}

und in der Datei styles/xabbblue/theme/content.css:

.postbody {
	padding: 0;
	line-height: 1.48em;
	color: #333333;
	width: 76%;
	float: left;
	clear: both;
}

Beide bekommen

	clear: none;

dann die Dateien speichern und den Schritt 5.3.0 durchführen.
Bestens!

5.3.4 “Aktuelle Zeit: …” als nichtangemeldete User
Als nichtangemeldete User bekommt man die Eintragung “Aktuelle Zeit: …” sehr nah an der FAQ-Suche-Registrieren-Anmelden Linie. Die Eintragung aus der Datei styles/xabbblue/theme/content.css:

p.right {
	text-align: right;
}

muss in

p.right {
	text-align: right;
	display: inline;
}

geändert werden, dann die Datei speichern und den Schritt 5.3.0 durchführen.

5.3.5 FAQ-Seite
Dieser Mischmasch auf der FAQ-Seite kommt aus… Richtig, wieder clear-Geschichten ;-)
(Ich hoffe nicht dass ich alle clear-Befehle aus dem Forum streiche!)
In styles/xabbblue/theme/common.css gibt es:

span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}

.column2 {
	float: right;
	clear: right;
	width: 49%;
}

und in Zusammenarbeit mit dieser RW-Vorlage müsste stehen:

span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
	clear: left;
}

.column2 {
	float: right;
	width: 49%;
}

Die Datei speichern und und den Schritt 5.3.0 durchführen.

Ich glaube jetzt sieht das Forum Bereich schon ganz passabel.
Für andere Arbeiten (Hintergrunde, Farben etc) müssen aus den anderen CSS Dateien des Styles geändert (und immer wieder den Schritt 5.3.0 durchführen).

5.3.6 Navigation, PageHeader und Footer anpassen
Was noch zu erledigen ist sind die Größen der Buchstaben aus der Navigation, PageHeader und Footer. Sie wurden von den CSS Einstellungen des Styles umgewandelt und dazu in dem Schritt 2. Eine “leere” Seite in RW erstellen wurde eine Variante in der RW-Vorlage Caribou erstellt (mit der Hilfe der Anleitung von der Seite http://costel-marian.de/wordpress/?p=19) und die Datei rw-common/themes/caribou/css/zusatz/fuer-phpbb.css ist leer auf dem Server.
Man muss diese Datei in der RW-Vorlage in einem Texteditor laden und diesen CSS Code einfügen:

#navcontainer a {
	font: bold 1.3em Arial, "Lucida Grande", Lucida, Verdana, sans-serif !important;
}

#footer p {
	font: 1.4em/1.6 Arial, "Lucida Grande", Lucida, Verdana, sans-serif !important;
}

#pageHeader h1 {
	font: 3.3em Arial, "Lucida Grande", Lucida, Verdana, sans-serif !important;
}

#pageHeader h2 {
	font: 2.5em Arial, "Lucida Grande", Lucida, Verdana, sans-serif !important;
}

Die Datei speichern und bei dem nächsten Publizieren wird diese Datei auf dem Server aktualisiert.

Das ist schon eine ganze Menge Arbeit. Aber im Endeffekt auch wieder nicht. Der jenige der es braucht wird wohl mit studieren und kopieren/einsetzen einen Nachmittag (oder noch weniger) verbringen.
Die Schritte wurden diesmal immer nachgemacht und dann hier aufgeschrieben, so dass ich glaube dass wenige Fehler sind ;-)

Und hier das ferige Ergebnis: http://costel-marian.de/phpBB-implementierung/phpBB3/index.php

Der Anlass allerdings wurde eine Anfrage aus Italien (Ciao Italia!), auch wenn ich die Implementierung schon hatte, habe ich nicht die Zeit gefunden alle Schritte nach und nach zu erstellen und sie gleich zu dokumentieren.

Kommentieren ist momentan nicht möglich.