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

in RW:

auf dem Server:

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:

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:

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:

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:

und der Seite vergeben:

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:

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

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

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:

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

Dann bei den allgemeinen Einstellungen dieser Seite
in dem Feld Ordner: phpBB3
und in dem Feld Dateiname: index.php
eingeben.

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:

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.

1. Neue Varianten dieser Vorlage einfügen
1.1 Eine Gruppe für die Varianten erstellen
Die Datei theme.plist der Vorlage mit einem Texteditor und an dem Ende des Content Colour Bereich scrollen:

				<key>GroupName</key>
				<string>Content Colour</string>
			</dict>
		</array>
	</dict>
	<key>RWTemplateHTML</key>
	<string>index.html</string>

Dieser Bereich endet mit dem Tag

</dict>

Nach diesem Endtag den Code für eine neue Variantengruppe der Vorlage einfügen:

				<key>GroupName</key>
				<string>Content Colour</string>
			</dict>
			<dict>
				<key>GroupMembers</key>
				<array>

				</array>
				<key>GroupName</key>
				<string>[+] Zusatzeinstellungen</string>
				<key>GroupSelectionLimit</key>
				<integer>0</integer>
			</dict>
		</array>
	</dict>
	<key>RWTemplateHTML</key>
	<string>index.html</string>

Dadurch wird in das Fenster Stile der Vorlage erstmal eine neue Gruppe eingefügt:

Bitte aus dem Vergleich des Codes und des Bildes die Zusammenhänge erstellen: Der Name dieser Gruppe steht in

<string>[+] Zusatzeinstellungen</string>

1.2 Eine Variante in dieser Gruppe erstellen
Die Varianten der Vorlage benutzen immer eine CSS Datei die meistens in dem Ordner css der Vorlage sich befindet. Dieser Ordner beinhaltet auch andere Ordner wo die CSS Dateien gruppiert sich befinden, aber das System dieser Gruppierung legt der fest.
Das Programm kennt den Pfad diesen Dateien, und benutzt ihn, weil diese Dateien in der theme.plist Datei angegeben sind.
Die Vorlage soll also eine Variante die den Text in dem Content in Blocksatz darstellt.
Zuerst in dem Ordner css der Vorlage einen Ordner zusatz erstellen. Dann mit einem Texteditor eine Datei mit diesem Code erstellen:

#contentContainer #content {
	text-align: justify;
}

und als content-blocksatz.css in dem Ordner zusatz speichern:

Jetzt muss diese CSS Datei in der theme.plist Datei angemeldet werden:

				<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/content-blocksatz.css</string>
						</array>
						<key>Name</key>
						<string>Inhalt aus dem Content als Blocksatz</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>

mit dem Ergebnis:

Wenn so eine Variante standardmäßig aktiviert werden soll, muss man den Code ändern in:

						<key>Enabled</key>
						<true/>

Ich habe diese Variante als Auswahlbox und nicht als Radiobutton erstellt weil die Radiobuttons als “entweder … oder” funktionieren während die Auswahlbox Möglichkeiten dem Muster “sowohl … als auch” anbieten.

Eine Gruppe mit Radiobutton-Varianten muss den Code:

				<key>GroupSelectionLimit</key>
				<integer>1</integer>

haben wie z.B. die Banner Design Gruppe.

2. Farbe bestimmten Elementen zuweisen
Bestimmte Bereiche kann man durch einem Farbwähler die Standardfarbe ändern.
Diese Bereiche müssen ein Tag-Wort bekommen damit die Farbe in der Variante der Datei colourtag.css (die für jede Seite oder für jeden gespeicherten Stil erstellt wird) geändert wird.
Die Caribou Vorlage benutzt für den Hintergrund des Footers schon ein Farbwähler aber nicht für den Text des Footers. Dieser Text hat zwar einen Schatten, aber er ist immer weiss. Würde man den Hintergrund auch weiss stellen, sieht man in diesem Bereich nur den Schatten.
Deswegen soll dieser Bereich auch einen Farbwähler bekommen, so wie Main Text, Sidebar Headings, Sidebar Text etc.
Dem Tag-Wort für solche Bereiche muss ein % Zeichen davor und danach eingefügt, und natürlich muss dieses Tag-Wort nicht identisch mit einem das für andere Bereiche auch benutzt wird.
Die Vorlage Caribou benutzt für den Hintergrund des Footers das Tag-Wort:

%colour_footer_bg%

Es würde sich anbieten für den Text dieses Bereiches das Tag-Wort:

%colour_footer%

zu benutzen.
2.1 Einen neuen Farbwähler für ein Element einfügen
Zuerst, in der theme.plist Datei hinter dem Farbwähler für die Links aus der Content Colour Gruppe

					<dict>
						<key>DefaultColour</key>
						<string>#656565</string>
						<key>DisplayName</key>
						<dict>
							<key>de</key>
							<string>Links</string>
							<key>en</key>
							<string>Links</string>
							<key>fr</key>
							<string>Links</string>
							<key>it</key>
							<string>Links</string>
							<key>ja</key>
							<string>Links</string>
						</dict>
						<key>Name</key>
						<string>Links</string>
						<key>Tag</key>
						<string>%colour_tags_links%</string>
						<key>Type</key>
						<string>Colour</string>
					</dict>

den Code für den Farbwähler des Textes im Footer eingeben (hier zusammen mit dem für Links und mit dem Ende der Farbgruppe):

					<dict>
						<key>DefaultColour</key>
						<string>#656565</string>
						<key>DisplayName</key>
						<dict>
							<key>de</key>
							<string>Links</string>
							<key>en</key>
							<string>Links</string>
							<key>fr</key>
							<string>Links</string>
							<key>it</key>
							<string>Links</string>
							<key>ja</key>
							<string>Links</string>
						</dict>
						<key>Name</key>
						<string>Links</string>
						<key>Tag</key>
						<string>%colour_tags_links%</string>
						<key>Type</key>
						<string>Colour</string>
					</dict>
					<dict>
						<key>DefaultColour</key>
						<string>#FFFFFF</string>
						<key>DisplayName</key>
						<dict>
							<key>de</key>
							<string>Footer Text</string>
							<key>en</key>
							<string>Footer Text</string>
							<key>fr</key>
							<string>Footer Text</string>
							<key>it</key>
							<string>Footer Text</string>
							<key>ja</key>
							<string>Footer Text</string>
						</dict>
						<key>Name</key>
						<string>Links</string>
						<key>Tag</key>
						<string>%colour_footer%</string>
						<key>Type</key>
						<string>Colour</string>
					</dict>
				</array>
				<key>GroupName</key>
				<string>Content Colour</string>
			</dict>

Nach dem Speichern der theme.plist Datei der Page Inspector würde diesen Inhalt zeigen:

2.2 Die Verbindung mit der colourtag.css Datei
Für den Bereich #footer, die Datei colourtag.css legt nur die Farbe des Hintergrundes fest:

#footer {
	background-color: %colour_footer_bg%;
}

Einfach an diesem Code auch die Bestimmung für die Farbe des Textes einfügen:

#footer {
	color: %colour_footer%;
	background-color: %colour_footer_bg%;
}

Die Datei colourtag.css speichern und damit auch dem Text im Footer die Möglichkeit haben eine andere Farbe zu geben.

Ich hoffe dass ich keine gravierende Fehler gemacht habe und dass der Beitrag jemandem nützlich wird.

1. Zuerst in RW erledigen:
In einer Projektdatei in der Stelle der Navigation wo später der Shop kommen soll eine HTML Seite erstellen.
Einen Namen für die Navigation geben (bei mir ist einfach Testshop, da ich nichts zu verkaufen habe) einen Ordername zuweisen. Der Shop von osCommerce ist in dem Ordner catalog (der später bei der Installation auf dem Server kommen wird). Ob dieser Name auch weiterhin bleiben soll oder vielleicht shop oder anderswie heissen soll bleibt euch überlassen. Allerdings dieser Ordnername muss sowohl hier festgelegt werden als auch später bei der Installation von osCommerce dem Ordner catalog gegeben werden!
Als Dateiname bekommt diese Seite index.php.

Die Seite soll alle Merkmale (Farben, Aussehen etc) bekommen die später die Shopseite auch haben soll. Man kann sicherlich die Sidebars der Shop in der Sidebar der Seite später tun, man kann nur eine Sidebar des Shops in die Sidebar der Seite tun und dann auf der Seite den content und noch eine Sidebar. Die Screenshots von http://www.oscommerce.com/solutions/oscommerce zeigen in etwa welche Teile und wo sie auf der Seite kommen. Entprechend muss die Breite der Seite gewählt werden, mit oder ohne Sidebar etc.
Als Text in der Seite einfach das Wort Test schreiben.

Nach diesen Vorbereitungen, muss publiziert werden.

Nach dem Publizieren, die Datei index.php aus dem Ordner (Name wisst ihr besser) downloaden.

In RW diese Seite jetzt deaktivieren und nicht mehr in dem Menü zeigen lassen.

Den Ordner vom Server kann man jetzt löschen.

