Devlounge

Design, Develop, and Grow

The Ultimate bbpress Guide

By

Customizing BBPress

During the install of bbpress, you may have noticed a directory called bb-templates. This is the folder that contains all the default php templates, stylesheet, and images (inside images folder). It is also the place to start to begin customizing.

The best way to start off is to create a new directory inside the root folder of the bbpress install called “my-templates“. Any php templates place in this folder with the same name as in “bb-templates” will override the original files. For example, if you modify front-page.php and upload it to “my-templates”, bbpress will pull the customized front-page.php file.

It’s important to note that bbpress is expected to have a theme system similiar to WordPress in future releases. This will no doubt ease the development of themes and customizations, we just don’t know when this will be occuring.

Much like WordPress, BBpress is broken down into 2 core files used in most of the templates: header.php and footer.php. The header consits mostly of meta information (forum title, dynamic stylesheet and script location, etc), and then an opening wrapper, banner strip (where the login form is located in the default theme), and opening main div. The footer contains the closing main and wrapper divs, as well as contains a footer div with “powered by bbpress” information.

With that being said, if you read any of our customizing wordpress articles awhile back, you know the importance of the header and footer. Because these are used on every page, you can do alot of customizing by only editing them along with the stylesheet, as long as you plan to keep the main layout structure in tact.

For our custom skin we have in the works, we started by editing the header and adding in a new top bar with navigation links. Doing this allowed us to remove the banner and login form from the homepage, because we felt they we’re not needed and could fit in better in the sidebar above the tags. Our header.php now looks like this:

[php]

<?php bb_title() ?>
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } }

var lastMod = topic_time . ' +0000'); ?>; var page = ; var currentUserId = ID; ?>; var topicId = ; var uriBase = ''; var tagLinkBase = ''; var favoritesLink = ''; var isFav = ID ) ) echo "'no'"; else echo $is_fav; ?>;


Home‘), bb_get_option(‘uri’).’index.php’) ?> Register‘), bb_get_option(‘uri’).’register.php’) ?> Login‘), bb_get_option(‘uri’).’bb-login.php’) ?> Search‘), bb_get_option(‘uri’).’search.php’) ?> Browse Tags‘), bb_get_option(‘uri’).’tags.php’) ?>
[/php]

Notice how we created the links for the top bar. I noticed that using [php]Home‘), bb_get_option(‘uri’).’index.php’) ?>[/php] would create the intended link with the url of the board being pulled from the config. All I had to do was edit the final file location (ie: search.php, tags.php, etc).

I was happy with how the footer was for now, so I jumped into the default stylesheet to make some customizations.

Stylesheet Tweaks

It’s amazing how small the bbpress stylesheet is. Forums tend to be filled with hundreds of different classes to cover all the different aspects of the layout, but bbpress was quite the opposite. It was fairly easy to tell what controlled what. Within a few minutes I had edited the two floats used on the front-page.php file (div containing the tags and the div containing the latest threads) so they would be flexible depending on the screen resolution. This is what the edits to the frontpage-hottags and frontpage-discussions div id’s looked like after customization:

[css]#front-page #hottags {
float: left;
width: 23%;
margin-right: 5%;
}
#front-page #discussions {
width: 65%;
float: right;
}[/css]

I also added in the top bar stylesheet classes to get the bar to stretch the entire width of the browser window. (Note: This is why the “topbar” div is not contained inside the “wrapper” div in the header!)

[css]#topbar {
background-image: url(images/top_bg.gif);
height: 30px;
width: 100%;
padding-left: 10px;
padding-right: 10px;
font-size: 12px;
margin: 0 auto;
margin-bottom: 15px;
}

#topbar .text {
padding-top: 7px;
padding-bottom: 7px;
}

#topbar a {
color: #fff;
margin-right: 15px;
}

#topbar a:hover {
background-color: #F0F0E1;
color: #222;
}
[/css]

To edit the “highlight” row color (the light green) when rolling over posts, find the line containing the following and input a new hex code.

[css]#latest tr:hover, #forumlist tr:hover, #favorites tr:hover {
background: #e4f3e1;
}
[/css]

Of course, you could continue to tweak out css colors, font sizes, and other settings, but we have our own little bbpress theme on the horizon for public release, so we’re not going to give away all the changes we may have made.

Customizing the Forum Home

Another thing I really found interesting with bbpress was the choice to give the forum index it’s own template file. Seeing how so many forum scripts are used as portal systems, having a front-page.php to be used as an index was a very nice idea. This sets up for the forum index to be customized to do any number of things, including function as a regular page. For example, how about using rss to pull recent posts from your wordpress blog and inserting them right above “Latest Discussions”.

Just because that idea sounds so tantalizing, let’s give it a shot. Open up your front-page.php and let’s take a look. (Mine may be a little different because I am using one that is in the middle of being modified for our public theme).

[php]

Coming Soon


>


>


—


>


ID ) : ?>

    $title ) : ?>

  • Rss2html (what we use to pull posts from other blogs onto Devlounge to get our recent wordpress posts on the forum homepage.)

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge