Christian Bullock - Custom phpBB Designer

What we’re trying to achieve

“How can I place a banner ad right below my first category?” I hear you ask. This is one of the more requested “how-to’s” on the phpBB Support Forum, and this is what I’ll be writing about today. With some really basic template edits we’ll be placing blocks of code between our categories on the index page.

Preparation

To complete this tutorial, you’ll need a decent source code editor. It’s also important that you read the whole tutorial, and not skip straight to the images.

Step 1) Finding the Forum ID’s

Before we can start placing our code, you need to choose where you want to put it, or in other words you need to chose which two categories you want the code to appear between. You need to find the forum ID of the forum below where you want to display your code. Here’s an example:

So, because we want to add code above “Normal category 2″, that’s the forum ID we need to find – we’ll actually be using the forum ID in the next steps. To find a Forum ID hover over a forum name and look at the end of the target URL (normally displays in the bottom-left of your web browser. The forum ID is the number that appears after viewforum.php?f=.

The example above shows us that “Normal Category 2″‘s forum ID is 3. We need to remember this for the next step.

Step 2) Placing the code

Now that we know where we want to place the code, we need to add it. We’ll be using a really simple ‘IF statement’ in the template file to only show the code where we want it.

Open: /styles/prosilver/template/forumlist_body.html

Find:

Before, Add:

Excellent! So this IF statement is telling phpBB: “Only display this block of code if the forum ID is 3″. You can use any browser-readable code here (such as HTML, or your Google Adsense code for example). If you want to use more code between other categories, read on past the presentation step.

Step 3) Making it look pretty

If you insert code as-is between inside the IF statement, sure it will work but it won’t look too pretty. We can use the following code inside the IF statement that will match your forum’s style:

Then, add the following code to the bottom of /styles/prosilver/theme/common.css:

And the final result!

Optional: Using ‘ELSEIF’ to put more code between other categories

When explaining these steps to people, one of the most often asked questions is “How do I add another block of code between other categories?”. Sure, you can use the same IF-statement as above, paste it again and change the forum ID, but I don’t think this is a particularly pretty or elegant solution. Instead, we can use a chain of ‘ELSEIF’s. The process for finding forum ID’s is the same as above, but instead of using one IF statement we can use something like this:

So what this is telling phpBB is: “If the forum ID is 1, show this piece of code. If it’s not 1, move on…and if it’s 3 display this piece of code. If it’s not 3, move on…and if it’s 55, display this block of code”. There is no limit to the amount of ELSEIFs you can include in the chain. phpBB won’t show the code if it’s in an IF statement for a Forum ID that doesn’t exist. For example, in the code example directly above I make reference to forum ID 55 (which doesn’t exist on my demo board). Therefore, the “code to go above forum ID 55″ was not displayed.

Support / Donations

If you have any problems using the code above, support is freely available on the Support Forum. If you have found the above guide useful and have implemented it on your board please consider making a donation. Finally, if you feel I have missed anything you can let me know here. Schweeeeeet.