PunBB Style Tips

Lets face it PunBB’s default themes are very minimalistic, however the fact everything is done in CSS, makes it easy to restyle the whole forum (unlike having to edit 20+ templates for phpBB). But you can tweak the look and get away from the text heavy and boring look.

Personally I hate how the forums go 100%, so why not make them 800×600 friendly but still scale up for people with 1024×768. Here is some CSS that will do that for you. Keep in mind you mind need to put this in the final CSS file that gets loaded like Oxygen.css.

body {text-align:center}
#punwrap {width:auto !important; width:750px;/*ie6*/ margin:12px auto; text-align:left; max-width:960px;}

Want that RSS feed to show up in the address bar in Firefox/Opera/Safari/IE7? Use this code in the HEAD area of header.php and be sure to put in your domain name and path to your extern.php

<link rel="alternate" type="application/rss+xml" title="<?php echo pun_htmlspecialchars($pun_config['o_board_title']); ?>" href="http://EXAMPLE.COM/extern.php?action=active&type=RSS" />

You can pretty much make a nice little front page with different options from extern.php, it offers newest topics, recent posts, forums statistics, users online, top 10 posters and rss feeds. You can add these onto another part of your site or modify the main.tpl to add more custom stuff to your forums.

Want a Advertisement after the first post? After this bit of code:

<div class="clearer"></div>
<div class="postfootleft"><?php if ($cur_post['poster_id'] > 1) echo '<p>'.$is_online.'</p>'; ?></div>
<div class="postfootright"><?php echo (count($post_actions)) ? '<ul>'.implode($lang_topic['Link separator'].'', $post_actions).'</div>'."\n" : '<div>&nbsp;</div>'."\n" ?>


if ($post_count == 1)

Be sure not to mess up that closing curly brace that should come after it, that closes the while loop above.

Now for some much needed icons, you can get graphics from anywhere, I like to use the ones by Mark James (lots of sites use these but they usually don’t give him a link back to his site like they are supposed to). Here is another site with tons of icon graphics. But here is the CSS, you’ll need for PunBB (Note: I put my images in the img folder):

.pun span.byuser {
background-position:0% 50%;
padding:0 20px;
div.icon {
tr.inew div.icon {
tr.iclosed div.icon {
tr.isticky div.icon {
#brdstats div.box {
background:url(../../img/stats.gif) no-repeat 15px 50%;
padding:0 0 0 30px;
div.icon {
background-position:center center;
border:0 !important;

Some of the CSS tips I got from the phpBB skin for PunBB. Its also worth using SpinkBB to help figure out what colors might look good, then add your icons afterwards. I’ll add some more tips later on.

I fixed a bug that only showed the advertisement after the first post on page 1 only. Now it will work on all pages.

Tags: ,

Comments 1-7 of 7 to “PunBB Style Tips”

  1. 1 · Henrik Soke says:

    Hi! Thanks for writing all these wonderful articles – just by reading them I managed to customize my PunBB forum just the way I like it 🙂 Thanks again.

  2. 2 · Fredrik says:

    Why do you assume that a normal monitor is being used? What if another type of PDA/phone is used?

  3. 3 · blogger says:

    Good Point Fredrik, you could use the media attribute on the css tag to target certain css files for screen, handheld or print.

    <link href="stylesheet.css" rel="stylesheet" type="text/css" media="print" />

  4. 4 · FrankK says:

    What’s the head area in header.php

  5. 5 · blogger says:

    The “HEAD” area would be between the HEAD tags

  6. 6 · FrankK says:

    Like in html?
    Then I must be using a different PunBB because there is no tag im my header.php

  7. 7 · blogger says:

    Well I wrote the post long ago, so you may have to edit it elsewhere in the newer version.