2. Die Installation von osCommerce
1. die Applikation (hier in der Version osCommerce Online Merchant v2.2 Release Candidate 2a) von http://www.oscommerce.com/solutions/downloads runterladen.
Nach dem Entpacken den Ordner catalog auf dem Server uploaden.
Wie oben erwähnt, u. U. den Ordner umbenennen!
Es gibt einige Sachen bei der Installation zu beachten (Ordner die bestimmte Rechte bekommen sollen etc). Bitte dazu die Dokumetiation lesen.

Für die Installation habe ich eine Anmerkung:
Die Installation ist einfach aber leider fehlt der Installation die Möglichkeit einen Prefix für die Datenbanktabellen. Diesen Prefix wäre enorm wichtig wenn man mit der gleichen Datenbank zwei Shops betreiben würde. Und für die Ordnung allgemein in der Datenbank es ist gut dass die Tabellen jeder Applikation einen Prefix bekommen.
Es gibt allerdings als Tipp einen Beitrag in dieser Richtung.
Es funktioniert zwar aber bei mir funktionierte STS (das ist ein Modul für osCommerce das auch installiert werden muss um das Aussehen des Shops an die Homepage zu erstellen) NICHT.
Ich habe nach den Gründen nicht gesucht sondern habe eine frisch Datenbank genommen und die Installation wie normal durchgeführt. Leider hatte ich keine Zeit in dem Code mich durchzuwühlen. Vielleicht geht es bei jemand anderen oder in einer neuen Version von osCommerce und STS.
2. das Modul STS von http://www.oscommerce.com/community/contributions,1524 runterladen und installieren. Die Installation ist eigentlich das manuelle Uploaden von bestimmten Dateien in bestimmten Stellen des Ordners catalog.

3. Das Einrichtenn von osCommerce
Hier weisst jeder am besten wie er heisst, wo er woht, was er zu verkaufen hat, mit wieviel etc, etc, etc.
Bei der Einrichting muss jetzt aber STS “eingeschaltet” werden (nur durch das Kopieren davor greift er noch nicht und tut was er tun muss). Dafür sind die Bilder in der Dokumentation die zeigen wie und welche Schalter zu stellen sind aufschlussreich.
Auch nach dem Einschalten des STS hat sich fast nicht getan auf der Seite des Shops bis auf einem neuen Text in dem oberen Teil: This is the default template.

4. Wie STS den Quellcode umformatiert
STS greift auf eine HTML Seite die in einem der Ordner die in catalog/includes/sts_templates sich befindet. Diese Datei und der Ordner wurde bei der Einrichtung von STS festgelegt.
Ich würde vorschlagen den Ordner catalog/includes/sts_template/test umzubenennen und als Name der Name euerer RW-Vorlage zu geben (sticht besser ins Auge wenn man auf dem Server danach sucht )
Der Name der Datei kann man so lassen (jetzt weiss man schon wo man ist und was dadrin sich befindet). Allerdings diesen Ordnername muss in STS eingegeben!

Öffnet man die Datei aus diesem Ordenr (ich nehme die Datei sts_template.html) ist man überrascht wie einfach aufgebaut ist und was man alles dadrin findet:
Ein <head> Teil und in <body> einige Tabellen.
Der Quellcode der der Browser von der Seite zeit ist aber voll von anderen Daten.
STS “bindet” mit dem Dollarzeichen und das Wort danach die bestimmten Bereiche der Seite:
$catmenu z.B ist der Auswahlpopup von der rechten Seite. Dadrunter die Kategorien sind mit $categorybox, die Hersteller mit $manufacturerbox bezeichnet. Etc, etc, etc. Wohl die Tabelle wo diese drei (und andere dannach) ist die linke Sidebar der Seite. Diese Tabelle ist in eine übergeordnete Tabelle die drei Zeilen hat: linke Sidbar, Content und rechte Sidebar. Das schöne ist der Content: $content (das Paragraph This is the default template kann man natürlich löschen).

Dann nichts wie hin in eine RW Seite bringen.

5. Die Daten einer RW-Seite ins Spiel bringen
1. Gleich unter der deaktivierten HTML Seite in RW jetzt eine Weiterleitungsseite erstellen.
Die gleiche Angaben für den Seitentitel, Ordnername und Dateiname die einmal die HTML Seite hatte bei dieser Seite eingeben.
Und in der Seiteneinstellungen/Plugin-Parameter (der letzten Icon in diesem Seiteneinstellungen-Fenster) wird muss der vollen Pfad zu dem Shop eingegeben (etwas in der Richtung http://www.deine_seite.de/shop/index.php)

Publizieren.

2. Öffnet man die index.php die man vom Server runtergeladen hat, muss man hier nur die Worte mit dem Dollarzeichen aus der Datei verteilen.

Aber zuerst etwas über den !DOCTYPE
Meistens ist so dass die Vorlagen von RW einen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

haben.
Der von osCommerce ist

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ich habe nicht gecheckt aber ich habe den

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

benutzt. Ich bin noch nicht dazugekommen zu sehen ob der Code valid ist.

Zwei Sachen aus dem

<head>

müssen rein.
Einmal <head> selber muss mit <html $htmlparams> geändert werden. Und in dem head der Datei muss auch noch

<link rel="stylesheet" type="text/css" href="stylesheet.css">

eingefügt werden.

Um mal schnell ein Erfolgserlebnis zu haben, zumindest bis zu einer späteren Entschlackung oder Umverteilung, würde ich in der Sidebar der Datei eine Tabelle erstellen und dadrin alle Boxes aus dem Shop die links und rechts sind reinwerfen:

<table border="0" cellspacing="0" cellpadding="1">
	<tr><td>$cartbox</td></tr>
	<tr><td>$maninfobox</td></tr>
	<tr><td>$orderhistorybox</td></tr>
	<tr><td>$bestsellersbox</td></tr>
	<tr><td>$reviewsbox</td></tr>
	<tr><td>$tellafriendbox</td></tr>
	<tr><td>$languagebox</td></tr>
	<tr><td>$currenciesbox</td></tr>
	<tr><td>$catmenu</td></tr>
	<tr><td>$categorybox</td></tr>
	<tr><td>$manufacturerbox</td></tr>
	<tr><td>$whatsnewbox</td></tr>
	<tr><td>$specialbox</td></tr>
	<tr><td>$searchbox</td></tr>
	<tr><td>$informationbox</td></tr>
</table>

Diesen Text einfach hinter

<div id="sidebarContent">

kopieren.

Das Wort Test aus dem content mit den fünf Tabellen ändern:

<table border="0" width="100%" cellspacing="0" cellpadding="1">
    <tr class="headerNavigation">
        <td class="headerNavigation">
            $breadcrumbs
        </td>
        <td align="right" class="headerNavigation">
            $myaccountlogoff | $cartcontents | $checkout

        </td>
    </tr>
</table>

<table border="0" width="100%" cellspacing="3" cellpadding="3">
  <tr>
    <td valign="top">
      <p>$content</p>
      <p> </p>
    </td>
  </tr>
</table>

<table border="0" width="100%" cellspacing="0" cellpadding="1">
  <tr class="footer">
    <td class="footer">  $date  </td>
    <td align="right" class="footer">  $numrequests  </td>
  </tr>
</table>

<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" class="smallText">
      $footer_text
    </td>
  </tr>
</table>

<br>

  <table border="0" cellpadding="3" cellspacing="0" width="100%">
      <tr>
        <td align="center" class="smallText">
          Simple Template System by <a href="http://www.diamondsea.com/">DiamondSea.com</a><br>
          STS v4.5.3 by <a href="http://soundsgoodpro.com">
			SoundsGoodProductions.com</a><br>
        </td>
      </tr>
  </table>

Die Datei speichern und auf dem Server bringen
ABER NICHT MEHR DA WO SIE EINMAL WAR sondern in dem Ordner catalog/includes/sts_template/name_der_vorlage und wenn sie da ist auch umbenennen in sts_template.html (die alte sts_template.html von da kann man davor löschen).

Damit wäre die Einbindunng des Shops an der Homepage die mit RW gebaut wurde de facto zu Ende. Man müsste jetzt ein bißchen an den Farben rummurksen.

6. Einige Änderungen an dem Shop
1. Zuerst der breadcrumb des Shops soll geändert werden. Die Startseite befindet sich in der Navigation der Seite, also muss da nicht mehr sein. In Shop selber der breadcrumb soll ab Katalog anfangen.
Dazu in der Datei catalog/includes/application_top.php (vielleicht diese Datei application_top.php zuerst duplizieren und dem Namen application_top original.php damit man weisst das hier eine Änderung gibt) nach

$breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);

suchen und mit

//  $breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);

ändern.
Speichern. Fertig.

