|
Embedding a phpbb2 Message
Board into Your Webpage (By Ed Jean)
Here I will walk you
through how I embedded a phpbb2 message board into my webpage.
For this example, my webpage is limited to 760px wide, and
centered on the screen. If your webpage is not width
limited, then the steps for changing the "overall_header.tpl"
file would not be necessary. This example is based on a
phpbb2 message board (www.phpbb.com),
but any other board will work; however, the method for changing
table widths, etc may (probably will) vary. I only have
experience with phpbb2.
Step #1 - Download the latest
version of phpbb2 and follow their instructions for setting up
the message board. The default style is "Subsilver", so
my example is based on that default. Other styles can be
downloaded from phpbb2. Below is a screenshot of the board
unaltered on the screen. NOTE - I have cropped out the
address bar on all screenshots that would normally show the
address bar, etc.
Step #2 - To limit the
width of your message board, open the "overall_header.tpl" file
found in the templates/subsilver subfolder the phpbb2 folder
using Wordpad or Notepad. Wordpad is better since Notepad
often shows text as long, continuous lines. Open a new
blank document in Frontpage and click on the code view.
Copy the table at the bottom of the "overall_header.tpl" (see
first picture below) and paste it into the FP document between
the <body> tags (see second picture below).
Step 3 - Now click on the
Design tab and you will see the tables, cells, etc. Notice
that you will see a blank picture on the left (this is the
phpbb2 logo), and a space for SITENAME and SITE DESCRIPTION.
Also notice that the table is 100%, as would be expected based
on the code we just copied over.
Here you can modify the table and
cells, and even add your own logo, additional hyperlinks, etc.
For my site, I deleted the SITENAME, SITE DESCRIPTION and phpbb
logo. Then I selected the main table and specified a width
of 725px and centered it. Reference the next two pictures.
Step 4 - Now click on the
Code tab and copy from <div> tags then paste it back into the
same space originally copied from in the "overall_header.tpl"
file. Reference the next two pictures.
After pasting into Wordpad, close FP
without saving the file. But save and close the "overall_header.tpl"
file in Wordpad.
Step 5 - Copy and replace the
revised "overall_header.tpl" file to your host server in the
templates/subsilver/ folder. Hit refresh and you should
now see that the entire message board is limited to 725px wide,
and there will be no logo (or X - missing picture symbol), or
Site Name, or Site Description.
Step 6 - Next we will embed
the message board into a FP webpage. Build or copy the
page. For me, this example uses a Dynamic Web Template
with a header and menu at the top. Keeping the menu at the
top gives me more horizontal space than if the menu was on the
left or right side. The following page is limited to 760px
wide. My file is saved as "board.htm".
Insert an Inline Frame
I set the initial page to the
directory and file for the message board. For me, I use
the default phpbb2 directory. Set the Inline Frame size
width to 730px and height to whatever will work with your
message board. I set mine to 560 px so that I could turn
off scrollbars and still see the entire board. I also set
the margins to 1px, said no border, and set the scrollbars to
"never".
So my webpage is limited to 760px,
the Inline Frame limited to 730px and the message board limited
to 725px.
Step 7 - Now upload the "board.htm"
page to your host server. As the "board.htm" file loads,
the Inline Frame is loading "phpbb2/index.php". But to
your viewers, it appears as if it is part of the "board.htm"
page.
One problem with embedding the
message board in the Inline Frame (at least with phpbb2) is that
when you log-on and the page automatically refreshes, it will
"break out" from the inline frame. After which it appears
like the screenshot in Step #5. This defeats the purpose
for having it embedded. There is a simple fix for this
problem. I found it at the phpbb2 Community Forum help
section. To solve this problem, simply edit the code in
the "login_body.tpl" file as described below using Wordpad.
After saving the file, upload and replace the file on the host
server. This will keep the message board from "breaking
out" of the Inline Frame.
Step 8 - There are many
different styles available at phpbb2.com, which are free
downloads. For the website in this example, I decided to
use the Silver Xire scheme. The first screenshot below
shows the Silver Xire logo. Using the same techniques
described above, I edited out the logo and limited the width to
725px. I also changed the hyperlink and hover colors to
match my website scheme. The original colors are more of a
gray and dark gray colors. I decided to add a 1px black
boarder, which I did using "styles/borders" in the Inline Frame
properties. The second screenshot shows the final product.
Now the message board is integrated
and "looks" like part of the webpage.
Good luck setting up your message
board. Author, Ed Jean 01/21/05.
www.mycommitment.com
www.phpbb.com
www.frontpagewebmaster.com
|
