Separate Categories on Forumhome

In the default vBulletin skin, all forum categories are displayed as a part of a single table (<table>) element; which visually does not appeal to a lot of users; and slows down the page-loading in IE if there are a large number of categories. Heres a step-by-step guide on how to make those categories separate and insert a line-break between them.

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

2. Click on the Expand Templates [« »] button for the skin which you want to edit.

3. Expand the Forum Home Templates group, by double-clicking on it.

forumhome_forumbit_level1_nopost

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

5. ADD the code highlighted below, in green:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

<if condition="!$show['collapsable_forums']"><tbody></if>
	<tr>
		<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
			<if condition="$childforumbits">
			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
			</if>
			<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
			<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
			<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
		</td>
	</tr>
	<tr align="center">
		<td class="thead" width="50px">&nbsp;</td>
		<td class="thead" align="$stylevar[left]">$vbphrase[forum]</td>
		<td class="thead" width="275px">$vbphrase[last_post]</td>
		<td class="thead" width="75px">$vbphrase[threads]</td>
		<td class="thead" width="75px">$vbphrase[posts]</td>
		<if condition="$vboptions['showmoderatorcolumn']">
			<td class="thead" width="100px">$vbphrase[moderator]</td>
		</if>
	</tr>
<if condition="!$show['collapsable_forums']"></tbody></if>

<if condition="$childforumbits">
	<if condition="!$show['collapsable_forums']">
		<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
	</if>
	$childforumbits
	<if condition="!$show['collapsable_forums']">
		</tbody>
	</if>
</if>

</table>
<br />

6. Hit the [Save] button.

forumhome

7. Double click the FORUMHOME list item, to edit that template; and ADD & REMOVE the codes as highlighted below:

TIP: Find the <!-- main --> and <!-- /main --> comments in the code, as we'll be editing code between those comments only.

<!-- main -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr align="center">
	  <td class="thead">&nbsp;</td>
	  <td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
	  <td class="thead">$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
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<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']">&nbsp; &nbsp;
			<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
		</strong></div></td>
	</tr>
</tbody>
</table>
$forumhome_markread_script
<!-- /main -->

So now, the final code between those two comment tags looks like:

<!-- main -->
$forumbits
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tbody>
	<tr>
		<td class="tfoot" align="center"><div class="smallfont"><strong>
			<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
			<if condition="$vboptions['forumleaders']">&nbsp; &nbsp;
			<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
		</strong></div></td>
	</tr>
</tbody>
</table>
$forumhome_markread_script
<!-- /main -->

8. Hit the [Save] button.

We're Done!

Optional Tweak

If you notice some extra white-space just above the 'What's Going On?' box, remove the line-break (<br />) from the forumhome template highlighted below:

<!-- /main -->

<br />
$ad_location[ad_forumhome_afterforums]
<br />

If you are not at ease with making the above mentioned changes, or fear that you’ll end up messing your vBulletin Forum; feel free to open a thread in our Forum Management section or simply add a comment here; asking for further assistance.