2. Änderungen in stylesheet.css
Diese Datei ist zuständig mit den Formatierungen und Farben im Shop.
Am besten benutzt man CSSEdit da mit dem Programm kann man die Seite vom Server laden und dann die Änderungen in einer Art Cache halten (dadurch sieht man auch gleich was man macht. Plus in dem breadcrumb des Programms sieht man in welchem Bereich das Element sich befindet. Man kann dann auch die Änderungen direkt auf dem Server speichern. Auf jeden Fall die Datei stylesheet.css dupliziern und die Änderungen müssen hier gemacht werden. Es gibt Elemente die auch in der gelinkten CSS Dateien der Vorlage (wie Linkfarben). Sie können natürlich zu Rate gezogen werden so nah wie möglich das Aussehen zu bringen.

Eine Änderung müsste wahrscheinlich in BODY vorgenommen werden: es geht um margin: 0px. Wahrscheinlich müsste das weg sein (aber es hängt sicherlich ob das mit den Daten aus der Vorlage kolidiert). Wenn die margin gelöscht wird und keine Änderung passiert dann kann man sie auch lassen.

- Apropos breadcrumb. In der Datei ist

TR.headerNavigation {
  background: #bbc3d3;
}

Ich habe die Angabe des backgrounds gelöscht und habe mit

TR.headerNavigation {
  font-size: 11px;
}

geändert. Die Angabe

A.headerNavigation {
  color: #FFFFFF;
}

habe ich ganz gelöscht. Das gleiche auch mit:

A.headerNavigation:hover {
  color: #ffffff;
}

Und die auch:

TD.headerNavigation {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #bbc3d3;
  color: #ffffff;
  font-weight : bold;
}

habe ich ganz gelöscht.

- Aus

TD.footer {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #bbc3d3;
  color: #ffffff;
  font-weight: bold;
}

des Footers habe ich nur font-size: 10px gelassen und

TR.footer {
  background: #bbc3d3;
}

gelöscht.

- Der Infoboxes habe ich die Hintergrundfarbe gelöscht, dafür Ränder gegeben:
Aus

.infoBox {
  background: #b6b7cb;
}

wurde

.infoBox {
	border: 1px solid #286fa6;
	border-spacing: 1px;
}

Für deren Contents habe ich die Hintergrundfarbe gelöscht und nur die Größe der Schrift gelassen:
Aus

.infoBoxContents {
  background: #f8f8f9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

wurde

.infoBoxContents {
  font-size: 10px;
}

- Bei deren Überschriften bante es sich ein Problem. Zwar CSS codemässig habe ich aus

TD.infoBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #bbc3d3;
  color: #ffffff;
}

nur das gelassen:

TD.infoBoxHeading {
  font-size: 10px;
  background: #286FA6;
  color: #ffffff;
}

aber ich konnte die Ecken nicht finden.
Sie sind in der php Code versteckt:
In der Datei catalog/includes/classes/boxes.php gibt es ein Bereich dafür:

    function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {
      $this->table_cellpadding = '0';

      if ($left_corner == true) {
        $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif');
      } else {
        $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif');
      }
      if ($right_arrow == true) {
        $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
      } else {
        $right_arrow = '';
      }
      if ($right_corner == true) {
        $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif');
      } else {
        $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');
      }

Den habe ich mit dem geändert:

    function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {
      $this->table_cellpadding = '0';

      if ($left_corner == true) {
        $left_corner = '';
      } else {
        $left_corner = '';
      }
      if ($right_arrow == true) {
        $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
      } else {
        $right_arrow = '';
      }
      if ($right_corner == true) {
        $right_corner = '';
      } else {
        $right_corner = '';
      }

Noch einige Ändereungen die ich gemacht habe (sicherlich sind sie nicht die einzigen möglichen aber sie waren genug das Ergebnis zu haben):
- Die Backgroundfarbe gelöscht in:

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
  background: #f8f8f9;
}

- Eine andere Farbe der border gegeben. Aus:

TABLE.productListing {
  border: 1px;
  border-style: solid;
  border-color: #b6b7cb;
  border-spacing: 1px;
}

habe ich das:

TABLE.productListing {
	border: 1px solid #286fa6;
	border-spacing: 1px;
}

Aus:

.productListing-heading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #b6b7cb;
  color: #FFFFFF;
  font-weight: bold;
}

habe ich zwei Angaben gemacht:

.productListing-heading {
  font-size: 10px;
  background: #286FA6;
  color: #ffffff;
}

a.productListing-heading {
	color: #ffffff;
}

- Die Header der Seite habe geändert. Aus:

TD.pageHeading, DIV.pageHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #9a9a9a;
}

wurde:

TD.pageHeading, DIV.pageHeading {
	font-size: 20px;
	color: #286FA6;
}

- Auch bei den Schriften habe ich etwas geändert:

