Demystifying UBB.threads framework – Part I
March 4, 2010 
Comments Off on Demystifying UBB.threads framework – Part I
Have you ever gone to a UBB.threads site, notice something unique about it’s layout and wonder ‘how the heck did they do that’ ?
For example, there is a very well put together site that is in the ‘Community spotlight’ forum over at UBB.central called [ Love the Garden ].
They peeked under the hood, figured out what needed to be done and created both a unique look and feel to their forum, while not doing anything super radical in the process. The end result is probably one of the best looking UBB.threads sites I’ve yet seen.
All that is needed to accomplish the same kind of thing for your site is to understand the basic building blocks that go into displaying any page on a forum. At first that might seem daunting, but as you’ll read further on in this article, you’ll find that it’s not so hard after all.
In most cases, the UBB.threads software takes the URL, determines what kind of page needs to be displayed (forum list, post list, topic etc), wraps it in a header and footer, slaps a left or right column or both for good measure and spits it out in HTML.
But, if you’re like me and you have an itch to see what makes a site unique for some reason, you’ll probably be running Firefox with Firebug installed and you’ve worn out your right mouse button by clicking and then doing ‘Inspect Element’! :D
You inevitably see stuff like this and the natural first reaction might be to simply want to close it up and go watch a movie instead or take a shot of Jack Daniels to erase the horror! :shocked:
It’s like TABLE heaven or hell, however you might look at it.
Not to worry though, it’s really not as ‘bad’ as it looks.
All we need to understand is just four templates and how they get glued together to show a nice looking site like Love the Garden is.
Then, let’s get on with it and identify these templates, deconstruct them into a simpler form for demonstration purposes and then show what I did with them on this site in particular.
I’ve done something very similar to what they’ve done and haven’t violated any ‘rules’ because all the changes are done to templates and CSS for presentation purposes.
The stock code is left intact!
You can see the work in progress over [ here ]. Please note that the actual forum styling is in flux, since I’m trying to support not only a style previewer, but a theme previewer, in anticipation of version 8.0 of Threads
The four files in order of use are:
- templates/default/header.tpl
- templates/default/left_column.tpl
- templates/default/right_column.tpl
- templates/default/footer.tpl
If you open each one up individually in your editor, you might head on over to the Jack Daniels bottle again, since there is really no indentation practiced at all. They just ‘work’!
What follows next is a result of my stripping out all the clutter, adding HTML comments
for sections and gluing them together into one contiguous file as shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang.XML_LANG}" lang="{$lang.XML_LANG}" dir="{$lang.READ_DIRECTION}">
<head>
<title>Your board title stuff</title>
<meta name="generator" content="UBB.threads {$version}" />
{$headerinsert}
{$refresh}
<!-- Other meta, links and javascript stuff -->
</head>
<body>
<a id="top"></a>
<!-- Optional admin closed message -->
<div id="content">
{$headerfile}
<table align="center" width="{$config.TABLE_WIDTH}" cellpadding="0" cellspacing="0">
<tr>
<td>
{$tbopen}
<tr>
<td class="breadcrumbs">Breadcrumb bar here</td>
</tr>
<tr>
<td class="navigation">Navigation menu here</td>
</tr>
{$tbclose}
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" style="margin-top: -5px">
<!-- End of header.tpl -->
<!-- Start of left_column.tpl -->
<tr>
<td width="{$left_width}" valign="top" class="left_col">
{$island_data} <!-- All of the left column Islands -->
</td>
<td valign="top" width="{$body_width}" class="body_col">
<!-- End of left_column.tpl -->
<!--
The middle stuff goes here, depending upon which script you are running:
(postlist, showflat, viewmessages etc.
-->
<!-- Start of right_column.tpl -->
</td>
<td width="{$right_width}" valign="top" class="right_col">
{$island_data} <!-- All of the right column Islands -->
<!-- End of right_column.tpl -->
<!-- Start of footer.tpl -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
{$tbopen}
<tr>
<td class="footer" align="left">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="60%">Board rules . Mark all read . Style select</td>
<td align="right" width="40%">Contact Us . Homepage . Top</td>
</tr>
</table>
</td>
</tr>
{$tbclose}
<br />
</td>
</tr>
</table>
{$footerfile}
</div><!-- #content -->
<div id="footer" align="center" class="small">Debug info and powered by UBB.Threads(tm)</div>
</body>
</html>
Compare this with what the raw files that I started with and it looks MUCH more manageable. Lets delve deeper into each of the four files and note any limitations as well as possibilities.
header.tpl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang.XML_LANG}" lang="{$lang.XML_LANG}" dir="{$lang.READ_DIRECTION}">
<head>
<title>Your board title stuff</title>
<meta name="generator" content="UBB.threads {$version}" />
{$headerinsert}
{$refresh}
<!-- Other meta, links and javascript stuff -->
</head>
<body>
<a id="top"></a>
<!-- Optional admin closed message -->
<div id="content">
{$headerfile}
<table align="center" width="{$config.TABLE_WIDTH}" cellpadding="0" cellspacing="0">
<tr>
<td>
{$tbopen}
<tr>
<td class="breadcrumbs">Breadcrumb bar here</td>
</tr>
<tr>
<td class="navigation">Navigation menu here</td>
</tr>
{$tbclose}
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" style="margin-top: -5px">
<!-- End of header.tpl -->
This file sets the stage for all the other files to follow. It loads up your board title for the browser, includes the css and javascript, includes your header insert ($headerinsert} file, grabs your body header ($headerfile) sets the maximum width of your board ($config[‘TABLE_WIDTH’]) and puts out the Breadcrumbs and Navigation rows.
Of course, it does much more than this, but I summarized. It also is pre-loading all the popup menus (javascript) and so forth, but that isn’t important for this post.
I’ve highlighted the lines that are of note in the above code snippet.
One thing that I immediately took advantage of was the code in line 14, where it has a containing div of id=”content”. By simply adding the following CSS to your Extra Properties section of the style editor, you can change your board to a fixed width. Example:
#content {
width:1100px;
padding:0;
margin:0 auto;
}
For the CSS junkies out there, I set the board width to 1100 pixels, no padding and the horizontal margin to auto, which centers it on the screen. Table width can then be 100% and you basically get what you see on my forum right now [ here ]
I prefer fixed width for many reasons, but they are probably best to be discussed in another article.
One other thing to note, you could have also achieved a fixed width by setting the ‘Table Width: (all screens)’ in General Options to 1100 and achieved the same result, however in the following article, I will show you why I am going the CSS route ;)
left_column.tpl
Even though this says ‘left’, it really is responsible for 2 things. The actual left column (if enabled) and the middle column or the main body being displayed. There is a conditional in the tpl file that decides whether to output 1 or 2 columns based upon the existence of an enabled left column. In either case, the middle column will be output.
<!-- Start of left_column.tpl -->
<tr>
<td width="{$left_width}" valign="top" class="left_col">
{$island_data} <!-- All of the left column Islands -->
</td>
<td valign="top" width="{$body_width}" class="body_col">
<!-- End of left_column.tpl -->
<!--
The middle stuff goes here, depending upon which script you are running:
(postlist, showflat, viewmessages etc.
-->
I highlighted lines 3 and 6, since they determine the width of the left and middle columns. It is hardwired in the code to 15% for left or right column and whatever is left over is subtracted from 100%. So the middle column will be either 100% (no left or right), 85% (1 column, left or right) or 70% (all columns enabled). There is no wiggle room without changing code.
Or is there!??!
I’ll discuss later how to make the templates do your bidding, code be dammed! :hihi: We’ll break out of most of the TABLE world for structure and enter into the DIV and CSS world as well
I forgot to mention the comment I put in for ‘The middle stuff goes here,….’ This is where the actual middle column information is placed and is determined by the UBB.threads URL and specifically the value of the ‘ubb’ parameter. If you’ve seen the classic URL structure in the past, it was something like ‘ubbthreads.php?ubb=showflat…’, which told the program to generate a list of posts for a particluar thread. The format of how showflat looks is (surprise) dictated by the file showflat.tpl ;)
right_column.tpl
<!-- Start of right_column.tpl -->
</td>
<td width="{$right_width}" valign="top" class="right_col">
{$island_data} <!-- All of the right column Islands -->
<!-- End of right_column.tpl -->
Much like the left_column.tpl file where the right column is output. Note the width again and the same rule applies.
footer.tpl
<!-- Start of footer.tpl -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
{$tbopen}
<tr>
<td class="footer" align="left">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="60%">Board rules . Mark all read . Style select</td>
<td align="right" width="40%">Contact Us . Homepage . Top</td>
</tr>
</table>
</td>
</tr>
{$tbclose}
<br />
</td>
</tr>
</table>
{$footerfile}
</div><!-- #content -->
<div id="footer" align="center" class="small">Debug info and powered by UBB.Threads(tm)</div>
</body>
</html>
This basically cleans up the ‘mess’ that the first three files created and I really don’t mean a true mess in the sense of the word, but more to the effect of closing all the open TABLE, TR and TD tags nicely and neatly.
It then goes on to put out the actual footer bar and any footer insert you, the admin might have entered in the Admin control panel.
So there you have it and I would say it’s much more simple to understand than at first.
Part II of this will be how I took the TABLE, TR and TD elements and completely removed them. I then went on to move things around and not be confined by having to have the Breadcrumbs above the Navigation bar. Furthermore, the fixed 15% column widths were ignored and many other things.
All of this was done to ONLY the tpl files, so it keeps with not changing stock code to achieve what looks like a highly modified product. My forums are an example as well as the garden site I first mentioned in this article.
Hope you learned a bit about UBB.threads and that it might lead you to experiment a bit on your development system. Stay tuned for Part II coming soon.
The :llamab: approves!
Comments are closed.