phpBB :: Knowledge base - Viewing article Editing headers and footers.

Support Home | Knowledge Base Home | Submit Article | Search Articles | Browse Articles

Editing headers and footers.

Description: How to edit your fora's header and footer. Includes information on how to specify your own, custom logo.

Author: Black Fluffy Lion

Date: Tue Oct 29, 2002 4:31 pm

Type: FAQ

Keywords: header, edit, footer, meta, change, logo, php, insert, rotation, code, banner, table, size, width, who's online, box, who is, login, move, debug, top, parse, buttons, information, page loading time

Category: Styles

Handy Dandy Guides Present...

FAQ on editing headers and footers!

Contents

Introduction
- I looked in the admin panel but there's no option to change headers/footers/meta values. How can I put these in?
- Whoah! I'm lost already! How do these template thingies work then?
- So where do I find these great 'templates'?
- I don't have a script editor. How do I open them?
- What the...? I don't get any of that complicated PHP stuff! Care to explain?
Editing headers and footers
- I want to edit my header. Where do I start?
  - Can I change my meta values?
  - How do I replace the phpBB2 logo with my own?
  - How do I put text or images into my header?
  - How can I add a link to the 'FAQ', 'Search', 'Memberlist' ... 'Logout' links?
  - How do I change the width of phpBB2's table?
- OK, I'm done with my header, now what about the footer?
Index page editing
- I've seen at some fora they have a header that only appears on the index page. How do I do that?
- Ahah! So that's how people move around the login and who's online boxes, is it?
  - So how do I move the who's online box?
  - And what about moving the login box too?
Other (slightly) related things
- Can I have php executables in the template files?
- Can I get back that page loading and debugging info thing into my page like there was in the RCs?
- I'm done on all my headers and footers and am now a guru at template editing. How can I edit even more?
- I've edited all the files. Now I need them to actually display on my fora. How do I do that?
End note

Introduction

Do you dream of editing your fora's footer?? Do you constantly ponder over the existance of overall_header.tpl?? Do you lose sleep over wondering how to reposition the login box?? Then read on, into the exciting world of header editing!

I looked in the admin panel but there's no option to change headers/footers/meta values. How can I put these in?

First thing first. Many of you intelligent folk coming from phpBB may have noticed that there is no header/footer/meta section under the admin panel. That is becuase headers are done in a different way in phpBB2. That information is now stored in templates making it much more flexible and customizable and much more easy to edit.

Whoah! I'm lost already! How do these template thingies work then?

When you view a page of your fora the templates get loaded: First, overall_header.tpl is loaded. This displays all the information it's meant to and leaves <html>, <body> and the main phpBB table open. Then the correct main page template is loaded depending on where you are in the fora (e.g. if you're on the index page then index_body.tpl). Once it's done loading that it calls up overall_footer.tpl. This closes the table and <body> and <html>. To end the document page_tail.php gets loaded. This displays the debugging and page loading time information (if enabled).

So where do I find these great 'templates'?

Look in /templates/subSilver (thoroughout the FAQ I will be using subSilver, the default template. If you are using a different template then change the folder you look in accordingly). You will see a collection of files there. The templates are the ones with the file extension '.tpl' The majority of files in that folder are .tpl files.

I don't have a script editor. How do I open them?

You don't need some fancy code editor to edit them, any old text editor will do. On my computer, the tpl files open up in Word. That's fine and it works perfectly. Note that if you use something like Word you will need to open and save the tpls as plain text, not as a web page. You need to use Word as a text editor rather than a WYSIWYG (What You See Is What You Get) editor. On a related note, do not use WYSIWYG editors to edit templates. This means don't use anything where the tpl file appears as it will look like in a browser rather than in plain HTML text (e.g. Frontpage). Using a WYSIWYG editor will tack on useless bits of code to the page and may remove vital parts. Generally, it messes things up in tpl files, you want to edit it as plain text. Although I use Word (becuase I can't be bothered to change it) I recommend you use Notepad to edit the tpls. Open up a template and have a look inside.

What the...? I don't get any of that complicated PHP stuff! Care to explain?

These templates are written in simple HTML, you need absolutely no PHP knowledge whatsoever to edit them, though as they are written in HTML it might be useful to go learn the basics of that if you don't already know it.

Editing headers and footers

I want to edit my header. Where do I start?

Well, that depends on what you want done. So I'll split this bit up into multiple sections...