TD.main, P.main {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

blieb nur:

TD.main, P.main {
	line-height: 1.4;
}

- Der Besucher selbst:

SPAN.greetUser {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #f0a480;
  font-weight: bold;
}

wurde ein bißchen geändert:

SPAN.greetUser {
	color: #286FA6;
	font-size: 13px;
}

1px zw. den Buchstaben habe ich für den Fettdruck:

b, strong {
	font-weight: bold;
	letter-spacing: 1px;
}

- Und der Text der auf der ersten Seite grün unterlegt war:

.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

habe ihn blau unterlegt, etwas größer gemacht und in weissen Grossbuchstaben erscheinen lassen:

.messageStackSuccess {
	background-color: #286FA6;
	text-transform: uppercase;
	color: white;
	font-size: 11px;
}

Wie man sieht der CSS Code ist vol vonn TRs und TDs. Das weil die Seite auch in Tabellen gebaut ist. Meine Meinung ist (im Nachhinein wohl gemerkt) das so eine Aufteilung gar nicht schlecht für die Seite ist. Die Produkte (deren Header, Erklärungen, Icons etc) sind auch fast tabelarisch gebaut. Deswegen jetzt ein Umstrukturierung in divs müsste eine ganz andere stylessheet.css haben.

Aber ich bin mir sicher dass andere User ein Schmuckstück davon machen werden.
Es sind Pictograme die geändert werden müssen und das ist wahrscheinlich die schwerere Aufgabe.

Auf jeden Fall man kann in Schnellverfahren einen Shop in einer RW Homepage einbinden.

Ich bitte um Verständnis wenn ich vielleicht irgendwo ein Fehler gemacht habe. Bitte natürlich auch eine Mitteilung wenn das sein sollte.
Die Einbindung ist nicht schwer und wahrscheinlich kommt man auch selber zurecht wenn das Prinzip verstanden wurde.

1. Wenn man eine Seite in RW erstellt sind der Titel der Seite, ihr Ordnername und ihr Dateiname für RW sehr wichtig (natürlich) weil davon leitet RW bei dem Export und bei der Publizierung den Pfad für die Navigation. RW benutzt den normalen HTML URL System wo hinter dem href=” wenn einen Schritt weiter in der Ordnerstruktur gehen soll wird der Ordnername geschrieben und dann die Dateiname: href=”ordner/dateiname.endung und für einen Schritt zurück in der Ordnerstruktur zuerst ../ vorkommt und dann der Ordnername und die Dateiname: href=”../ordner/dateiname.endung

2. Diese Elemente der Navigation sind wichtig um die andere Seiten die in der Homepage sind zu “wissen” wo die eine Seite sich befindet. So eine Aussage ist wohl selbstverständlich aber ich schreibe sie trotzdem weil sie aber die Grundlage der Weiterleitung ist. Und mit dieser Weiterleitung funktioniert so eine PHP Implementierung:
Man muss den Seiten aus der bestehenden Homepage “sagen” dass eine neue Seite hinzugekommen ist und wie sie heisst. Deswegen wird in der Seiteneinstellungen/Allgemeine Einstellungen (der ersten Icon in diesem Fenster) für die Startseite der PHP Applikation eine Weiterleitungseite gebaut wo als Seitentitel der Name der Seite wie in der Navigation erscheinen soll, für den Ordnername der Ordner wo auf dem Server sich die PHP Applikation befindet und für den Dateinamen der Name der Datei wo die PHP Applikation startet.
RW braucht auch den vollen Pfad zu der Applikation. In der Seiteneinstellungen/Plugin-Parameter (der letzten Icon in diesem Fenster) wird also den vollen Pfad eingegeben so dass wenn man hier Enter drückt in dem Fenster die Applikation erscheint. (Dafür müsste allerdings die Applikation installiert worden sein.)

Wir sind immernoch bei den Grundlagen der “Zusammenarbeit” also noch nichts tun und weiter lesen:
3. So gesehen, wäre die Implementierung jetzt schon fertig, allerdings sehen die Seiten der Homepage ganz anders aus als die PHP Applikation.
Das ist nur weil die PHP Applikation noch nichts von der RW-Vorlage “weisst”. All den Code der bei dem Export und Publizierung der von RW erzeugt und in dem Quellcode der Seiten sich befindet wird NICHT auch in der Datei der PHP Applikation geschrieben. RW erzeugt bei dem oberen Schritt nur Navigationspfade für die Seiten die das Programm erstellt, nicht in den Dateien aus der Weiterleitung.
Diesen Code muss manuell in der Datei geschrieben.
Dadurch stellen sich zwei Problematiken:
A. die Navigation in der PHP Applikation upzudaten wenn neue Seiten in Projekt neu kommen
B. die Implementierung der RW-Vorlage in der Applikation.

Für das Updaten der Navigation in der Applikation muss gesorgt werden wenn neue Seiten in Projet kommen. Und das MANUELL.

Die Implementierung der RW-Vorlage muss natürlich auch manuell geschehen (RW schreibt nichts in den Dateien). Dafür bräuchten wir eine Mustervorlage (woher wir den Code kopieren und in der Datei der Applikation einsetzen sollen).
Und für diesen Schritt, BEVOR die Weiterleitungseite erstellt wird, muss eine normle Seite erstmal erstellt. Ich nehme dazu eine HTML Seite wo ich in dem Content nur ein Wort schreibe: Test
Diese Seite bekommt alle andere Merkmale der Homepage: Vorlagenstil, Farben, Sidebar Position, etc, etc, etc. Das damit später alles schon im Code ist.
UND NATÜRLICH DIE ANGABEN AUS DEM PUNKT 2. BEZÜGLICH NAVIGATION – apropos, die Dateinamen der PHP Applikationen haben immer .php Endung!
Als würde diese Seite die PHP Applikation sein nur sie hat nur ein Wort dadrin.
Man lässt sie einmal exportieren und dannach deaktiviert sie und lässt sie auch nicht mehr in Menü angezeigt werden.
Man lädt die entstandene Datei von Server runter um die Vorlage zu haben und
NACH DIESEM SCHRITT WIRD ERST DIE PHP APPLIKATION INSTALLIERT.
Das heisst man muss schon wissen wie der Name des Ordners und der Name der Datei der PHP Applikation heissen wird.
Und das macht man jetzt damit bei der Publizierung diese HTML Seite nicht eine, durch die Installierung der PHP Applikation, schon bestehende Datei überschrieben wird!

Jetzt käme der Schritt 2. eine Weiterleitungseite in RW bauen und die Daten aus der runtergezogene Seite (die als Vorlage gillt) zu übertragen.

Das alles ist Idealfall. Können Fehler entstehen. Meistens hat man was vergessen (Farbe, Aussehen).
Als Faustregel: die von der PHP Applikation installierte Startdatei (meistens index.php) auf dem Server duplizieren um eine Sicherung zu haben (index Kopie.php als Beispiel), dann die idex.php selbst umbenennen in index_.php (als Beispiel), die Weiterleitungseite deaktivieren und nicht mehr in dem Menü erscheinen lassen, die alte HTML Seite wieder aktivieren und im Menü erscheinen lassen, Enderungen machen und publizieren.
Die Seite vom Server runterladen und das Spielchen wider zurück: HTML Seite deaktivieren, die Weiterleitungsseite aktivieren, publizieren und die Daten aus der runtergezogene Datei in den entsprechenden Datei/Dateien schreiben.

Kompliziert? Eigentlich nicht (würde ich sagen), aber es ist der einzige Weg (den ich bestreite und der mir logisch erscheint) um eine PHP Applikation in einer von RW gebauten Homepage zu integrieren.

Teil 1 – Download und Installation des Gästebuches

Gästebuch von STADTAUS.com downloaden und installieren:
1. Nach dem Entpacken der Ordner (z.Z. gbs1.9.2) in guestbook umbenennen.

2. in der Datei config.php die Änderungen vornehmen (siehe auch Erklärungen in der Datei guestbook_script_german.html aus dem Ordner docu Abschnitt Installation):
- in dem Bereich:

         $database['host']       = 'localhost';    // Database hostname
         $database['name']       = '';             // Database name
         $database['user']       = '';             // Database username
         $database['pass']       = '';             // Database password
         $database['prefix']     = 'gbs17_';

ändern in:

         $database['host']       = 'host_adresse_der_datenbank';
         $database['name']       = 'name_der_datenbank';
         $database['user']       = 'user';
         $database['pass']       = 'passwort';
         $database['prefix']     = 'gbs19_';

- die Sparache ändern:

          $language               = 'en';

in

          $language               = 'de';

3. erwartet man Besucher die u.U. andere Sprachen mit Unicode Buchstaben benutzen dann in der Datei language.de.inc.php aus dem Ordner languages den Characterset ändern:

'txt_charset'                      => 'iso-8859-1',

in

'txt_charset'                      => 'utf-8',

4. den Ordner guestbook auf dem Server laden

5. wie in der Datei guestbook_script_german.html aus dem Ordner docu bei Installation beschrieben wird, muss jetzt das Gästebuch installiert werden.

6. Bei einer Kaffeepause würde ich einige Eintargungen machen um einfach zu sehen wie es funktioniert.
Die User die sich mit phpMyAdmin auskennen und möchten Eintragungen aus anderen Gästebücher übernehmen würde ich die Seite Timestamp lesbar umwandeln empfehlen für die timestamps:
Es gibt leider keine Imprtmöglichkeit, also die Eintragungen werden per Copy & Paste aus den anderen Gästebücher übernommen. Allerdings dieses Einfügen erzeugt die Eintragungen an der jetztige Zeit, so dass timestamps der Eintragungen geändert werden können (mit der Hilfe des oberen Link). Die timestamps sind in Datenbank bei gbs19_data.

Teil 2 – Vorbereitung für die Anbindung in der Homepage

Aber zuerst etwas zum Verstehen der Problematik:

Der Hauptbereich einer von RW erzeugten html Datei befindet sich in dem

<div id="content">
	etc, etc, etc
</div>

In diesem <div id="content"> muss auch der Hauptbereich des Gästebuches kommen. Alles andere: Sidebar, Navigation (Subnavigation), Footer, <head> etc kann man von einer anderer Datei übernehmen. Allerdings damit die Pfade richtig stimmen muss eine Datei genommen werden die auf der gleiche Stufe in der Homepage ist wo man das Gästebuch einsetzen möchte. Es ist meistens so, dass das Gästebuch eine der Hauptseiten ist. Auf der gleiche Stufe mit Kontakt, Impressum, index.html etc. Da index.html eine besondere Stellung nimmt (im Bezug auf Pfaden) würde ich nicht empfehlen diese Datei für die Übernahme der “Umgebung”.
Ich würde eigentlich eine neue Seite erstellen ALS WÜRDE DIESE SEITE DAS GÄSTEBUCH SEIN.

Die zweite Problematik ist dass RW wird später diese Seite nicht “kontrolieren” können. Erzeugt man eine neue Seite später, wird diese Seite nicht in der Navigation des Gästebuches auftauchen. Sie muss per Hand (wenn sie in der Navigation des Gästebuches auftauchen muss) eingegeben werden.
Diese Problematik entsteht weil das Gästebuch von der Datei index.php (aus dem umbenannten Ordner guestbook) angetrieben wird aber die Umgebung der Seite (Navigation, Sidebar, Vorlage, Footer etc, etc) aus einer html Datei, Template genannt, kommt. Und diese Datei ist main_layout.tpl.html aus dem Ordner /templates/default/
Also es hilft nicht dem RW “zu sagen”:
Die Seite die erzeugt wird soll main_layout.tpl.html heissen (Pfad siehe oben) weil das Gästebuch nicht damit angetrieben wird und die Links die man damit erzeugt zu “nichts” ankommen.
Aber auch nicht die Seite die erzeugt wird soll index.php (aus dem Ordner guestbook) weil diese Datei eine php Datei ist und sie wird keine Links bekommen.
Die einzige Möglichkeit ist eine Weiterleitungsseite zu index.php (aus dem Ordner guestbook). Dadurch “verstehen” die andere Seiten der Homepage wo das Gästebuch sich befindet. Nicht aber das Gästebuch selbst. So dass neue Seiten, oder Umgestaltung der Homepage muss immer in dieser Datei main_layout.tpl.html per Hand geschrieben werden.

Mit diesem Prinzip kann man eine PHP Applikation in RW anbinden. Ob Gästebücher, WordPress, Fotogalerien, andere Mail-Skripte, genealogischen Datenbanken, FTP-Server, Foren etc, es ist so gesehen egal. RW muss wissen wo die “Start”seite der Applikation ist. Der Rest ist die Handarbeit bei der Vorlage der Applikation um ein möglichst angepassten Aussehen mit der anderen Seiten der Homepage. Es gibt Applikationen die etwa leicht (wie hier) anzupassen sind, andere wie vielleicht WordPress etwas schwerer.

Und jetzt zu den Vorbereitungen:

1. eine HTML Seite erzeugen und sie in der Navigation da anbringen wo später das Gästebuch stehen wird.

2. Dieser Seite folgenden Änderungen vornehmen:
- als Seitentitel und Browser-Titel den Namen Gästebuch geben (oder was auch immer)
- als Ordnername guestbook_testordner
- als Dateiname index.php
- als Codierung was in der Datei language.de.inc.php festgelegt wurde
- Ausgabe Standard
- die Seite muss aktiviert und im Menü erscheinen
- die Farb-, Sidebar- (etc) Änderungen die in Seitenspezifischen Vorlage-Teil nötig sind. Zu bedenken ist es hier dass u.U. (je nachdem wie breit die Vorlage ist die man benutzt) eine Einstellung ohne Sidebar (zusätlich) von Vorteil ist. Auch andere Einstellungen die einige Vorlagen habe wie Änderungsdatum z.B. (Vorlagen aus dem Hause multithemes.com) nichts bewirken. So ein Änderungsdatum wird von RW “kontrolliert”. Das Gästebuch hat kein Einfluss drauf. Sicherlich von Vorteil ist es die Benutzung von den eingebauten oder individuell erstellten Stile der Vorlage!
- andere Einstellungen vornehmen wie Meta-Tags oder die RW-Unterstützung ein-, abschalten

3. Als Inhalt braucht man (kann man) einfach nur ein Wort zu schreiben. Ob der eigener Name oder etwas anderes ist es absolut egal.

4. Publizieren (ggf. exportieren)

5. Nach dem Publizieren diese Seite deaktivieren und im Menü nicht mehr anzeigen lassen.

6. Eine Weiterleitungsseite genau an der Stelle wo die gerade deaktivierten Seite sich befindet.

7. Dieser Weiterleitungsseite bekommt:
- als Seitentitel und Browser-Titel Gästebuch (oder was auch immer die deaktivierte Seite bekommen hat)
- als Ordnername jetzt der richtigen Ordnername der Gästebuch in diesem Fall guestbook
- als Dateiname index.php
- und in dem letzten Reiter des Fensters Seiteneinstellungen (Plugin-Parameter) in dem Feld URL den Pfad zu der index.php aus dem Ordner guestbook. Befindet sich dieser Ordner auf der gleiche Ebene mit Startdatei der Homepage (index.html) dann müsste in diesem Feld etwa: http://www.domainname.de/guestbook/index.php stehen

8. Speichern und publizieren.

Die Punkte 1, 2 und 3 werden benutzt bei der Anpassung des Teplates des Gästebuches und die Punkte 6, 7 und 8 teilen allen Seiten der Homepage mit wo jetzt das Gästebuch sich befindet.

Teil 3 – Anpassung der Datei main_layout.tpl.html aus dem Ordner /templates/default/

Diese Datei beinhaltet die 3 Bereiche die auch die zum Test erstellten, publizierten und dann deaktivierten HTML Seite beinhaltet.
In diesen Bereichen Tauchen allerdings einige Variablen der Gästebuch-Applikation die immer zwischen { und } geschrieben werden. Die wichtigste ist natürlich {main_content} aus dem die das Wort, das bei dem vorherrigen Punkt 3 im Inhalt festgelegt worden ist, ersetzen wird.
Aber der Reihe nach:

Als Vorbereitung müssen die Dateien main_layout.tpl.html aus dem Ordner /templates/default/ und die Datei index.php aus dem Ordner guestbook_testordner in einem Texteditor wie TextWrangler geöffnet werden. Und wir erstellen einen neuen Textdokument (wahrscheinlich das Programm wird es untitled text benennen) umd dadrin die Codeteile einzufügen die wir brauchen.

Wir haben in main_layout.tpl.html drei Bereiche:
1. !doctype
2. <head> und
3. <body>

1. !doctype – Das Gästebuch benutzt XHTML 1.0 Transitional. Es kann sein dass die RW Vorlage ein strikten doctyp in der Datei index.php erstellt hat.
So dass in der main_layout.tpl.html den Code:

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{txt_content_direction}">

kopiert und in dem untitled text eingesetzt wird.

2. <head> – In diesem Bereich der Datei main_layout.tpl.html hat das Gästebuch nur drei Unterbereiche:

<title>{txt_script_name} {txt_script_version} {txt_title}</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

und eine ganze Latte von CSS Angaben unter

<style type="text/css">

Aus der von RW publizierten (exportierten) index.php Datei (aus dem Ordner guestbook_testordner) kopieren wir den ganzen

<head>...</head>

Bereich und setzen in der untitled text Datei ein (hinter dem Code der schon da steht).
Dadurch werden:
- den richtigen Pfad zu dem Gästebuch,
- alle Pfad-Angaben,
- Einbindung der JavaScripts etc
erstellt, die die RW Vorlage braucht, und dem Gästebuch zur Verfügung gestellt.

Aus der Datei main_layout.tpl.html kopieren wir die lange CSS Angaben Liste und setzen wir sie und VOR dem </head> in dem untitled text ein.
Dadurch werden auch die CSS Angaben die das Gästebuch selbst benötigt eingebunden.

3. <body> – In diesem Bereich der Datei main_layout.tpl.html hat das Gästebuch nur ein Unterbereich: {main_content}. Das muss das Textwort ersetzen. Dafür:
Aus index.php den ganzen Bereich von <body> bis zu Ende der Datei kopieren und in untitled text einsetzen (nach dem schon befindlichen Code).

Dann das Testwort suchen (muss sich in dem <div id="content"> befinden) und da es mit {main_content} ersetzen.

4. Am Schluss den ganzen Inhalt der in main_layout.tpl.html löschen und mit dem ganzen Inhalt der sich in untitled text sich befindet ersetzen.
Speichern (ggf. auf dem Server laden).

Gästebuch eingebunden!

Teil 4 – Einige Anpassungen für das Gästebuch

1. Das Gästebuch soll eine Email Schicken bei einem Neueintrag:
Die 1.9.2er Version ist in dieser Richtung noch nicht so eingestellt. Aber mit zwei Zusatzcodes kann es aber auch.
Dazu muss die Datei sign.php so geändert werden:
In der Datei diesen Code:

]/*****************************************************
  ** Settings
  *****************************************************/
          $script_root  = './';
          $script_title = '';
          $query_string = '?';
          $show_form    = 'true';
          $captcha_content = '';
          $captcha_note    = '';

