Tabbed ForumHome using DOMTab

by Shadab

Learn how to create a Non-AJAX tabbed ForumHome in vBulletin. We'll be implementing the DomTab solution available here: DOMTab - Navigation tabs with CSS and DOMscripting. Each category on the Forumhome will have it's own tab.

Tabbed Forumhome

IMPORTANT NOTE: Before continuing, please make sure that the Forum categories are displayed in separate tables on the Forumhome, as described in this article:
'Separate Forum Cateogories on ForumHome'

1. Download the zipped DomTab package from HERE and extract it (on your desktop). The zip contains 3 files: domtab.css, domtab.js and index.html. We'll only use domtab.js, so you can safely delete the other 2 files.

2. Via an FTP client or your webhost's Control Panel, upload the extracted domtab.js file into the /clientscript/ folder, present where your vBulletin is installed.

3. Go to: AdminCP » Styles & Templates » Style Manager

4. Click on the Expand Templates [« »] button for the skin which you want to edit; and then expand the Forum Home Templates group.

forumhome_forumbit_level1_nopost

5. Double click on the forumhome_forumbit_level1_nopost list item to edit that template.

6. ADD the code highlighted below, near the start and the end of the template code:

<div class="tabcontent">

<table id="tab_$forumid" class="tborder" cellpadding="$stylevar[cellpadding]"
	cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
	<if condition="!$show['collapsable_forums']"><tbody></if>
	$childforumbits
	<if condition="!$show['collapsable_forums']"></tbody></if>
</if>
</table>
<br />

</div>

7. Hit the [Save] button.

forumhome

8. Now open the FORUMHOME template for editing.

9. Find the $forumbits variable in the code, and add the code before and after it as shown below:

<!-- main -->
<div class="domtab">

	<ul class="domtabs">
		<li><a href="#tab_1">Web Development</a></li>
		<li><a href="#tab_16">Graphic Designing</a></li>
		<li><a href="#tab_8">Website Management</a></li>
		<li><a href="#tab_5">Business and Promotion</a></li>
		<li><a href="#tab_31">General Discussions</a></li>
	</ul>

	$forumbits
</div>

Where 'Web Development', 'Graphic Designing', etc. are the Forum Categories on Forumhome, and 1, 16, etc. are their respective ForumIDs. For each of your Forum category, you'll have to create a List Item (<li>). The format is:

<li><a href="#tab_X">Category Name</a></li>

Where X is that category's ForumID.

10. Hit the [Save and Reload] button. (We'll continue editing this template)

Reload your Forumhome too. A list of links will appear above the Forum categories, as shown in the screenshot below:

List of Category Links

11. In the FORUMHOME template again, find </head> and add the code highlighted below:

	<script type="text/javascript" src="clientscript/domtab.js"></script>
</head>
<body>

12. Hit the [Save] button.