Random Blog on Technology, Computers, Products, Reviews

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.

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%;
background-repeat:no-repeat;
background-image:url(../../img/byuser.gif);
padding:0 20px;
font-size:8pt;
height:16px;
}
div.icon {
background-image:url(../../img/folder.gif);
}
tr.inew div.icon {
background-image:url(../../img/new.gif);
}
tr.iclosed div.icon {
background-image:url(../../img/locked.gif);
}
tr.isticky div.icon {
background-image:url(../../img/sticky.gif);
}
#brdstats div.box {
background:url(../../img/stats.gif) no-repeat 15px 50%;
padding:0 0 0 30px;
}
div.icon {
float:left;
display:block;
width:28px;
height:25px;
background-repeat:no-repeat;
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.