ersetzen mit:

/*****************************************************
  ** Settings
  *****************************************************/

          $script_root  = './';
          $script_title = '';
          $query_string = '?';
          $show_form    = 'true';
          $captcha_content = '';
          $captcha_note    = '';

          $empfaenger = 'deine@emailadresse.de';
          $betreff = 'Neuer Gästebucheintrag';
          $nachricht = 'Neuer Gästebucheintrag';
          $header = 'From: guestbook@domain_des_gaestebuches.de' . "\r\n" .
          'Reply-To: guestbook@domain_des_gaestebuches.de' . "\r\n" .
          'X-Mailer: PHP/' . phpversion();

die Email Adressen müssen natürlich angepasst werden.

und dieser Code:

/*****************************************************
  ** Write data to database
  *****************************************************/
          while (list($key, $val) = each($new_form_fields))
          {
              $field_list[] = $val['name'];
          }

          $field_list = array_merge($field_list, array('timestamp', 'ip_address', 'hostname', 'user_agent'));

          if ($db->add_details($field_list, $form_data, $full_text)) {
              $message[]           = array('message' => $txt['txt_entry_added'], 'addition' => '');
              $guestbook_entries[] = $html_form_data;

              unset($show_form);
          } else {
              $message[] = array('message' => $txt['txt_add_entry_failed'], 'addition' => '');
          }

muss mit diesem Code ersetzt werden:

/*****************************************************
 ** Write data to database
 *****************************************************/
        while (list($key, $val) = each($new_form_fields))
        {
            $field_list[] = $val['name'];
        }

        $field_list = array_merge($field_list, array('timestamp', 'ip_address', 'hostname', 'user_agent'));

        if ($db->add_details($field_list, $form_data, $full_text)) {
            mail($empfaenger, $betreff, $nachricht, $header);
            $message[]           = array('message' => $txt['txt_entry_added'], 'addition' => '');
            $guestbook_entries[] = $html_form_data;

            unset($show_form);
        } else {
            $message[] = array('message' => $txt['txt_add_entry_failed'], 'addition' => '');
        }

2. Der Zeichensatz des Gästebuch und die Größe des Zeichensatzes soll gleich mit dem von der Homepage:
Die Liste der CSS Anpassungen die in der Datei main_layout.tpl.html eingefügt worden ist beinhaltet in:

body, p, td, br, form, div, span {
      font-family:Tahoma,Helvetica,Geneva,Sans-serif,sans-serif;
      font-size:9pt;
      }

die Zeichensätze des Gästebuches. Die überschreiben die Angaben aus der RW-Vorlage in einigen Punkten wie body oder p etc.
Einfach ist es den ganzen oberen Code zu löschen. Möchte man etwas anderes, hier sind die Änderungen zu machen.

3. Die Farben der Einträge:
Das Gästebuch stellt abwechselnd die Einträge in einer dunklen und einer helleren Farbe. Diese Farben sind auch in dieser Liste unter

.darkrow {
      background-color:#D2DBFF;
  }

  .lightrow {
      background-color:#ECF0FF;
  }

4. Die Breite der Einträge:
Die Breite der Tabelle aus der Datei entry_detail.tpl.html ist mit 500px angegeben:

<table border="0" cellpadding="4" cellspacing="1" width="500">

Einfach diese Größe an der Breite des Contents der Homepage ändern

5. Die Größe von “Gästebucheinträge anzeigen” und “xx Einträge · Seite x von xx”:
in der Datei entries.tpl.html “Gästebucheinträge anzeigen” befindet sich unter:

<h3>{txt_display_entries}</h3>

Einfach eine andere Überschriftgröße angeben.
Für “xx Einträge · Seite x von xx” ist der Code:

<h4 style="margin-top:30px;">{entries} {txt_entries} · {txt_page} {currentpage} {txt_page_of} {allpages}</h4>

