What you'll end up with using this tutorial - credit to omar also for his code
Subforum
![[Image: lVQh2L4.png]]()
Index
![[Image: uz1ZZUi.png]]()
Open your theme global.css style sheet and put this at the end:
Open your theme forumbit_depth1_cat template and replace everything with this:
Open your theme forumbit_depth2_forum template and replace everything with this:
Open your theme forumbit_depth2_forum_lastpost template and replace everything with this:
Open your theme forumbit_subforums and delete
Open your theme forumdisplay_subforums template and replace everything with this:
Subforum
![[Image: lVQh2L4.png]](http://i.imgur.com/lVQh2L4.png)
Index
![[Image: uz1ZZUi.png]](http://i.imgur.com/uz1ZZUi.png)
Open your theme global.css style sheet and put this at the end:
Code:
table.forumh {
width:100%;
margin: 0px auto auto;
clear:both;
}
table.forumh h3 hr{
width:98%;
filter:alpha(opacity=60);
opacity:0.6;
}
table.forumh h3.forumdisplay{
text-align:center;
}
table.forumh h3 img {
margin-right:3px;
vertical-align:text-bottom;
max-width:30px;
max-height:25px;
filter:alpha(opacity=60);
opacity:0.6;
}
table.forumh h3 span {
font-weight:normal;
}
table.forumh ul {
list-style: none;
margin: 0px;
padding: 0px;
}
table.forumh ul li {
list-style: none;
width: 50%;
margin-bottom:10px;
float: left;
}
table.forumh ul li table {
width: 98%;
min-height: 110px;
margin: auto auto;
background: #feffe8;
background: -moz-linear-gradient(top, #feffe8 0%, #d6dbbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffe8), color-stop(100%,#d6dbbf));
background: -webkit-linear-gradient(top, #feffe8 0%,#d6dbbf 100%);
background: -o-linear-gradient(top, #feffe8 0%,#d6dbbf 100%);
background: -ms-linear-gradient(top, #feffe8 0%,#d6dbbf 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 );
background: linear-gradient(top, #feffe8 0%,#d6dbbf 100%);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
table.forumh ul li table td img {
max-width:150px;
max-height:110px;
}
table.forumh ul li table div {
font-family: Source Sans Pro;
font-size:13px;
}
table.forumh ul li table div.last {
font-family: Source Sans Pro;
font-size:13px;
}
Open your theme forumbit_depth1_cat template and replace everything with this:
Code:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="forumh tborder">
<thead>
<tr>
<td class="thead{$expthead}" colspan="5">
<h3><div valign="top" class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div></h3>
<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong></div>
</td>
</tr>
</thead>
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
<tr>
<td>
<ul>{$sub_forums}</ul>
</td>
</tr>
</tbody>
</table>
<br />
Open your theme forumbit_depth2_forum template and replace everything with this:
Code:
<li>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}">
<tr>
<td align="center" valign="middle" width="5px" rowspan="2"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span></td>
<td><strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<br />
<div class="smalltext">Discussions: {$threads}{$unapproved['unapproved_threads']} Messages: {$posts}{$unapproved['unapproved_posts']}</div>
<div style="margin-left: -10px;" valign="middle">{$subforums} </div></td>
<td width="36%">{$lastpost}</td>
</tr>
</table>
</li>
Open your theme forumbit_depth2_forum_lastpost template and replace everything with this:
Code:
<div class="last"><a href="{$lastpost_link}" title="{$full_lastpost_subject}"><strong>{$lastpost_subject}</strong></a><br />
{$lang->by} {$lastpost_profilelink}, {$lastpost_date} {$lastpost_time}<br /></div>
Open your theme forumbit_subforums and delete
Code:
<br />
Open your theme forumdisplay_subforums template and replace everything with this:
Code:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="forumh tborder">
<thead>
<tr>
<td class="thead" colspan="1" align="center">
<h3 class="forumdisplay">{$lang->sub_forums_in}</h3>
</td>
</tr>
</thead>
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e"><tr><td>
<ul>{$forums}</ul>
</td>
</tr>
</tbody>
</table>
<br />