How To Add phpBB Forum To Your Website
By skinning I mean, simply adding phpBB forum to your website so it matches the look and feel of your site. Once you find out how it's very simple. Below I will show you how. The following assumes you already have an existing website in place. Here is what it will look like when we are done.
Step 1: Create a folder in your website called "forum"
Step 2: Download phpBB into your new folder called forum. The easiest way to do this is to use your Cpanel. I used Quickinstall located in the Software/Services section. Most likely your host has the same functionality. If not switch to Hostgator. You can manually install it as well - your going to have to Google that one. Below is a quick vid on "how to install phpBB forum using Hostgator Cpanel".
Step 3: Let's skin it! Assuming your using the default prosilver theme, navigate to "forum/styles/prosilver/template/overall_header.html" and open it up. This it the top half section of the entire forum. Everything you add here populates to the entire forum.
Step 4: Open it up and add all your exsiting websites css, scripts, and anything else you have in your head section. Add it after all the phpbb head code and directly above the closing head tag. Do not include your doctype or body tags. Comment it like I did in the pic below so it's logical. NOTE: The easiest way to reskin or override any phpBB css is to simple add your own to the head section like I did. As long as you place it after phpBB css like in the pic you don't have to use !important or anything.
Step 5: In the same overall_header.html file add your html code directly below the body tag and above the existing phpbb code. If your id's happen to be the same as the phpBB id's you will have to change one of the names - either in your code or phpbb's. This will wrap your top half of your site around the phpBB forum.
Step 6: Now we need to do the same thing to the bottom half. Open up overall_footer.html - also in the template folder. Between phpBB's last div and before the end body tag add all your bottom half html and your scripts. Again, comment it like I did in the pic below so it's logical.
Step 7: Save it and upload it overwriting the existing files.
Step 8: Purge forum cache. ACP >> General Tab >> Purge the cache >> Run Now.
Step 9: Refresh Template. ACP >> Styles Tab >> Templates >> Prosilver >> Refresh.
DONE! With any luck it will all look perfect.