Man kann also eine andere Überschriftgröße nehmen und die Entfernung zu “Ins Gästebuch eintragen” ändern.

6. Änderungen für das Eingabe-Layout:
- Die Größe von “Ins Gästebuch eintragen”: in der Datei sign.tpl.html die Überschriftgröße anpassen in dem Code

<h3>{txt_sign_guestbook}</h3>

- Smileys von der rechten Seite unter den Angabenfelder positionieren:
Die Tabele aus der Datei form_detail.tpl.html hat 3 Spalten und die Smileys werden neben dem Kommentar-Feld gesetzt. Die 30 Gesichter werden u.U. eine viel zu lange Zelle in Anspruch nehmen. Deswegen habe ich in dem unteren Code die Tabelle nur mit zwei Spalten gesetzt und die Smileys kommen damit unter dem Kommentar-Feld. Den ganzen Code aus form_detail.tpl.html ersetzen mit:

<table border="0">
	<tbody>
		<tr>
			<td>{label:%name%}*</td>
			<td>{field:%name%}</td>
		</tr>
		<tr>
			<td>{label:%location%}</td>
			<td>{field:%location%}</td>
		</tr>
		<tr>
			<td>{label:%homepage%}</td>
			<td>{field:%homepage%}</td>
		</tr>
		<tr>
			<td>{label:%email%}</td>
			<td>{field:%email%}</td>
		</tr>
		<tr valign="top">
			<td>{label:%comment%}*    </td>
			<td>{field:%comment%}</td>
		</tr>
		<tr valign="top">
			<td></td>
			<td>
				<script language="JavaScript" type="text/javascript">
				<!--
				function emoticons(sign)
				{
					var text_area = document.guestbookform.comment;

					text_area.value += sign;
					text_area.focus();
				}
				//-->
				</script>
				{emoticon_matrix}
			</td>
		</tr>
		<tr valign="top">
			<td></td>
			<td>
				<p style="width: 350px;">{captcha_note}</p>
				<p>{captcha_content}<br /> </p>
			</td>
		</tr>
		<tr valign="top">
			<td></td>
			<td>
				{field:%preview%}
				{field:%send%}
			</td>
		</tr>
	</tbody>
</table>

<p>
* = {txt_mandatory_fields}
</p>

7. Der Text vor CAPTCHA: in der Datei language.de.inc.php ist die deutsche Übersetzung der Applikation. Einfach den Text für txt_captcha_note auswechseln mit was Ihr meint dass es besser mit Eueren Homepage-Styl passt. Natürlich die anderen Texte konnt ihr auch ändern.

Ich hoffe dass Ihr genug Anhaltspunkte habt das Gästebuch so anzupassen wie Ihr es wünscht.
Ich wünsche Euch viele schöne Einträge und wenig Spammer. (Die werden Euch aber finden wenn Ihr

<meta name="robots" content="all" />

in dem <header> von main_layout.tpl.html habt weil Google dann das Gästebuch indexiert. Also besser wäre natürlich:

<meta name="robots" content="none" />

)

Normalerweise müssen die WebYep Elemente aus dem zugewiesenen Bereich im Code einen eindeutigen Namen haben (so z. B. wie FotoLinks und FotoRechts). In der Blocks Implementierung wurde das mit BlockSchleifeLinks und BlockSchleifeRechts, BlocktitelLinks und BlocktitelRechts, TextLinks und TextRechts etc. realisiert. Da war es einfach weil es zwei Bereiche auf der Seite waren und somit einfach zu disponieren.
Bei Accordion müsste eigentlich viel einfacher gehen weil die WebYep Blöcke sich in Accordion Bereiche befinden müssen.
Es ist im Grunde auch so nur das Problem ist dass Accordion ab der Version 1.1 diese Bereiche bei der Erstellung in RW nummeriert und sie im Code schreibt. Eine WebYep Implementierung kann nicht mit vorgefertigte Nummerierungen arbeiten weil diese Nummerierung von dem WebYep-System vergeben wird. Dieses Verhalten von Accordion ist anders bei der Version 1.0. Die Nummerierung von Bereiche fand nicht statt so dass leider nur diese Version kann man benutzen wenn man WebYep und Accordion zusammenmischen möchte.

Das Verfahren dafür beinhaltet drei Seiten Erstellungen und eine Zusammensetzung der Codes aus zwei Seiten davon:
1. Die Erstellung der Accordion Seite (mit der Accordion Einstellungen). Diese Seite muss zuerst publiziert werden um den Code zu haben aber auch damit die JavaScript Dateien auf dem Server auch beschrieben werden.
2. Die Erstellung der WebYep Seite (mit der Festlegung der Bereiche die auf der Seite auftauchen sollen) und ihrer Publizierung in dem gleichen Ordner der Accordion Seite
Diese zwei Seite stören sich namentlich nicht weil die Accordion Seite die html Endung hat und die WebYep Seite php Endeung hat.
3. Die Codes zusammenbauen
4. Am Schluss die Erstellung einer Weiterleitung Seite die auf der “zusammengesetzte” Seite hinweist.

1. Die Erstellung der Accordion Seite
1.1. Dafür muss Accordion 1.0 installiert werden (die aktuellere Version entfernt und die “alte” rein). Über dieses Zusammenspiel WebYep-Accordion habe ich einmal yourhead.com berichtet und nach einer Möglichkeit gefragt die 1.0er Version weiter zur Verfügung zu stellen. Eine Begeisterung habe ich nicht gespürt aber ich kann auch nicht sagen dass es unmöglich ist von yourhead.com so eine Version zu bekommen. Wege und Möglichkeiten gibt es natürlich viele.
1.2. Eine Accordion Seite erstellen und die Einstellungen vornehmen die man für Accordion haben möchte. Der Seite einen Namen für die Navigation geben, einen Ordnername und einen Dateiname vergeben. Als Ausgabe – Standard
1.3. Publizieren.
1.4. Diese Seite jetzt deaktivierem und nicht mehr in Menü erscheinen lassen.

In etwa der betreffene Code aus der publizierten Accordion Datei sieht so aus:

<style type='text/css'>
.acToggle {
	width:555px;
	height:15px;
	padding-top:5px;
	padding-bottom:5px;
	padding-right:5px;
	padding-left:5px;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	cursor:pointer;
}
.acToggle a {
	cursor:pointer;
}
.acCurrent {

}
.acCurrent a {

}
.acStretch {
	width:530px;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:50px;
	margin-right:0px;
	padding-top:10px;
	padding-bottom:10px;
	padding-right:0px;
	padding-left:0px;
}
</style>

<div id="accordion_wrapper" style="position:relative; width:97%; border:0px; margin:0px; padding:0px; overflow:hidden;">
	<div id="acAlignment" style="position:relative; border:0px; padding:0px; margin-bottom:0px; margin-top:0px; margin-right:auto; margin-left:0px; width:580px;">

		<DIV class="acToggle" onClick="accordion.showThisHideOpen();" >
			<a style="text-decoration:none;">Titel 1</a>
		</DIV>
		<div class="acStretchOut">
			<div class="acStretch">
				Text1 etc.
				<div style="width:99%; clear:both;">

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

		<DIV class="acToggle" onClick="accordion.showThisHideOpen();" >
			<a style="text-decoration:none;">Titel 2</a>
		</DIV>
		<div class="acStretchOut">
			<div class="acStretch">
				Text2 etc.
				<div style="width:99%; clear:both;">

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

		<div style="width:99%; clear:both;">

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

<script type="text/javascript" src="files/prototype.lite.js"></script>
<script type="text/javascript" src="files/moo.fx.js"></script>
<script type="text/javascript" src="files/moo.fx.pack.js"></script>
<script type="text/javascript">
	var acStretchers = document.getElementsByClassName('acStretchOut');
	var acTogglers = document.getElementsByClassName('acToggle');
	var accordion = new fx.Accordion(acTogglers, acStretchers, {opacity: false, duration: 300});
</script>

Ich habe mich entschlossen den Code der in einer Zeile augegeben wird zu strukturien um die drei Bereiche von einem Accordion Code zu veranschauen. In allen drei Bereiche befinden sich die Accordion Einstellungen.

2. Die Erstellung der WebYep Seite
2.1. Bei der Erstellung der WebYep Seite muss man darauf achten dass die Seite auf der gleiche Ebene mit der Accordion Seite ist, den gleichen Ordnername und Dateiname wie der Accordion Seite vergibt ALLERDINGS diese Seite bekommt die Endung .php und nicht .html wie die Accordion Seite. Damit wird gewährleistet dass später die WebYepAccordion Seite auch die schon publizierten prototype.lite.js, moo.fx.js und moo.fx.pack.js Dateien aus dem Ordner files benutzen wird.
2.2. Bei der Erstellung der WebYep Seite muss man auch nicht vergessen dass die Seite einmal im Vorschau angezeigt werden muss. Dadurch übernimmt die Seite den WebYep Code in dem Präfix.
2.3. Genauso wie die Accordion Seite davor, Ausgabe Standard und die WebYep Bereiche auswählen die später in den wiederholbaren Blöcke erscheinen sollen. Allerdings für die Exemplifizierung habe ich die Standardeinstellung mit allen WebYep Elementen hier ausgehählt.
2.4. Publizieren.
2.5. Genauso wie die Accordion Seite davor, diese Seite deaktivieren und nicht mehr in Menü erscheinen lassen.

