lots of people want to integrate the phpBB3 board into their website. They are trying to make this with PHP include. That's the wrong way!
The better and much easier solution is to put the website navigation bar into the phpBB3 board. Let's do it!
DEMO: I did it like this on my website http://paludarium.pipidae.de .
Prerequirements:
- Some experience and knowledge in XHTML oder HTML and in CSS would be very helpfully. If you don't have it it will take a lot of time to get a good result with this HOW-TO! Perhaps you should stop reading now?
- It would be very helpfully if your webiste soon uses XHTML or least CSS with HTML.
Intruduction:
phpBB3 (with prosilver) is written in XHTML 1.0 STRICT. So the website navigation bar which should be included has to have this standard too. But it doesn't matter whether your website is written in XHTML or not.
The HOW-TO uses phpBB3 technics with a minimum of changings to the core phpBB3 files.
The webiste navbar will be included as overall_navbar.html into the overall_header.html which makes the header for all phpBB3 pages (but not the ACP pages).
If you are using different domains or subdomains for your website and for your board you should use complete URLs in the overall_navbar.html .
All necessary CSS stuff for the website navbar you can copy from your website CSS file if one exists. If you are not using CSS on your website you should take some looking for this very helpfull technic! The main important thing is that you should use unique names for the tags. I've used the prefix oa... . So you can be sure that there are no conflicts with the phpBB3 CSS tags. All the navbar CSS tags are included in an extra CSS file oanavbar.css which very simple is only included into the styleheet.css file.
The last step is to customize the board background colours or background images and the paddings or margins. This has to be done at the common.css . Here perhaps you to do some tests.
Example installation - as used on http://paludarium.pipidae.de :
1. create a XHTML STRICT 1.0 standard navbar file called phpbb_root/styles/prosilver/template/overall_navbar.html like this one:
- Code: Select all
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="oanavbarleft"><a href="../../index.php"><img class="oanavbar" src="../../gfx/logo2.gif" alt="Home"></img></a></td> <td class="oanavbarmidleft"> <table class="oanavbar"> <tr class="oanavbar"> <td class="oanavbar"><a class="oanavbar" href="../../index.php"><b>»Home</b></a></td> <td class="oanavbar"><a class="oanavbar" href="../../news.php"><b>»News</b></a></td> <td class="oanavbar"><a class="oanavbar" href="index.php"><b>»Forum</b></a></td> <td class="oanavbar"><a class="oanavbar" href="../../links.php"><b>»Links</b></a></td> <td class="oanavbar"><a class="oanavbar" href="../../kontakt.php"><b>»Kontakt</b></a></td> <td class="oanavbar"><a class="oanavbar" href="../../impressum.php"><b>»Impressum</b></a></td> <td class="oanavbar"><a class="oanavbar" href="../../suche.php"><b>»Suche</b></a></td> </tr> <tr class="oanavbar"> <td colspan="7" class="oanavbarsmall"><a class="oanavbarsmall" href="../../paludarien.php"><b>»Paludarien</b></a></td> </tr> <tr class="oanavbar"> <td colspan="7" class="oanavbarsmall"><a class="oanavbarsmall" href="../../literatur.php"><b>»Literatur</b></a></td> </tr> </table> <table> <tr> <td><img src="http://pipidae.org/gfx/gif.gif" width="1" height="23" alt=""></img></td> </tr> </table> </td> <td class="oanavbarmidright"> <table class="oanavbar"> <tr class="oanavbar"> <td class="oanavbardark"><img src="http://pipidae.org/gfx/scr_a6_3.gif" alt="" class="oanavbar"></img></td> </tr> </table> <table> <tr> <td><img src="http://pipidae.org/gfx/gif.gif" width="1" height="23" alt=""></img></td> </tr> </table> </td> <td class="oanavbarmidright"> <table class="oanavbar"> <tr class="oanavbar"> <td class="oanavbardark"> </td> </tr> <tr class="oanavbar"> <td class="oanavbarsmall"><a name="pipidae.org" href="http://www.pipidae.org" class="oanavbarsmall" title="pipidae.org"><b>pipidae.org</b></a></td> </tr> <tr class="oanavbar"> <td class="oanavbarsmall"> </td> </tr> </table> <table> <tr> <td><img src="http://pipidae.org/gfx/gif.gif" width="1" height="23" alt=""></img></td> </tr> </table> </td> <td class="oanavbarright" valign="top"><img class="oanavbar" src="http://pipidae.org/gfx/scr_c.gif" alt=""></img></td> </tr> </table>
This file haven't to include DOCTYPE definition, header tags or other tags like these ones!!! This is done in phpbb_root/styles/prosilver/template/overall_header.html .
2. take the needed CSS stuff into a file called phpbb_root/styles/prosilver/theme/oanavbar.css
- Code: Select all
a.oanavbarsmall { color: #FFFFFF; background-color: #006600; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10pt; text-decoration: none; font-style: italic; } a.oanavbarsmall:visited { color : #FFFFFF; background-color: #006600; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 10pt; text-decoration: none; font-style: italic; } a.oanavbarsmall:hover { color : #FFFF33; background-color: #006600; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 10pt; text-decoration: blink; font-style: italic; } a.oanavbar { color : #FFFFFF; background-color: #33CC00; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 10pt; text-decoration: none; font-style: italic; } a.oanavbar:visited { color : #FFFFFF; background-color: #33CC00; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 10pt; text-decoration: none; font-style: italic; } a.oanavbar:hover { color : #FFFF33; background-color: #33CC00; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 10pt; text-decoration: blink; font-style: italic; } td.oanavbarsmall { background-color: #006600; font-size: 10pt; height: 26px; width: 14%; vertical-align: middle; border: 0; } td.oanavbar { background-color: #33CC00; font-size: 10pt; height: 27px; width: 14%; vertical-align: middle; border: 0; } td.oanavbardark { background-color: #006600; font-size: 10pt; height: 27px; width: 0%; vertical-align: top; border: 0; } td.oanavbarleft { vertical-align: top; width: 129px; border: 0; } td.oanavbarright { vertical-align: top; width: 25px; border: 0; } td.oanavbarmidleft { vertical-align: top; border: 0; } td.oanavbarmidright { vertical-align: top; width: 0%; border: 0; } table.oanavbar { background-color: #FFFFFF; border-collapse: collapse; margin: 0px 0px 0px 0px; width: 100%; height: 79px; } th.oanavbar { color: #FFFFFF; background-color: #006600; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: oblique; } a.oanavbartitle { color: #4C4C4C; font-size: larger; font-style: italic; text-decoration: none; } a.oanavbartitle:VISITED { color: #4C4C4C; font-size: larger; font-style: italic; text-decoration: none; } a.oanavbartitle:HOVER { color: #4C4C4C; font-size: larger; font-style: italic; text-decoration: none; } img.oanavbar { border: 0; }
You have to use class names which ar not used in phpBB3!
3. OPEN
phpbb_root/styles/prosilver/theme/stylesheet.css
and add following line at the end of the code
- Code: Select all
@import url("oanavbar.css");
4. OPEN
phpbb_root/styles/prosilver/template/overall_header.html
FIND
- Code: Select all
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
AFTER, ADD
- Code: Select all
<!-- INCLUDE overall_navbar.html -->
5. (optional) OPEN
phpbb_root/styles/prosilver/theme/common.css
EDIT for your individual need.
I've changed it here:
- Code: Select all
body { /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */ font-family: Verdana, Helvetica, Arial, sans-serif; color: #828282; background-color: #FFFFFF; /*font-size: 62.5%; This sets the default font size to be equivalent to 10px */ font-size: 10px; margin: 0; padding: 0 0; }
Bye Martin