An EXAMPLE of how to Integrate phpBB in your WebPage!!!

The 2.0.x discussion forum has been locked; this will remain read-only. The 3.0.x discussion forum has been renamed phpBB Discussion.
Registered User
Posts: 4
Joined: Wed Aug 17, 2005 3:30 pm
Location: Romania

An EXAMPLE of how to Integrate phpBB in your WebPage!!!

Post by drcyrus3d »


After 2 days of searching over the internet I thought I should start doing the integration of a phpBB forum on my own.

Nobody posted a real method for this problem. I saw a few posts from wich I got the idea to open and modify the files overall_headear.tpl and overall_footer.tpl

Ok let’s se how it is done!!!

You can find these two files at: forum/templates/style_name/.

The default style name I have is “subSylver”, so the path to those files is: forum/templates/subSylver/overall_headear.tpl and forum/templates/subSylver/overall_footer.tpl

Now, let’s say you have your template, with nice pictures and stuff.

You have the place where you want to put you forum inside your template.

Create a table, it’s more safe to have the width well established.

Ok so your templates code should look something like this:



<!--This is the table I told you to create :)-->


Before you start anything backup these to files (overall_header.tpl and ovearall_footer.tpl) somewhere on your harddrive. It may not come out first just as you wished!!!

Open the overall_headear.tpl. In this file you see a lot of sourcecode wich is very well structured.

So let's take the first tags, the "<head>" tag.

In the overall_header.tpl you have a head section. Take all the code from there and paste it into your template in the sead section.

What you would have to paste would be:
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>{SITENAME} :: {PAGE_TITLE}</title>
<!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->
<style type="text/css">
The original subSilver Theme for phpBB version 2+
Created by subBlue design

NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2
theme administration centre. When you have finalised your style you could cut the final CSS code
and place it in an external file, deleting this section to save bandwidth.

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: {T_BODY_BGCOLOR};
scrollbar-face-color: {T_TR_COLOR2};
scrollbar-highlight-color: {T_TD_COLOR2};
scrollbar-shadow-color: {T_TR_COLOR2};
scrollbar-3dlight-color: {T_TR_COLOR3};
scrollbar-arrow-color: {T_BODY_LINK};
scrollbar-track-color: {T_TR_COLOR1};
scrollbar-darkshadow-color: {T_TH_COLOR1};

/* General font families for common tags */
font,th,td,p { font-family: {T_FONTFACE1} }
a:link,a:active,a:visited { color : {T_BODY_LINK}; }
a:hover { text-decoration: underline; color : {T_BODY_HLINK}; }
hr { height: 0px; border: solid {T_TR_COLOR3} 0px; border-top-width: 1px;}

/* This is the border line & background colour round the entire page */
.bodyline { background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }

/* This is the outline round the main forum tables */
.forumline { background-color: {T_TD_COLOR2}; border: 2px {T_TH_COLOR2} solid; }

/* Main table cell colours and backgrounds */
td.row1 { background-color: {T_TR_COLOR1}; }
td.row2 { background-color: {T_TR_COLOR2}; }
td.row3 { background-color: {T_TR_COLOR3}; }