In etwa der betreffene Code aus der publizierten WebYep Datei sieht so aus:

<!-- Mode: publish -->
<?php
	$iLeftPhotoPadding = 10;
	$iRightPhotoPadding = 10;
	$iLeftPhotoWidth = true ? 150:0;
	$iRightPhotoWidth = true ? 150:0;
	$iCenterPhotoPadding = 10;
	$iCenterPhotoWidth = true ? 300:0;
	$iBlockPadding = 20;

    if (!function_exists("webyep_bCheckImage")) {
        function webyep_bCheckImage($sN, $iFixedW, &$sWCSS)
        {
            $bRet = false;

            $sWCSS = "";
            $oElement = new WYImageElement($sN, $false, $iFixedW ? "width=\"$iFixedW\"":"", "", "");
            $sContent = $oElement->sDisplay();
            if ($sContent) {
                if ($iFixedW) $iW = $iFixedW;
                else {
                    $oImg = $oElement->oImage();
                    $iW = $oImg ? $oImg->iWidth():0;
                }
                $sWCSS = $iW ? (" width: " . $iW . "px;"):"";
                $bRet = true;
            }
            return $bRet;
        }
    }

	$sWidthCSS = "";
?>
<h1 class="WebYepSeitenTitel"><?php webyep_shortText("Seitentitel", false); ?></h1>
<!-- Loop Start: ======================================== -->
<?php foreach (WYLoopElement::aLoopIDs("BlockSchleife") as $webyep_oCurrentLoop->iLoopID) { $webyep_oCurrentLoop->loopStart(true); ?>
<!-- Float Container Start: ======================================== -->
<?php
    if(preg_match('/MSIE +6/', $_SERVER['HTTP_USER_AGENT'])) echo "<div style=\"overflow: hidden; zoom: 1.0\">\n";
    else echo "<div style=\"overflow: hidden;\">\n";
?>
<?php if (webyep_sShortTextContent("Blocktitel", false) || webyep_bIsEditMode()) { ?>
<h2 class="WebYepBlockTitel"><?php webyep_shortText("Blocktitel", false); ?></h2>
<?php } ?><?php
	if (webyep_bCheckImage("FotoLinks", $iLeftPhotoWidth, $sWidthCSS) || webyep_bIsEditMode()) {
?>
<!-- Left Photo: ======================================== -->
<?php
   printf('<div style="float: left; margin-right: %dpx; margin-bottom: %dpx;%s" class="WebYepFotoLinks"><div>', $iLeftPhotoPadding, $iLeftPhotoPadding, $sWidthCSS);
   webyep_image("FotoLinks", false, "", "", "", $iLeftPhotoWidth, 0, true);
   echo "</div>";
	if (webyep_sShortTextContent("FotoLinksBildtext", false) || webyep_bIsEditMode()) {
?><div style="padding-top: 4px; text-align: center;"><?php webyep_shortText("FotoLinksBildtext", false); ?></div><?php } echo "</div>"; } ?>
<?php
	if (webyep_bCheckImage("FotoRechts", $iRightPhotoWidth, $sWidthCSS) || webyep_bIsEditMode()) {
?>
<!-- Right Photo: ======================================= -->
<?php
   printf('<div style="float: right; margin-left: %dpx; margin-bottom: %dpx;%s" class="WebYepFotoRechts"><div>', $iRightPhotoPadding, $iRightPhotoPadding, $sWidthCSS);
   webyep_image("FotoRechts", false, "", "", "", $iRightPhotoWidth, 0, true);
   echo "</div>";
	if (webyep_sShortTextContent("FotoRechtsBildtext", false) || webyep_bIsEditMode()) {
?><div style="padding-top: 4px; text-align: center;"><?php webyep_shortText("FotoRechtsBildtext", false); ?></div><?php } echo "</div>"; } ?>
<!-- Text: =============================================== -->
<div class="WebYepText"><?php
   // check for installed WYSIWYG HTML editor
   if (file_exists("$webyep_sIncludePath/opt/rte") || file_exists("$webyep_sIncludePath/opt/tinymce") || file_exists("$webyep_sIncludePath/opt/fckeditor")) {
	   webyep_richText("Text", false, "/webyep_text.css");
   }
   else {
	   webyep_longText("Text", false, "", true);
   }
?></div>
<!-- Float Container End: =============================================== -->
<?php echo "</div>\n"; ?>
<!-- Attachment: ========================================= -->
<?php	if (webyep_sShortTextContent("DateianhangBeschreibung", false) || webyep_bIsEditMode()) { ?>
<p class="WebYepDateianhang"><span class="WebYepDateianhangBeschreibung"><?php webyep_shortText("DateianhangBeschreibung", false); ?> </span><span class="WebYepDateianhangDateiname"><?php webyep_attachment("Dateianhang"); ?></span></p>
<?php } ?><?php
	if (webyep_bCheckImage("FotoZentriert", $iCenterPhotoWidth, $sWidthCSS) || webyep_bIsEditMode()) {
?>
<!-- Center Photo: ======================================= -->
<?php
   printf('<div style="text-align: center;" class="WebYepFotoZentriert"><div style="margin-left: auto; margin-right: auto; padding-top: %dpx; %s"><div>', $iCenterPhotoPadding, $sWidthCSS);
   webyep_image("FotoZentriert", false, "", "", "", $iCenterPhotoWidth, 0, true);
   echo "</div>";
	if (webyep_sShortTextContent("FotoZentriertBildtext", false) || webyep_bIsEditMode()) {
?><div style="padding-top: 4px; text-align: center;"><?php webyep_shortText("FotoZentriertBildtext", false); ?></div><?php } echo "</div></div>"; } ?>
<!-- Block Padding: ====================================== -->
<?php if ($iBlockPadding) printf('<div style="font-size: 0px; line-height: 0px; height: %spx;" class="WebYepBlockAbstand"></div>', $iBlockPadding); ?>
<!-- Loop End: =========================================== -->
<?php $webyep_oCurrentLoop->loopEnd(); } ?>
<div><?php webyep_logonButton(true); ?></div>

3. Die Codes zusammenbauen
3.1. Die WebYep Plugin publizierte PHP Seite muss jetzt in bestimmten Stellen Code-Teile aus der Accordion Seite bekommen. Man kann sicherlich direkt in dem Dokument arbeiten aber man kann auch einen neuen Dokument erstellen wo man den Code zusammenbaut und dann alles kopiert und den original Code ersetzt. Auf jeden Fall würde ich diesen oberen Code erstmal abgrenzen. Vor dem Code würde ich eine Anfangsbemerkung schreiben wie: und am Ende des Codes eine Schlussbemerkung wie:
3.2. Der Code mit allen WebYep Elementen, mit dem Anmeldeknopf unter dem Seitentitel gesetzt und mit einem Header-Text und einem Footer-Text befindet sich hier unten. Zwischen den Elementen habe ich zwei leere Zeilen dazugegeben um das Entfernen von nicht gebrauchten Elementen zu vereinfachen.

<!-- Start Accordion & WebYep -->
<!-- Mode: publish -->
<?php
	$iLeftPhotoPadding = 10;
	$iRightPhotoPadding = 10;
	$iLeftPhotoWidth = true ? 150:0;
	$iRightPhotoWidth = true ? 150:0;
	$iCenterPhotoPadding = 10;
	$iCenterPhotoWidth = true ? 300:0;
	$iBlockPadding = 20;

    if (!function_exists("webyep_bCheckImage")) {
        function webyep_bCheckImage($sN, $iFixedW, &$sWCSS)
        {
            $bRet = false;

            $sWCSS = "";
            $oElement = new WYImageElement($sN, $false, $iFixedW ? "width=\"$iFixedW\"":"", "", "");
            $sContent = $oElement->sDisplay();
            if ($sContent) {
                if ($iFixedW) $iW = $iFixedW;
                else {
                    $oImg = $oElement->oImage();
                    $iW = $oImg ? $oImg->iWidth():0;
                }
                $sWCSS = $iW ? (" width: " . $iW . "px;"):"";
                $bRet = true;
            }
            return $bRet;
        }
    }

	$sWidthCSS = "";
?>
<h1 class="WebYepSeitenTitel"><?php webyep_shortText("Seitentitel", false); ?></h1>

<div><?php webyep_logonButton(true); ?></div><br />

<div class="WebYepText"><?php
   // check for installed WYSIWYG HTML editor
   if (file_exists("$webyep_sIncludePath/opt/rte") || file_exists("$webyep_sIncludePath/opt/tinymce")) {
	   webyep_richText("HeaderText", false, "/webyep_text.css");
   }
   else {
	   webyep_longText("HeaderText", false, "", true);
   }
?></div>

<div class="contentSpacer">
</div><!-- this makes sure the content is long enough for the design -->
<div id="accordion_wrapper" style="position:relative; width:97%; border:0px; margin:0px; padding:0px; overflow:hidden;">
	<div id="acAlignment" style="position:relative; border:0px; padding:0px; margin-bottom:0px; margin-top:0px; margin-right:auto; margin-left:0px;">
		<!-- Loop Start: ======================================== -->
		<?php foreach (WYLoopElement::aLoopIDs("BlockSchleife") as $webyep_oCurrentLoop->iLoopID) { $webyep_oCurrentLoop->loopStart(true); ?>

			<div class="acToggle" onclick="accordion.showThisHideOpen();">
				<!-- Float Container Start: ======================================== -->
				<?php
				    if(preg_match('/MSIE +6/', $_SERVER['HTTP_USER_AGENT'])) echo "<div style=\"overflow: hidden; zoom: 1.0\">\n";
				    else echo "<div style=\"overflow: hidden;\">\n";
				?>
				<?php if (webyep_sShortTextContent("Blocktitel", false) || webyep_bIsEditMode()) { ?>
				<span class="WebYepBlockTitel"><?php webyep_shortText("Blocktitel", false); ?></span>
				<?php } ?>
			</div>
			<div class="acStretchOut">
				<div class="acStretch">

					<?php
						if (webyep_bCheckImage("FotoLinks", $iLeftPhotoWidth, $sWidthCSS) || webyep_bIsEditMode()) {
					?>
					<!-- Left Photo: ======================================== -->
					<?php
					   printf('<div style="float: left; margin-right: %dpx; margin-bottom: %dpx;%s" class="WebYepFotoLinks"><div>', $iLeftPhotoPadding, $iLeftPhotoPadding, $sWidthCSS);
					   webyep_image("FotoLinks", false, "", "", "", $iLeftPhotoWidth, 0, true);
					   echo "</div>";
						if (webyep_sShortTextContent("FotoLinksBildtext", false) || webyep_bIsEditMode()) {
					?><div style="padding-top: 4px; text-align: center;"><?php webyep_shortText("FotoLinksBildtext", false); ?></div><?php } echo "</div>"; } ?>

					<?php
						if (webyep_bCheckImage("FotoRechts", $iRightPhotoWidth, $sWidthCSS) || webyep_bIsEditMode()) {
					?>
					<!-- Right Photo: ======================================= -->
					<?php
					   printf('<div style="float: right; margin-left: %dpx; margin-bottom: %dpx;%s" class="WebYepFotoRechts"><div>', $iRightPhotoPadding, $iRightPhotoPadding, $sWidthCSS);
					   webyep_image("FotoRechts", false, "", "", "", $iRightPhotoWidth, 0, true);
					   echo "</div>";
						if (webyep_sShortTextContent("FotoRechtsBildtext", false) || webyep_bIsEditMode()) {
					?><div style="padding-top: 4px; text-align: center;"><?php webyep_shortText("FotoRechtsBildtext", false); ?></div><?php } echo "</div>"; } ?>

					<!-- Text: =============================================== -->
					<div class="WebYepText"><?php
					   // check for installed WYSIWYG HTML editor
					   if (file_exists("$webyep_sIncludePath/opt/rte") || file_exists("$webyep_sIncludePath/opt/tinymce") || file_exists("$webyep_sIncludePath/opt/fckeditor")) {
						   webyep_richText("Text", false, "/webyep_text.css");
					   }
					   else {
						   webyep_longText("Text", false, "", true);
					   }
					?></div>
					<!-- Float Container End: =============================================== -->
					<?php echo "</div>\n"; ?>

					<!-- Attachment: ========================================= -->
					<?php	if (webyep_sShortTextContent("DateianhangBeschreibung", false) || webyep_bIsEditMode()) { ?>
					<p class="WebYepDateianhang"><span class="WebYepDateianhangBeschreibung"><?php webyep_shortText("DateianhangBeschreibung", false); ?> </span><span class="WebYepDateianhangDateiname"><?php webyep_attachment("Dateianhang"); ?></span></p>
					<?php } ?>

					<?php
						if (webyep_bCheckImage("FotoZentriert", $iCenterPhotoWidth, $sWidthCSS) || webyep_bIsEditMode()) {
					?>
					<!-- Center Photo: ======================================= -->
					<?php
					   printf('<div style="text-align: center;" class="WebYepFotoZentriert"><div style="margin-left: auto; margin-right: auto; padding-top: %dpx; %s"><div>', $iCenterPhotoPadding, $sWidthCSS);
					   webyep_image("FotoZentriert", false, "", "", "", $iCenterPhotoWidth, 0, true);
					   echo "</div>";
						if (webyep_sShortTextContent("FotoZentriertBildtext", false) || webyep_bIsEditMode()) {
					?><div style="padding-top: 4px; text-align: center;"><?php webyep_shortText("FotoZentriertBildtext", false); ?></div><?php } echo "</div></div>"; } ?>

					<!-- Block Padding: ====================================== -->
					<?php if ($iBlockPadding) printf('<div style="font-size: 0px; line-height: 0px; height: %spx;" class="WebYepBlockAbstand"></div>', $iBlockPadding); ?>

				</div>
				<div style="width:99%; clear:both;">
				</div>
			</div>
		<!-- Loop End: =========================================== -->
		<?php $webyep_oCurrentLoop->loopEnd(); } ?>

	</div>
	<div style="width:99%; clear:both;">
	</div>
</div>
<br />

<div class="WebYepText"><?php
   // check for installed WYSIWYG HTML editor
   if (file_exists("$webyep_sIncludePath/opt/rte") || file_exists("$webyep_sIncludePath/opt/tinymce")) {
	   webyep_richText("FooterText", false, "/webyep_text.css");
   }
   else {
	   webyep_longText("FooterText", false, "", true);
   }
?></div>

<script type="text/javascript" src="files/prototype.lite.js">
</script> <script type="text/javascript" src="files/moo.fx.js">
</script> <script type="text/javascript" src="files/moo.fx.pack.js">
</script> <script type="text/javascript">
//<![CDATA[
  var acStretchers = document.getElementsByClassName('acStretchOut');  var acTogglers = document.getElementsByClassName('acToggle');  var accordion = new fx.Accordion(acTogglers, acStretchers, {opacity: false, duration: 300});
//]]>
</script>
<div class="clear"></div>
<div class="clearer"></div>
<!-- End Accordion & WebYep -->

4. Die Erstellung einer Weiterleitung Seite
Man muss jetzt eine Weiterleitungsseite erstellen die den gleichen Name, Ordnername und Dateiname bekommt die WebYep Seite hatte (hat, aber sie ist jetzt in RW nicht mehr aktiv).
Diese Weiterleitung Seite muss auch den Pfad zu der WebYep Seite zeigen. Dazu in der Seiteneinstellungen in dem Feld URL aus dem Plugin-Parameter Tab den absoluten Pfad schreiben.

Das müsste aber alles sein.
Hoffe wieder dass ich nicht Fehler gemacht habe und dass jemandem diese Codes nützlich sind.

Im Grunde wird die Einbindung von WebYep in Columns genauso behandelt wie bei Blocks. Die linke und rechte Spalte ist bei Columns schon aus dem Start schon da.
Wenn man von diesem Remark vor dem “if” aus dem Textbereich von WebYep weisst, dann ist für die Implementierung den gleichen Fahrplan bei Columns wie bei Blocks zu nehmen. Hier sogar mit einer Vereinfachung. Der Code Bereich:

<?php
	$iLeftPhotoPadding = 10;
	$iRightPhotoPadding = 10;
	$iLeftPhotoWidth = true ? 100:0;
	$iRightPhotoWidth = true ? 100:0;
	$iCenterPhotoPadding = 10;
	$iCenterPhotoWidth = true ? 200:0;
	$iBlockPadding = 20;

    if (!function_exists("webyep_bCheckImage")) {
        function webyep_bCheckImage($sN, $iFixedW, &$sWCSS)
        {
            $bRet = false;

            $sWCSS = "";
            $oElement = new WYImageElement($sN, $false, $iFixedW ? "width=\"$iFixedW\"":"", "", "");
            $sContent = $oElement->sDisplay();
            if ($sContent) {
                if ($iFixedW) $iW = $iFixedW;
                else {
                    $oImg = $oElement->oImage();
                    $iW = $oImg ? $oImg->iWidth():0;
                }
                $sWCSS = $iW ? (" width: " . $iW . "px;"):"";
                $bRet = true;
            }
            return $bRet;
        }
    }

	$sWidthCSS = "";
?>

braucht man nicht sowohl in der linken als auch der rechten Spalte übernehmen zu werden sondern einfach nur einmal im Header von Columns kopiert zu werden. Für die Spalten reicht es aus den Code ab

<!-- Loop Start: ======================================== -->

kopiert zu werden.

Man muss hier bei Columns nicht vergessen dass überall der Code ausgewählt muss und mit Formatierung ignorieren aus dem Menü Format verseht. Wenn man auch die Reihe des Codes

   // check for installed WYSIWYG HTML editor

nicht vergisst dass sie gelöscht werden muss dann steht es nichts mehr in Wege WebYep auch in Columns zu benutzen.