Customizing PHPBB Header and Footer

I started work on a new website this week, and I wanted it to have a forum. Right now phpbb is a pretty popular open-source hosting forum software, and my host (the wonderful FatCow) offered an easy installation service for it, so I clicked the buttons and set it up. I have full access to the files and database it created, and I intended to figure out how to stick the whole thing in a box (or a “div,” if you prefer) so I could customize the look of the overall body, header, and footer around my site. I’ve done the same thing with three or four WordPress installations, and didn’t think it’d be too hard.

Well, I was wrong.

But after a few days of stumbling around the Internet, I figured everything out and thought I’d write up a tutorial for all to learn.

My first problem was simply figuring out how to apply changes to the files. The key pieces to this whole puzzle are two files called overall_header.html and overall_footer.html. They are stored in your styles folder – probably something like /styles/prosilver/template - if you’ve got the same default prosilver style that my 3.0.8 installation did.

So I tried inserting some sample text to test things out and I couldn’t get it to show up. OK, I thought, maybe there’s something funky with the way the divs are aligned. I saw the code for the copyright dates and added a bogus date in there – I knew where that would show up. Save. Refresh. And… Nothing. My updates weren’t being applied! The internet said these were the pages I needed to edit! What was going on? I looked around the internet some more.

It turns out that these pages I’m editing aren’t exactly regular ol’ html files. They used to be called .tpl files – and while I haven’t followed the winding trail of code it looks like these files are getting processed instead of strictly read every time and this all has something to do with the cache folder. So you can either clear the cache folder manually or take the easy but monotonous steps as follows:

1. Log in as admin on your new phpbb forum!
2. Click on “Administration Control Panel” at the bottom.
3. Log in again!
4. Click “Proceed to the ACP” to finally get to the control panel!
phpbb-acp-style-cache-refresh5. Click the Styles tab at the top.
6. Click the “Templates” link on the left.
7. Click “Refresh” on the right for the template you’ve made changes to.
8. Confirm your intentions with a “Yes.”
phpbb-acp-cache-refresh-confirm
9. Click “Back to previous page.”

Fortunately, you only have to repeat steps 7-9 every time you save a change to overall_header.html or overall_footer.html. Unfortunately, you have to… repeat steps 7-9 every time you save a change to overall_header.html or overall_footer.html.

But, voila, suddenly my copyright dates were incorrect and I was rolling. But you still have to be very careful. These phpbb parsers seem pretty picky, and I screwed up my theme a few times, generating error messages that wouldn’t even let me back into the ACP to un-change things.

You don’t have to make things too fancy, though. All you really want to do is insert some php code to include two files that you are also including on your other pages, so they will all have the same header and footer. Now, on my regular pages, I just have a good ol’ top.php and bottom.php, like this:

<?php
include($_SERVER['DOCUMENT_ROOT'].’/top.php’); ?>

<h1>Headline</h1>

<p>Text blah blah lorem ipsum whatever</p>

<?php include($_SERVER['DOCUMENT_ROOT'].’/bottom.php’); ?>

The top.php prints the <html><head> …. </head><body> stuff with the top body divs, and the bottom.php prints some finalizing body divs and closes out with the </body></html>. I can copy and paste the above code across my pages and only worry about the main content on each one. But the phpbb forum pages are a little too complex to quickly mess with the head tag stuff. So I split a few more hairs.

I pulled out all the html code that comes after the <body> in my top file, and created a file called body_top.php, looking something like this:

<div id=”mainroom” style=”width:950px; margin:5px auto; background-color:#FFFFFF;”>

<div style=”width:222px; float: left; font-size: 128px; background-color: #FFFFFF; font-family: Arial;”>My home page logo</div>
<div style=”width:728px; float: left; padding:15px 0px; background-color: #FFFFFF;”>My unobtusive banner ad</div>

<div id=”mainnav” style=”float:left; width: 950px; margin:5px auto 20px; font-size: 32px;”>Some basic navigation</div>

<div style=”clear: both;”></div>

Then I made a body_bottom.php file that pulled out all the code before </body> in my bottom file, something like this:

<div style=”height:20px; clear:both;”></div>

</div>

Then I added includes to those files in top.php and bottom.php, respectively, to replace the code that I cut out. If you follow me, my top and bottom files are still outputting the same thing they were before, but I’ve carved out part of it into a separate function that only contains the part I need for my phpbb pages.

If you scroll down a bit from the pre-mentioned link, you will get to the syntax for including PHP in the template file. Edit overall_header.html and insert the text (bolded below) right after the <body> tag:

</head>
<body class=”{S_CONTENT_DIRECTION}”>

<!– PHP –>
include($_SERVER['DOCUMENT_ROOT'].’/body_top.php’);
<!– ENDPHP –>

<a name=”top”></a>

<div id=”wrapheader” style=”margin:0 auto;”>

 

Do a similar thing in overall_footer.html right before the body tag closes:

</div>

<!– PHP –>
include($_SERVER['DOCUMENT_ROOT'].’/body_bottom.php’);
<!– ENDPHP –>

</body>

 

Now repeat steps 7-9 above, and voila, a customized phpbb forum all contained inside your little div box! And the beauty of the whole thing is, once you’ve done that, you can change body_top and body_bottom all you want and the changes will be immediately applied to the forum pages, no more steps 7-9 required.

As a final bonus, I add the CSS link from my top.php head tag after the last CSS link in the overall_header, so I can override any styles I want without refreshing the cache, either:

<!– ENDIF –>

<link rel=”stylesheet” href=”{T_STYLESHEET_LINK}” type=”text/css” />

<link rel=”stylesheet” type=”text/css” href=”/css/main_style.css” />

<script type=”text/javascript”>

And now I’m ready to go!

I glossed over some fairly high-level concepts in this walk-through, assuming you have a medium to advanced understanding of PHP and simply need to know how to apply that understanding to customizing your PHPBB forum. If you need me to explain a little more about the interactions of my top, bottom, body_top, body_bottom, overall_header, and overall_footer files, let me know in the comments and I’d be happy to make things clearer. Hope this helps!

This entry was posted in Tutorials. Bookmark the permalink.

2 Responses to Customizing PHPBB Header and Footer

  1. Josh says:

    This tutorial is amazing, I’ve been searching for hours and had kinda figured out some of the same stuff but you literally solved all the issues I was running into. I wish I found this earlier, nonetheless I’m grateful for the help and have finally got everything working. Thanks Heaps. -Josh

  2. JimGuerra says:

    I was just curious as to how I go about changing my password on here? Couldn’t find it when I did a quick scan, thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>