This is for the table cell above the Topics, Post & Last posts on the index.php page
By default this is the fading out gradiated silver background.
However, you could replace this with a bitmap specific for each forum
td.rowpic {
background-color: {T_TD_COLOR2};
background-image: url(templates/subSilver/images/{T_TH_CLASS3});
background-repeat: repeat-y;

/* Header cells - the blue and silver gradient backgrounds */
th {
color: {T_FONTCOLOR3}; font-size: {T_FONTSIZE2}px; font-weight : bold;
background-color: {T_BODY_LINK}; height: 25px;
background-image: url(templates/subSilver/images/{T_TH_CLASS2});
},td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(templates/subSilver/images/{T_TH_CLASS1});
background-color:{T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid; height: 28px;

Setting additional nice inner borders for the main table cells.
The names indicate which sides the border will be on.
Don't worry if you don't understand this, just ignore it :-)
*/,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; border: {T_TD_COLOR2}; border-style: solid; height: 28px;
td.row3Right,td.spaceRow {
background-color: {T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid;

th.thHead,td.catHead { font-size: {T_FONTSIZE3}px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom { border-width: 0px 1px 1px 1px; }
th.thTop { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }

/* The largest text used in the index page title and toptic title etc. */
.maintitle {
font-weight: bold; font-size: 22px; font-family: "{T_FONTFACE2}",{T_FONTFACE1};
text-decoration: none; line-height : 120%; color : {T_BODY_TEXT};

/* General text */
.gen { font-size : {T_FONTSIZE3}px; }
.genmed { font-size : {T_FONTSIZE2}px; }
.gensmall { font-size : {T_FONTSIZE1}px; }
.gen,.genmed,.gensmall { color : {T_BODY_TEXT}; }
a.gen,a.genmed,a.gensmall { color: {T_BODY_LINK}; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: {T_BODY_HLINK}; text-decoration: underline; }

/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT} }
a.mainmenu { text-decoration: none; color : {T_BODY_LINK}; }
a.mainmenu:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Forum category titles */
.cattitle { font-weight: bold; font-size: {T_FONTSIZE3}px ; letter-spacing: 1px; color : {T_BODY_LINK}}
a.cattitle { text-decoration: none; color : {T_BODY_LINK}; }
a.cattitle:hover{ text-decoration: underline; }

/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: {T_FONTSIZE3}px; color : {T_BODY_LINK}; }
a.forumlink { text-decoration: none; color : {T_BODY_LINK}; }
a.forumlink:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
a.nav { text-decoration: none; color : {T_BODY_LINK}; }
a.nav:hover { text-decoration: underline; }

/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2 { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT}; }
a.topictitle:link { text-decoration: none; color : {T_BODY_LINK}; }
a.topictitle:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.topictitle:hover { text-decoration: underline; color : {T_BODY_HLINK}; }

/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT};}

/* Location, number of posts, post date etc */
.postdetails { font-size : {T_FONTSIZE1}px; color : {T_BODY_TEXT}; }

/* The content of the posts (body of text) */
.postbody { font-size : {T_FONTSIZE3}px; line-height: 18px}
a.postlink:link { text-decoration: none; color : {T_BODY_LINK} }
a.postlink:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.postlink:hover { text-decoration: underline; color : {T_BODY_HLINK}}

/* Quote & Code blocks */
.code {
font-family: {T_FONTFACE3}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR2};
background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px

.quote {
font-family: {T_FONTFACE1}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR1}; line-height: 125%;
background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px

/* Copyright and bottom info */
.copyright { font-size: {T_FONTSIZE1}px; font-family: {T_FONTFACE1}; color: {T_FONTCOLOR1}; letter-spacing: -1px;}
a.copyright { color: {T_FONTCOLOR1}; text-decoration: none;}
a.copyright:hover { color: {T_BODY_TEXT}; text-decoration: underline;}

