MyBB Community Forums

This mod was written by nhtera888xxx and modified by Joey_Pham from <snip>
This is a handicraft template modification to help you to make the tabs for your categories, let's begin:

Demo online: << snip - domain expired >>

First of all, you have to download the attachment below, then unzip and upload it into jscript folder.

Step 1:
Go to template forumbit_depth1_cat and add the div tag to cover all the template:

<div id="cat_{$forum['fid']}" class="content">
....
</div>

Step 2:
Go to template index and find:

{$forum}

Then add above it:

<script type="text/javascript" src="jscripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$.noConflict();
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.tab').click(function(){
$('.at').removeClass('at');
$(this).addClass('at');
$('.content').slideUp();
var catshow = $(this).attr('rel');
$('#'+ catshow).slideDown();
});
});
</script>
<table border="0" width="100%" class="tborder" cellpadding="4" cellspacing="0" style="margin-bottom: 3px;">
<tr align="center">
<td class="tcat at tab" title="Category 1" style="cursor: pointer;" rel="cat_1">Category 1</td>
<td class="tcat tab" title="Category 4 &amp; 6" style="cursor: pointer;" rel="cat_4, #cat_6">Category 4 &amp; 6</td>
<td class="tcat tab" title="Category 9" style="cursor: pointer;" rel="cat_9, #cat_11">Category 9</td>
</tr>
</table>

Notice:
The "cat_1", "cat_4", "cat_6", "cat_9", "cat_11" were taken from the div code from step 1 above:

"cat_{$forum['fid']}"

And the numbers 1,4,6,9,11 are the ID of the categories that you want you make tab.

Those cat_1, cat_4, cat_9 will be the main tabs that show on the index page.

The #cat_6 will be the category that stay in the same tabs with the cat_4, like how it looks above,
and the #cat_11 will be the category that stay in the same tabs with the cat_9.
=> Dont forget the # for the sub categories, if you forget, then they wont show after the main categories.

You kind of get the idea, right?


Then add these CSS code to global.css:

.at {
    background: #026CB1 url(images/thead_bg.gif) top left repeat-x;
    color: #ffffff;
}

#cat_4{
display: none;
}

#cat_6{
display: none;
}

#cat_9{
display: none;
}

#cat_11{
display: none;
}

(and goes on)

Notice: We will hide all the tabs (not really hide) except the first tab or the tab that you want to be the main tab.
For example, from the code above, it will shows the cat_1 and hide the the rest of them.

If you want to show or change another tab, just add the cat_1 and delete the css of the tab you want to show.
EX: Now I want to show the cat_4, then I'll have this code for my CSS:

.at {
    background: #026CB1 url(images/thead_bg.gif) top left repeat-x;
    color: #ffffff;
}

#cat_1{
display: none;
}

#cat_6{
display: none;
}

#cat_9{
display: none;
}

#cat_11{
display: none;
}

P/S: Remember, you just can choose 1 of the main tabs' css to make it visible.
Like here, I just can choose for cat_1, cat_4, or cat_9, because they are the main tabs I've choose before.

and then I'll change the code from template index from this:

<table border="0" width="100%" class="tborder" cellpadding="4" cellspacing="0" style="margin-bottom: 3px;">
<tr align="center">
<td class="tcat at tab" title="Category 1" style="cursor: pointer;" rel="cat_1">Category 1</td>
<td class="tcat tab" title="Category 4 &amp; 6" style="cursor: pointer;" rel="cat_4, #cat_6">Category 4 &amp; 6</td>
<td class="tcat tab" title="Category 9" style="cursor: pointer;" rel="cat_9, #cat_11">Category 9</td>
</tr>
</table>

To this:

<table border="0" width="100%" class="tborder" cellpadding="4" cellspacing="0" style="margin-bottom: 3px;">
<tr align="center">
<td class="tcat tab" title="Category 1" style="cursor: pointer;" rel="cat_1">Category 1</td>
<td class="tcat at tab" title="Category 4 &amp; 6" style="cursor: pointer;" rel="cat_4, #cat_6">Category 4 &amp; 6</td>
<td class="tcat tab" title="Category 9" style="cursor: pointer;" rel="cat_9, #cat_11">Category 9</td>
</tr>
</table>

That's all.

Hope this modification will be helpful for you.

Looks nice although i think there's a mod for this already.

Yes, there is already a plugin for this.

Labrocca made it -> http://www.mybbcentral.com/thread-2439.html

If I would have known this before I bought my subscription... well I would have still bought my subscription it anyways, this is a waste of time as you could just pay the measly $10 and get the plugin that takes 2 minutes to install/config.

(2009-12-27, 04:59 AM)Skyance Wrote: [ -> ]If I would have known this before I bought my subscription... well I would have still bought my subscription it anyways, this is a waste of time as you could just pay the measly $10 and get the plugin that takes 2 minutes to install/config.

Very true mate.. Well tested your tut and it works!

I just want to help people those don't have money or credit card ( like me ) to get what they can have without paying.

very true.. Im 15 but I dont have a credit card or a working Western union account.. but soon I will

(2009-12-27, 10:54 PM)Joey_Pham423 Wrote: [ -> ]I just want to help people those don't have money or credit card ( like me ) to get what they can have without paying.

Thank you mate!
Great guide.

Yup i am not able to install it successfully if anyone can give me a much greater details will be helpful

I installed and it works, but I want all of the tabs but the first one (I.E. All of my forums.) Is there any way to do this?

Edit: It just started working all of the sudden Thanks so much!