Can I change my meta values?

Yes! Open overall_header.tpl (remember I told you how to do this). At the top of the file you will see this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">

Just bung your meta values in there! You can put them anywhere in the head of the document, but I like to put mine in at the top. Here's what the metas at the top of my overall_header.tpl look like:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>

<meta name="description" content="Gamecatcher is a site dedicated to strategy-gaming in general, trying to get all the information you may want about the strategy gaming world. It also has excellent strategy gaming forums where you can discuss computer games with other fans." />
<meta name="keywords" content="gamecatcher, center, game center, game catcher, civilization, civ, real-time strategy, game, forum, fora, forums, sid meier, spycatcher, gaming, discussion, age of empire, starcraft, empire earth, europa universalis, warcraft, turn-based strategy game, strategy, sim, simcity, the sims, will wright, colonization, SMAC, alpha centauri" />

How do I replace the phpBB2 logo with my own?

Aaah, that old demon which seems to be continually popping up around the support forum. "But am I actually allowed to change the logo to my own?" I hear you say. Yes you are. There is nothing wrong with changing the default subSilver logo. And there are 2 ways to do so.

The first way is by changing the path of the logo. Upload your logo to templates/subSilver/images and call it logo.gif or something like that. Then, look (near the end of the document) for:

Quote:

Simply change the bit highlighted in red to the path of your own logo. Easy or what??

The second way to change the logo is even easier. Just overwrite logo_phpbb.gif with your own logo and upload it to templates/subSilver/images and call it logo_phpbb.gif. Couldn't be easier!

How do I put text or images into my header?

Right, now we're getting on to the meaty bits of header editing. Do a search in overall_header.tpl for

Code:

This is where the table for phpBB2 is opened. I like my header to appear above the edge of the table so my overall_header.tpl has been edited to look like this (edited bit highlighted in red):

Code:

<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

<a name="top"></a>

<div align="center"><p>Members of <a href="http://www.civgaming.net" target="_blank"><b><font size=+1>Civilization Gaming Network</a></p> </font></b></div>
<p align="center"> <img
src="http://www.civgaming.net/gamecatcher/phpBB2/images/smiles/mwaha.gif"
width="15" height="16"><a href="http://freechat.raidersoft.com/sigmachat.pl?room=10549" target="_blank"><b>CHAT OR DIE. RESISTANCE IS FUTILE. YOU WILL CHAT. MWHAHAHAHAHAHAHA</a><img
src="http://www.civgaming.net/gamecatcher/phpBB2/images/smiles/mwaha.gif"
width="15" height="16"></p></b></p>
<div align="center"><p><a href=http://www.civgaming.net/gamecatcher/ target="_blank"><b><font size=+1>Gamecatcher Center</a></p> </font></b></div>

<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline"><table width="100%" cellspacing="0" cellpadding="0" border="0">

...and it comes out like so.

If you wanted your header to come out within the table, as some people do, then just put it below the

Code:

How can I add a link to the 'FAQ', 'Search', 'Memberlist' ... 'Logout' links?

Open overall_header.tpl and search for

Code:

td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"> <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">   <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>   <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>   <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> 
               
                <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> 
               
               </td>
            </tr>
            <tr>
               <td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu"> <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>   <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>   <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> </span></td>

That's where the links are in the header. Just insert your own! For example, a link to go back to the homepage (edited code highlighted in red):

Quote:

td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"> <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">   <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>   <a href="http://www.myhomepage.com" class="mainmenu">Homepage</a>   <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>   <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> 

 <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> 

</td>
</tr>
<tr>
<td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu"> <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>   <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>   <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> </span></td>

How do I change the width of phpBB2's table?

Open overall_header.tpl and search for:

Quote:

Then change the part highlighted. You can do this as a percentage e.g:

Quote:

...or if you prefer you can state the table width in pixels:

Quote:

OK, I'm done with my header, now what about the footer?

Editing the footer involves using the same basic principles, so I won't describe how to do it so fully here. Just open overall_footer.tpl this time. Looks a bit empty in comparison to overall_header.tpl doesn't it?? All that's on there is the copyright notice, linking back to phpBB.com (WHICH YOU MUST RETAIN) and the link to the admin panel. Just edit that file like you did overall_header.tpl

Index page editing

I've seen at some fora they have a header that only appears on the index page. How do I do that?

This too follows the same basic principles of editing the footer and header. The template for the index is a file called index_body.tpl, which is located in templates/subSilver, with the rest of them. Editing it is just like editing the header and footer, no new explantion needed.

Ahah! So that's how people move around the login and who's online boxes, is it?

It is indeed. Both the login and who's online boxes are displayed through code in index_body.tpl.

So how do I move the who's online box?

To move around the who's online box open up index_body.tpl and do a search for

Code:

<table width="100%" cellpadding="3" cellspacing="1" border="0" class="forumline">
<tr>
<td class="catHead" colspan="2" height="28"><span class="cattitle"><a href="{U_VIEWONLINE}" class="cattitle">{L_WHO_IS_ONLINE}</a></span></td>
</tr>
<tr>
<td class="row1" align="center" valign="middle" rowspan="2"><img src="templates/subSilver/images/whosonline.gif" alt="{L_WHO_IS_ONLINE}" /></td>
<td class="row1" align="left" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />{TOTAL_USERS}<br />{NEWEST_USER}</span>
</td>
</tr>
<tr>
<td class="row1" align="left"><span class="gensmall">{TOTAL_USERS_ONLINE}   [ {L_WHOSONLINE_ADMIN} ]   [ {L_WHOSONLINE_MOD} ]<br />{RECORD_USERS}<br />{LOGGED_IN_USER_LIST}</span></td>
</tr>
</table>

<table width="100%" cellpadding="1" cellspacing="1" border="0">
<td align="left" valign="top"><span class="gensmall">{L_ONLINE_EXPLAIN}</span></td>
</table>

That's what displays the who's online box. If you want to move it to the top of the page then just paste it after

Code:

<table width="100%" cellspacing="0" cellpadding="2" border="0" align="center">
<tr>
<td align="left" valign="bottom"><span class="gensmall">

{LAST_VISIT_DATE}<br />

{CURRENT_TIME}<br /></span><span class="nav"><a href="{U_INDEX}" class="nav">{L_INDEX}</a></span></td>
<td align="right" valign="bottom" class="gensmall">

<a href="{U_SEARCH_NEW}" class="gensmall">{L_SEARCH_NEW}</a><br /><a href="{U_SEARCH_SELF}" class="gensmall">{L_SEARCH_SELF}</a><br />

<a href="{U_SEARCH_UNANSWERED}" class="gensmall">{L_SEARCH_UNANSWERED}</a></td>
</tr>
</table>

And what about moving the login box too?

You want to move that to the top of the page too?? OK, keep index_body.tpl open and search for

Code:

<form method="post" action="{S_LOGIN_ACTION}">
<table width="100%" cellpadding="3" cellspacing="1" border="0" class="forumline">
<tr>
<td class="catHead" height="28"><a name="login"></a><span class="cattitle">{L_LOGIN_LOGOUT}</span></td>
</tr>
<tr>
<td class="row1" align="center" valign="middle" height="28"><span class="gensmall">{L_USERNAME}:
<input class="post" type="text" name="username" size="10" />
   {L_PASSWORD}:
<input class="post" type="password" name="password" size="10" />
     {L_AUTO_LOGIN}
<input class="text" type="checkbox" name="autologin" />
   
<input type="submit" class="mainoption" name="login" value="{L_LOGIN}" />
</span> </td>
</tr>
</table>
</form>

...then paste it after your newly moved who's online box! Or if you haven't moved that then below the code I told you to put the who's online box below.

Other (slightly) related things

Can I have php executables in the template files?

phpBB does not parse any php inserted into templates automatically so, in short: 'no'. It's easier if you just try to get another way to do what you wanted (e.g. JavaScript instead of php for an ad rotations system). However, if php is the only way then there are a few of workarounds:

I saw a mod to do this. Should I use that?

Yes. You can download it from here. Unfortunately it does not work if you do have the phpBB code mod installed too.

But I have the php BB code mod installed too. Can I still have php in my templates?

Yes you can. Open page_header.php and at the top add:

Code:

ob_start();
include("<your_header_path>");
$my_header = ob_get_contents();
ob_end_clean();

ob_start();
include("<your_footer_path>");
$my_footer = ob_get_contents();
ob_end_clean();

In the same file at the end of template->assignvars list (around line 420 or so) add:

Code:

"MY_HEADER" => $my_header,
"MY_FOOTER" => $my_footer

In overall_header.tpl and overall_footer.tpl add this code where you want your header or footer to appear:

