[1.8] [1.6] Forums and Categories In Columns

[Brian.]

Hello,

Today I will be telling you how you can make your forum layout like TheTechGame.com by having your forums and categories in columns.

Note: This tutorial was only tested on 1 theme which was Star Gaming. https://community.mybb.com/mods.php?acti...ns&pid=966

P.S: This code hasn't been tested in all browsers and may not work on all themes. MAKE A THEME / TEMPLATE BACKUP!

Let's begin. Go to
Admin CP -> Templates & Styles -> Templates -> 'Your Theme' -> Forum Bit Templates -> forumbit_depth1_cat and replace all with:

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tforum" style="width:50%;padding-right: 25px;float:left;">

<thead>



<tr>
<td class="thead" colspan="5">


<div><strong>{$forum['name']}</strong><br /><div class="smalltext">{$forum['description']}</div></div>
</td>
</tr>
</thead>

<td class="tcat" colspan="2"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>Threads / Posts</strong></span></td>
</tr>

<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
{$sub_forums}
</tbody>
</table><br />

Then
Admin CP -> Templates & Styles -> Templates -> 'Your Theme' -> Forum Bit Templates -> Forumbit_depth1_cat_subforum and replace all with:

<tr>

<td class="tcat" colspan="6"><strong>&raquo;&nbsp;&nbsp;<a href="{$forum_url}">{$forum['name']}</a></strong><br /><span class="smalltext">{$forum['description']}</span></td></tr>{$sub_forums}

Then
Admin CP -> Templates & Styles -> Templates -> 'Your Theme' -> Forum Bit Templates -> forumbit_depth2_cat and replace all with:

<tr>
<td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td>

<td class="{$bgcolor}" valign="top">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$subforums}</div>
</td>

Then
Admin CP -> Templates & Styles -> Templates -> 'Your Theme' -> Forum Bit Templates -> forumbit_depth2_forum and replace all with:

<tr>
<td class="{$bgcolor}" align="center" valign="top" width="1"></td>
<td class="{$bgcolor}" valign="top">
<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>

<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$threads}<br />{$posts}</td>

Then
Admin CP -> Templates & Styles -> Templates -> 'Your Theme' -> Forum Bit Templates -> forumbit_depth3 and replace all with:

<li style="margin-top: 3px">{$statusicon}<a href="forumdisplay.php?fid={$forum['fid']}">{$forum['name']}</a></li>

Then
Admin CP -> Templates & Styles -> Templates -> 'Your Theme' -> Forum Bit Templates -> forumbit_subforums and replace all with:

<ul class="columns"><font size="3px">{$sub_forums}</font></ul>

The CSS

Go To
Admin CP -> Templates & Styles -> Themes -> 'Your Theme' -> global.css and add

tforum {
	background:#026CB1 url(images/block/thead.png) top left repeat-x;
	border-bottom: 1px solid ##fff;
	color:#fff;
border-top-right-radius: 900em;
	padding:10px 8px;
margin-top: 200px;
	text-shadow:0 1px 1px rgba(0,0,0,0.45);
	text-transform:uppercase;
}

.columns {
list-style: none; 
margin: 0;
padding: 0;
float: right;
width: 100%;
}

.columns li {
width: 75%;
float: left; 

}

It should look like:



For a live preview click Here
READ: Since you will have to use sub forums make sure to go to your Admin CP and make a new forum name it “.” And put it in the category you want and add the forums in that category to the forum you named “.”

If I messed up the code or you want to add anything just post below. Also if this help you should +REP me thanks.

---

Update #1: Fix the alignment and spacing also now displays threads and post.

[Brian.]

* Bump *

Update #1: Fix the alignment and spacing also now displays threads and post.

[rightleft12]

not working

[terzier]

live preview site not working. or just me?