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.
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:
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.
Pages: 1 2
[...] I'll have to wait for the tutorial… but thank you very much for making one! Published: Tabbed ForumHome using DOMTab Let me know if it results in any error. Though I have tested it successfully, a couple of times, [...]
Very nice. I’ve spent several days trying to get tabs to work on my forum until I came across yours. It works perfectly. Thanks!
It is very Useful
Thanks