phpBBHacks.com, the place for phpBB users

Bookmark and Share

Get phpBB Integrated into Your Web Design

Get phpBB Integrated into Your Web Design

Postby Khamul » May 23rd 2006, 8:58 am

Before we get started, I just wanted to say that this is my first tutorial and English is my second language.

I wanted to integrate my phpBB into the rest of my web design, so I'd have my banner and menu and it would be easy for users to navigate to other sites. I searched around, found various solutions, but I couldn't find any place where they explained how to integrate your phpBB into your web design. Perhaps I was just unlucky with my search. Anyway, I believe there might be others in my situation and theres not a tutorial here to do it, so I thought I'd make one.

It's simple to integrate your phpBB into rest of your web design. You need the following:

- Basic HTML knowledge
- Text editor
- Ability to edit source files (in other words, it's not possible if you're using a service that only hosts phpBB forums for you and you have no FTP, SFTP or similar access to the actual phpBB files)

There are only two files you need to edit: overall_header.tpl and overall_footer.tpl. These two files can be found in the directory in which your phpBB template is located. We'll be using subSilver as an example for this tutorial which can be found in your phpBB directory in the templates\subSilver folder. It's basically the same on the other templates, as well.

Open up the text editor you prefer (like: EditPlus, Dreamweaver or Notepad). Open the overall_header.tpl file, scroll down and you'll find the body tag (<body>). By default, it is on line 223 in subSilver if you haven't changed the file before. Right after the body tag, you can add your own HTML code, like the code for your banner and menu (you can't add PHP code here, but you can add JavaScript code). After you have done that, you must set the content that was there before, under body in it's own "container", like a table or by using a div tag in CSS (such as <div id="MainContent"> - if you are using CSS you can add this within the <style> tags in the upper part of the overall_header.tpl file or inside of your linked CSS file, if you link to an external file) with the right positioning and size information so that it looks good within your design. This is to keep the forum in place, so it does not float all over the site and over (or under) your web design.

Now, we also need to give an end tag to this "container", which will be on the bottom after the forum. So, we'll have to open up the overall_footer.tpl file. Go to the end tag of body (</body>) and above the end tag, you should first end the "container", in other words end the table or end the CSS container (</div>). You can also add your own HTML code after that if you wish. This would make some sort of footer.

If you have any questions, feel free to send me a PM. I can't promise I'll be around to answer them quickly.

Hope you found this little tutorial useful.
Khamul
New User
 
Posts: 1
Joined: May 23rd 2006, 8:19 am
Location: Norway

Return to phpBB 2: Integrating phpBB With Your Website

Who is online

Users browsing this forum: No registered users and 0 guests