/* Form elements */
input,textarea, select {
color : {T_BODY_TEXT};
font: normal {T_FONTSIZE2}px {T_FONTFACE1};
border-color : {T_BODY_TEXT};

/* The text input fields background colour */,, select {
background-color : {T_TD_COLOR2};

input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
background-color : {T_TR_COLOR1};
color : {T_BODY_TEXT};
font-size: {T_FONTSIZE2}px; font-family: {T_FONTFACE1};

/* The main submit button option */
input.mainoption {
background-color : {T_TD_COLOR1};
font-weight : bold;

/* None-bold submit button */
input.liteoption {
background-color : {T_TD_COLOR1};
font-weight : normal;

/* This is the line in the posting page which shows the rollover
help line. This is actually a text box, but if set to be the same
colour as the background no one will know ;)
.helpline { background-color: {T_TR_COLOR2}; border-style: none; }

/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("templates/subSilver/formIE.css");
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
{'{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
<!-- END switch_enable_pm_popup -->

Ok! The next part we have to take care of is the body.

The body section of the overall_header.tpl file, you copy it into the table i told you to create before, between the <td> and </td>, if you like, paste it over the comment i made in that tag.

The content (for the subSylver style) should be like this:
<a name="top"></a>

<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center">
<td class="bodyline"><table width="100%" cellspacing="0" cellpadding="0" border="0">
<a href="{U_INDEX}"><img src="templates/subSilver/images/logo_phpBB.gif" border="0" alt="{L_INDEX}" vspace="1" />
<td align="center" width="100%" valign="middle">
<span class="maintitle">{SITENAME}</span>
<br />
<span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
<table cellspacing="0" cellpadding="2" border="0">
<td align="center" valign="top" nowrap="nowrap">
<span class="mainmenu">&nbsp;<a href="{U_FAQ}" class="mainmenu">
<img src="templates/subSilver/images/icon_mini_faq.gif" width="12" height="13" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a></span><span class="mainmenu">&nbsp; &nbsp;<a href="{U_SEARCH}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_search.gif" width="12" height="13" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}</a>&nbsp; &nbsp;<a href="{U_MEMBERLIST}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_members.gif" width="12" height="13" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}</a>&nbsp; &nbsp;<a href="{U_GROUP_CP}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_groups.gif" width="12" height="13" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}</a>&nbsp;
<!-- BEGIN switch_user_logged_out -->
&nbsp;<a href="{U_REGISTER}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_register.gif" width="12" height="13" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}</a></span>&nbsp;
<!-- END switch_user_logged_out -->
<td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_PROFILE}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_profile.gif" width="12" height="13" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}</a>&nbsp; &nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_message.gif" width="12" height="13" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}</a>&nbsp; &nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="templates/subSilver/images/icon_mini_login.gif" width="12" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a>&nbsp;</span></td>
<br />

OK! Were done with the overall_header.tpl file.

After the code you have just pasted insert this comment:
<!--I’ll cut here when the time comes -->
.We’ll need it later!!!

Let's get to the overall_footer.tpl file.

Open this file ! You know the section of the <td> tag you created put the code in there after, what you just pasted before from the overall_headear file.

I tooked out from the overall_headear file only what i was interested in. That's:

<div align="center"><span class="copyright"><br />{ADMIN_LINK}<br />
We request you retain the full copyright notice below including the link to
This not only gives respect to the large amount of time given freely by the developers
but also helps build interest, traffic and use of phpBB 2.0. If you cannot (for good
reason) retain the full copyright we request you at least leave in place the
Powered by phpBB line, with phpBB linked to If you refuse
to include even this then support on our forums may be affected.

The phpBB Group : 2002
// -->
Powered by <a href="" target="_phpbb" class="copyright">phpBB</a> &copy; 2001, 2005 phpBB Group<br />{TRANSLATION_INFO}</span></div>

ATENTION!!! Don't take the closing tags for <body> and <html> (and those are </body> and </html>) from the end of this file.


After this last paste your code should continue with the rest of your templates code.

Now you have the combination of three files: your template + overall_header.tpl + overall_footer.tpl.

Now we’ll split the code of this file. Remember the comment I made you to make? (“<!--I’ll cut here when the time comes -->”)

Select from your template file from the first line of code until the comment “<!--I’ll cut here when the time comes -->”. Copy it and then, open the overall_header.tpl file (from your FTP or localhost directory), select all it’s content delete it and paste the selection you just did.

Now copy the code from under the comment “<!--I’ll cut here when the time comes -->”, until the end (the rest of the code).
Now select the overall_footer.tpl file and select all it’s content , delete it and paste the what you just copied.

Enjoy it!

If you have questions I would be happy to help you out.
Registered User
Posts: 4
Joined: Wed Aug 17, 2005 3:30 pm
Location: Romania

I forgot to tell you about modifing the pictures path!

Post by drcyrus3d »

I forgot to tell you about modifing the pictures path!

I had a directory structure like this:

+ root
---+ images
---+ forum
-----+ ...
-----+ ...
-----+ templates
-------+ subSylver
--------- - ...
--------- - ...
--------- - overall_header.tpl
--------- - overall_footer.tpl
--------- - ...

So in the code before i had the link to the images like this: <img src="images/picture.jpg">

After altering the overall_header.tpl and overall_footer.tpl files i chaged the path to the image directory to: <img src="../../../images/">

As you can see in the directory structure, i had 3 directories until the root from the directory where i could see those two tpl files. That's why i put 3 times "../".

If you have other directory structure do the math. :D
Registered User
Posts: 463
Joined: Mon Jul 25, 2005 1:34 am

Post by gmex2006 »

Thank you for sharing this piece of info!
Registered User
Posts: 4
Joined: Wed Aug 17, 2005 3:30 pm
Location: Romania


Post by drcyrus3d »

I'm glad i could help you out!
Registered User
Posts: 128
Joined: Fri Apr 16, 2004 5:05 pm

Post by pappfer »


I have a menu.php file in my site and i want to include it to my forum... This is a good "trick" what the topic starter did, but unfortunately it doesn't work with php just with html. I can't include my menu.php by <?php include "menu.php" ?> cause .tpl files can't deal with php.. Is there any other solutions for this? Would be important!
Registered User
Posts: 118
Joined: Tue Aug 31, 2004 1:05 pm

Post by Cenobitez »

you could request your host makes PHP parse tpl files ;) i had a host a while ago make "*.cen" files be parsed by perl :) so ask if they will set tpl :) they can only say no :)
Registered User
Posts: 6
Joined: Sun Aug 21, 2005 6:42 pm

Post by wolfdogg »

I use .tpl files for my site for a different purpose... and I only have .php pages.

I've always been able to make them work by one of 3 ways:

Code: Select all


Or you can do it like this:

Code: Select all

{fetch file=""} 

You can also do it like this:

Code: Select all

{literal}<?php include(""); ?>{/literal}

Fetch is the easiest to use. I assume it's the same for this purpose?
Registered User
Posts: 128
Joined: Fri Apr 16, 2004 5:05 pm

Post by pappfer »

Thank you for the suggestions, but no luck! :(
I've tried all the 3 codes but doesn't work! When i execute the page i can see my forum and in the top of the forum i can see your codes. I guess it means that it couldn'T translate them.. If you want i can put on my server my overall_header.tpl and my overall_footer.tpl, but i'M sure i did everything right.. I inserted the codes just under <body>. I've tried all the 3. Any suggestions?

Thank you again for trying to help!
Registered User
Posts: 128
Joined: Fri Apr 16, 2004 5:05 pm

Post by pappfer »

Maybe it doesn't work cuz phpBB uses a different tpl library?
I still can't insert php into tpl.. :cry: Any other suggestions, please?
Registered User
Posts: 886
Joined: Tue Jun 21, 2005 7:40 pm

Post by Riamus »

I believe I read that the extreme styles mod allows you to include php in a tpl file.
Kakkoii Translation Team
格好いい 翻訳
User avatar
Registered User
Posts: 82
Joined: Sun Dec 19, 2004 6:23 pm

Re: :D

Post by Disstress »

EDIT: I was just doing it wrong :/
Last edited by Disstress on Wed Oct 19, 2005 1:57 pm, edited 1 time in total.
Registered User
Posts: 12
Joined: Wed Oct 12, 2005 1:53 am

Post by EviLKarL »

Does this modification work if I wanted to have links down the left hand site of my forum which link back to other pages within my site ?
Registered User
Posts: 1083
Joined: Sun May 16, 2004 1:16 am

Post by quick5pnt0 »

User avatar
Martin Truckenbrodt
Registered User
Posts: 3045
Joined: Sun Mar 23, 2003 6:22 pm
Location: Franconia
Name: Martin Truckenbrodt

Post by Martin Truckenbrodt »

you can look ta my signature, too. 8)

Bye Martin
Free tutorial: Installing MODs in phpBB 3.0
Advanced Block MOD - Prevent spam on your phpBB 3.0 board with Stop Forum Spam, BotScout, Akismet, Project Honey Pot and several IP-RBL and Domain-RBL DNS blacklists!
Use the official phpBB Ideas to vote missing core features!!!
Registered User
Posts: 2
Joined: Tue Apr 04, 2006 7:20 pm

Post by boostnetwork »

Man this post rocks!

thank you very much bud! :) :) :)

Return to “2.0.x Discussion”