[BETA] Outside Left Navigation Bar MOD

Martin Truckenbrodt · Beitrag von **Martin Truckenbrodt** » 07.08.2005 11:54

Hallo,

neueste Verison: 1.0.0 vom 7.10.2005

Willst Du das phpBB mittels include Befehl in eine PHP basierende Website einbauen, ist dieser MOD dafür geeignet.

DEMO:
http://paludarium.pipidae.de
http://martin-truckenbrodt.com

Es ist mehr ein Workaround als ein wirklicher MOD, da das phpBB von Hause aus sowas nicht vorsieht und wohl auch einige Entwickler nur die Variante "Website ins phpBB integrieren" befürworten: http://www.phpbb.de/doku/kb/artikel.php?artikel=94
Hier kann man sich dann eine phpBB interne Navigationsleiste im phpBB Design erstellen: http://www.phpbb.de/doku/kb/artikel.php?artikel=145

Einzige aber mit gutem Grund ungeliebte Alternative ist die Verwendung von Framesets: http://www.phpbb.de/doku/kb/artikel.php?artikel=58

Gruß Martin

Martin Truckenbrodt · Beitrag von **Martin Truckenbrodt** » 11.12.2005 22:26

Hallo,
ich habe die Sache mal etwas ausfürlicher formuliert:

Viele Internetnutzer haben in ihren Browsern JavaScript deaktiviert. Weswegen FrameSets für die BEsucher nicht funktionieren.
Deshalb ist es meiner Meinung immer besser diesen Aufgabe erledigen zu lassen.

Die Webseite im Beispiel heißt www.martin-truckenbrodt.com. Sie ist auch die DEMO Installation.

In diesem Beispiel gibt es auf dem Webserver (Webspace) folgende Ordner:

./ (root) - entählt die PHP/HTML Dateien der Webseite
./css - enthält die die CSS Dateien der Webseite
./includes - enthält die include (inc) Dateien der Webseite
./phpBB2 - enthälr irgendewas mit dem Namen phpBB2

Die Dateien der Webseite sollten in etwa wie folgt aussehen:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<META name="title" content="your title">
	<META name="keywords" content="your keywords">
	<META name="description" content="your description">
	<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>your title</title>
	<LINK rel="stylesheet" href="css/styles.css">
</head>
<body>
<table class="body" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td class="tdnav">
			<? include "includes/navigation.inc.php" ?>
		</td>
		<td class="tdbody">
			
			<!--- your website content --->
			
			<h1 algin="center">Hallo</h1>
			
		</td>
	</tr>
</table>
</body>
</html>

In diesem Artikel wird CSS (die subSilver.css) aktiviert - mehr Infos dazu: http://www.phpbb.de/doku/kb/artikel.php?artikel=69 . Dies ist nicht wirklich notwendig, macht aber die Sache wesentlich einfacher.

1. Führe folgende Code Änderungen durch (nachdem Du die Dateien gesichert hast

):
[ÖFFNE]
includes/page_header.php
[FINDE]

Code: Alles auswählen

	'NAV_LINKS' => $nav_links_html)

[ERSETZE MIT]

Code: Alles auswählen

	'NAV_LINKS' => $nav_links_html,
	'NAV_BAR' => implode("",file("http://www.martin-truckenbrodt.com/includes/navigation2.inc.php")))

[ÖFFNE]
templates/subSilver/overall_footer.tpl
[FINDE]

Code: Alles auswählen

</body>

[DAVOR, FÜGE EIN]

Code: Alles auswählen

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

[ÖFFNE]
templates/subSilver/overall_header.tpl
[FINDE]

Code: Alles auswählen

<!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->
<style type="text/css">
<!--
... a lot of lines!
-->
</style>

[ERSETZE MIT]

Code: Alles auswählen

<link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css">

[FINDE]

Code: Alles auswählen

<a name="top"></a>

[DANACH, FÜGE EIN]

Code: Alles auswählen

<table class="body" cellpadding="0" cellspacing="0" border="0">
	<tr>
	<td class="tdnav">
		{NAV_BAR}
	</td>
	<td class="tdbody">

2. make a copy of the navigation bar of your website navigation.inc.php -> navigation2.inc.php into the same folder. Open the copy (navigation2.inc.php) and change all paths as it would be neccessary to use this file when it would be placed in the phpBB root folder.
example navigation.inc.php:

Code: Alles auswählen

<div class="navbar" align="left"><A class="logo" href="index.php">Home</A></div>
<br>
<ul class="navbar">
	<li class="navbar"><A class="navbar" href="phpBB2/index.php">Forum</A></li>
	<li class="navbar"><A class="navbar" href="contact.php">Kontakt</A></li>
	<li class="navbar"><A class="navbar" href="links.php">Links</A></li>
	<li class="navbar"><A class="navbar" href="impress.php">Impressum</A></li>
</ul>

example navigation2.inc.php:

Code: Alles auswählen

<div class="navbar" align="left"><A class="logo" href="../index.php">Home</A></div>
<br>
<ul class="navbar">
	<li class="navbar"><A class="navbar" href="index.php">Forum</A></li>
	<li class="navbar"><A class="navbar" href="../contact.php">Kontakt</A></li>
	<li class="navbar"><A class="navbar" href="../links.php">Links</A></li>
	<li class="navbar"><A class="navbar" href="../impress.php">Impressum</A></li>
</ul>

3. Öffne die CSS Datei Deiner Website und öffne die subSilver.css. Kopiere aus der CSS Datei Deiner Webseite relevanten Tags in die subSilver.css.
Beispiel Tags:

Code: Alles auswählen

TABLE.body {background-color: #FFCC66; color: #990000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; vertical-align: top; 	height: 100%; width: 100%;}
TD.tdbody {vertical-align: top; width: auto; border: 0px; background-color: #FFCC66;}
TD.tdnav {	background-color: #FFCC66; vertical-align: top; width: 180px; border: 0px;}
UL.navbar {font-size: 12pt;}
LI.navbar {font-size: 12pt; color : #990000;}
A.navbar {	color: #0099FF; text-decoration: none; font-size: 12pt; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
A.navbar:VISITED {color: #0099FF; text-decoration: none; font-size: 12pt; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
A.navbar:HOVER {color: #0099FF; text-decoration: none; font-size: 12pt; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
A.logo {color: #990000; text-decoration: none; font-size: 15pt; font-style: italic; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
A.logo:VISITED {color : #990000; text-decoration: none; font-size: 15pt; font-style: italic; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}
A.logo:HOVER {color : #990000; text-decoration: none; font-size: 15pt; font-style: italic; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;}

4. Synchronisiere alle Einstellungen für den body Tag mit der .bodyline class in der subSilver.css (diese müssen identisch sein).

Einige Layout-Tipps:
Willst Du einen Rand um das Forum herum haben:
- füge dem body Tag Folgendes hinzu: margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;
- füge der .bodyline class Folgendes hinzu: padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;

Möchtest die Linie um das Forum herum ausschalten:
- setze für die .forumline class border: 0px ...

Auf www.phpbb.com wurde die Validierung dieses MODs abgelehnt, weil er zu viele DIY (Do-It-Yourself) Anweisungen enthält. Diese Entscheidung kann ich nachvollziehen. Nun habe ich die Sache als KB Artikel formuliert und gearde auch noch eingedeutscht.
Nur finde ich leider keine Möglichkeit auf www.phpbb.de KB Artikel vorzuschlagen oder einzustellen.

Gruß Martin