Code:

{MY_HEADER}
{MY_FOOTER}

ta-da! Works perfectly, doesn't it?? No?! Well, you're not beyond help yet...

ARGH! That didn't work either. Is here any other way?

There is. Here we go: open /includes/page_header.php and find

Code:

In between the last header but before the template parse insert

Code:

// Start Banner Code
ob_start();
require("foo");
$banner = ob_get_contents();
ob_end_clean();
$template->assign_vars(array('BANNER' => $banner));
// End banner code

...so it looks like this (edited bit highlighted):

Quote:

header ('Cache-Control: private, pre-check=0, post-check=0, max-age=0');
header ('Expires: ' . gmdate('D, d M Y H:i:s', time()) . ' GMT');
header ('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');

// Start Banner Code
ob_start();
require("foo");
$banner = ob_get_contents();
ob_end_clean();
$template->assign_vars(array('BANNER' => $banner));
// End banner code

$template->pparse('overall_header');

Now open up the tpl file you want the code appearing in and insert

Code:

{BANNER}

...where you want the code to appear.

Can I get back that page loading and debugging info thing into my page like there was in the RCs?

Of course you can! Although it was intended to only be used during development and not included with the final release you can easily put it back again. Here's how:

Open extension.inc (in phpBB2's base directory) and find

Code:

$starttime = 0;

Replace this with

Code:

//
// For debug timing
//
$mtime = microtime();
$mtime = explode(' ',$mtime);
$mtime = $mtime[1] + $mtime[0];
$starttime = $mtime;

Then open up includes/page_tail.php (remember, this is the file that gets called up last when loading a phpBB2 page) and find

Code:

//
// Close our DB connection.
//
$db->sql_close();

//
// Compress buffered output if required and send to browser
//

...and replace it with

Code:

//
// Close our DB connection.
//
$db->sql_close();

//
// Output page creation time
//
$mtime = microtime();
$mtime = explode(' ',$mtime);
$mtime = $mtime[1] + $mtime[0];
$endtime = $mtime;
$totaltime = ($endtime - $starttime);

$gzip_text = ($board_config['gzip_compress']) ? "GZIP compression enabled" : "GZIP compression disabled";
$debug_mode = (DEBUG) ? " : Debug Mode" : "";

printf("<br /><center><font size=\"-2\">phpBB Created this page in %f seconds : " . $db->num_queries . " queries executed : $gzip_text".$debug_mode."</font></center>", $totaltime);

//
// Compress buffered output if required and send to browser
//

Done!

I'm done on all my headers and footers and am now a guru at template editing. How can I edit even more?

Editing of headers and footers not enough for you then, eh?? You want to be able to change more aspects of your fora?? Well I won't go into that fully here since I'm starting to ramble off topic and the mods'll shoot me but the best advice I can give for editing of more templates is 'Use yer brain!' If you want to change the way the page looks inside a forum then what file do you edit?? Well if you look through the templates folder it's pretty obvious. To edit how a forum is viewed edit viewforum_body.tpl. All the names of the files are self explanitory so don't be an idiot and prat around with faq_body.tpl trying to look for the layout of the member list. The possibilities are endless towards how customized your fora can be. The only limit is your imagination.

I've edited all the files. Now I need them to actually display on my fora. How do I do that?

Before changing anything I advise you to make a backup of the files you are changing. I do this by keeping my original phpBB2 files in one folder and keeping my edited phpBB2 files in another. So, before uploading, make a copy of the original tpl files. Then, just upload the changed files into templates/subSilver and it'll work perfectly!

End note

Well, that's all, hope you found the tutorial useful. Might I suggest that if you have a question regarding header editing or about this FAQ you post about it here rather than PMing me about it. That way, there is more chance you will be helped, and faster, though I will try to answer any PMs I get on the subject. This tutorial would not have been possible without a few people's help, which I thank them greatly for: DEHiCKA, james_hayward100, Matthijs and Ryan McLaughlin for their work on inserting php into templates; Bear, for sticking this thread; Brewjah, for his excellent tutorial on moving the who's online and login boxes; psoTFX for suppyling the code to enable page loading times and debugging info; the rest of the phpBB2 team for making such a great bit of software; and lastly, to you, for reading it.

May you edit headers - in index pages or in forum categories; in memberlists or in FAQs; in who's online or in login boxes - for ever more.