Creating Templates for Joo!BB

First of all, I'm sorry for the incomplete documentation. But I think it's a better way to start up with this sometime. I will make updates on it as soon as I can.

The best way to create an own template is to copy the existing one. Joo!BB may be copyrighted, but you have all rights to use the whole “design” folder as a pattern. Excluded third party Tools used in the Joo!BB template! For excample jQuery.

Let's start…

Please make a copy of the entire “joobb” template folder “JOOMLA_ROOT/components/com_joobb/designs/templates/joobb/”. Rename it to whatever you want to. In this documentation we will use the Name “mybb”.

NOTE

The folder name must a string without blanks! Not allowed: my bb. Allowed: my_bb.

In the next step we need to rename the prefix “joobb” of all files to “mybb”. This includes the “controller” folder too. For example “joobb_board.php” to “mybb_board.php”.

Based on Joomla System there are view classes which are divided in two parts. The program logic and the layout. All you should know about the view class is, that this is the responsible part getting all data you need to show. In this document we will focus to the layout because this is the important part for designers.

Adding advertisements on Joo!BB pages is as simple as creating Joomla templates. Following you can find examples how to do this. Please be in mind, that this are propositions. Of course you can change the place of the ad if you wish. Just play with it.

NOTE

Please use the ad code generated by your ad provider, e.g. Google.

To place an ad on the main site (board index), please edit JOOMLA_ROOT\components\com_joobb\designs\templates\joobb_board.php. In this example the ad will be shown only between the first and second category.

...
<div class="jbMargin5 jbMarginBottom10">
	<div class="jbLeft jbFont13 jbPaddingTop5"><?php echo $this->currentTime . JText::_(' - '). JText::_('BB_ALLTIMESARE') .' '. $this->currentTimeZoneName; ?></div>
	<div class="jbRight"><?php echo $this->loadTemplate('searchbox'); ?></div>
	<br clear="all" />
</div><?php
for ($i = 0; $i < $this->categoriesCount; $i ++) :
	if ($i == 1) : ?>
	<div align="center">
	<script type="text/javascript"><!--
	google_ad_client = "my_ad_client";
	/* 728x90, Erstellt 22.11.08 */
	google_ad_slot = "my_ad_slot";
	google_ad_width = 728;
	google_ad_height = 90;
	//-->
	</script>
	<script type="text/javascript"
	src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
	</script>
	</div><div class="jbMarginBottom10"></div><?php
	endif;
	$this->category =& $this->getCategory($i); ?>
...

Edit JOOMLA_ROOT\components\com_joobb\designs\templates\joobb_topics.php to place an ad on topic page.

...
// no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<div align="center">
<script type="text/javascript"><!--
google_ad_client = "my_ad_client";
google_ad_slot = "my_ad_slot";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div><div class="jbMarginBottom10"></div>
...

Edit JOOMLA_ROOT\components\com_joobb\designs\templates\joobb_posts.php to place an ad on posts page.

...
if ($z < $this->total) :
	$this->post =& $this->posts->getPost($z);
	$even = (($z % 2) == 0) ? '1' : '0';
	echo '<div even="'. $even .'">';
	echo $this->loadTemplate('post');
	echo '</div>';
	if ($z == 0) : ?>
		<div class="jbMarginTop10" align="center">
		<script type="text/javascript"><!--
		google_ad_client = "";
		google_ad_slot = "my_ad_slot";
		google_ad_width = 728;
		google_ad_height = 90;
		//-->
		</script>
		<script type="text/javascript"
		src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>
		</div>
		<br clear="all" /><?php
	endif;
endif;
...