[AJAX] Tab Menu For Forum Home
1/ Upload the tabs.js to folder clientscript (i.e:
www.yourdomain.com/forum/clientscript/tabs.js)
2/ Upload the tabs.css and 2 gif images to folder clientscript/vbulletin_css/ (i.e:
http://www.yourdomain.com/forum/clie...n_css/tabs.css)
3/ Upload tabs.php to your forum root (i.e:
www.yourdomain.com/forum/tabs.php)
4/ Go to your Admin CP and create a new child style from your current style.
5/ On the new style your have just created, from the Template Options, choose "Add New Template" and name it tabs_forumhome.
Copy the below code and paste to the Template section and submit:
HTML:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar[align=left]">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
<tbody>
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
<if condition="$vboptions['forumleaders']">
<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
</strong></div></td>
</tr>
</tbody>
</table>
$forumhome_markread_script
6/ Do step 5 again and name it tabs_forumbits copy and paste the following code into Template section:
HTML:
<tbody>
<tr>
<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><a style="float:right" href="#top" onclick="return toggle_collapse('forumbit_$tabs[id]')"><img id="collapseimg_forumbit_$tabs[id]" src="images/buttons/collapse_tcat.gif" alt="" border="0" /></a><a href="forumdisplay.php?f=$tabs[id]">$tabs[title]</a></td><tr>
<td class="smallfont" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">$tabs[description]</td>
</tr>
</tbody>
<tbody id="collapseobj_forumbit_$tabs[id]" style="">$tabs[forumbits]</tbody>
7/ Now you need to create a new template for login required forum. Do step 5 again and name it tabs_loginrequired and paste the below code into Template section:
HTML:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="70%" align="center">
<tr>
<td class="tcat">$vbphrase[vbulletin_message]</td>
</tr>
<tr>
<td class="panelsurround" align="center">
<div class="panel">
<div align="$stylevar[align=left]">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
<form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
<input type="hidden" name="do" value="login" />
<input type="hidden" name="url" value="$scriptpath" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
$postvars
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<blockquote>
$vbphrase[not_logged_no_permission]<br /> <br />
1. $vbphrase[not_logged_in_fill_in_form]<br />
2. $vbphrase[may_not_have_sufficient_privileges]<br />
3. $vbphrase[administrator_may_disabled_account]<br />
</blockquote>
<fieldset class="fieldset">
<legend>$vbphrase[log_in]</legend>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0" align="center">
<tr>
<td>$vbphrase[username]:<br /><input type="text" class="bginput" name="vb_login_username" size="50" accesskey="u" tabindex="1" /></td>
</tr>
<tr>
<td>$vbphrase[password]:<br /><input type="password" class="bginput" name="vb_login_password" size="50" tabindex="1" /></td>
</tr>
<tr>
<td>
<span style="float:$stylevar[align=right]"><a href="login.php?$session[sessionurl]do=lostpw">$vbphrase[forgotten_your_password]</a></span>
<label for="cb_cookieuser"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser" tabindex="1" />$vbphrase[remember_me]</label>
</td>
</tr>
<tr>
<td align="$stylevar[align=right]">
<input type="submit" class="button" value="$vbphrase[log_in]" accesskey="s" tabindex="1" />
<input type="reset" class="button" value="$vbphrase[reset_fields]" accesskey="r" tabindex="1" />
</td>
</tr>
</table>
</fieldset>
<if condition="$show['register_message']">
<div class="smallfont"><phrase 1="register.php?$session[sessionurl]do=signup">$vbphrase[admin_required_register]</phrase></div>
</if>
</form>
</div>
</div>
</td>
</tr>
</table>
8/ Ok, now you need to modify the FORUMHOME template as following:
Add this code between:
Code:
<script type="text/javascript" src="clientscript/tabs.js"></script>
<link rel="stylesheet" type="text/css" href="clientscript/vbulletin_css/tabs.css" />
Now replace all codes between <!-- main --> and <!-- /main --> by this
New code update 07/06/2008
HTML:
<!-- Tab menu by NsT @ RCHobby365 -->
<!-- Default tab ID to load initially -->
<input type="hidden" value="1" id="defaulttab">
<table border="0" width="100%" align="center">
<tr><td>
<div id="tabsF">
<ul>
<li><a href="#1" id="a1"><span id="s1">Category 1</span></a></li>
<li><a href="#2" id="a2"><span id="s2">Category 2</span></a></li>
<li><a href="#3|4" id="a3|4"><span id="s3|4">Category 4</span></a></li>
</ul>
</div>
</td></tr>
<tr><td id="forumbits">
</td></tr></table>
<!-- End tab menu -->
On the <body> tag, add this code:
So the body tag should be like this:
HTML:
<body onLoad="startLoad();">
Now the mod is almost done. It's time for you to config the tabs. The update on 07/06/2008 basically remove the onClick event to make the tab simpler.
Note: You MUST define a specific tab you want to load initially (this will load a specific tab when user access default url such as: forum/index.php). To do this, you need to enter the value (ID) of the hidden input:
HTML:
<input type="hidden" value="1" id="defaulttab">
Now the value="1" so it will load category ID=1 if member go to your index.php page. If you want to load several categories, you need to add the category ID into a string seperate by |.
For example: value="1|3" and this will load category 1 and 3. You MUST also have a tab that loads category 1 and 3 or the mod wont work and you will receive an Javascript error.
Exampe:
HTML:
<li><a href="#1|3" id="a1|3"><span id="s1|3">Category 1</span></a></li>
<li><a href="#1" id="a1"><span id="s1">Category 1</span></a></li>
If you want a tab to list a single category with its sub-forums, on the href you just need to enter the category ID after the #:
For example: href="#1" will list Category ID=1 and its sub-forums.
If you want a tab to list multiple category with their sub-forums, you need to enter a string of categories ID.
For example: href="#3|4" will list Category ID=3 and ID=4 with their sub-forums.
You can list as many categories as you want, just add their ID into the string, seperate by "|" and this string must be after the #.
The ID of <a> and <span> tag is used to define the selected tab. The ID is given by the ID of a single category or multiple category with "|". ID of <a> tag starts with "a" and ID of <span> tag starts with "s".
To load all category like normal, you can use this tab:
HTML:
<li><a href="#all" id="aall"><span id="sall">View All</span> </a></li>
