This will give a unique looking forumbit. This also combines in euantor's WONDERFUL category description and this is how I threw it all together.
![[Image: a1e8bf5feeaaa6b95de8119916379286.png]](http://gyazo.com/a1e8bf5feeaaa6b95de8119916379286.png)
As you notice it dosen't change much but it looks great.
ACP > Templates & Style > *Your Theme* > Forum Bit Templates > forumbit_depth1_cat
Replace EVERYTHING with this
Code:
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead" colspan="5">
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<div><span id="{$forum['fid']}name"><a href="{$forum_url}">{$forum['name']}</a></span> <span class="smalltext forumdesc" id="{$forum['fid']}description">{$forum['description']}</span></div>
</td>
</tr>
</thead>
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
<tr>
<td class="tcat" colspan="2"><span class="smalltext"><strong>Forums</strong></span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>
<td class="tcat" width="200" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
</tr>
{$sub_forums}
</tbody>
</table>
<br />
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#{$forum['fid']}description").hide();
jQuery("#{$forum['fid']}name").mouseover(function() {
var content = jQuery("#{$forum['fid']}description").text();
if (content === "") {} else {
jQuery("#{$forum['fid']}description").fadeIn('slow', function() {
// Animation complete
});
}
});
jQuery("#{$forum['fid']}name").mouseout(function() {
jQuery("#{$forum['fid']}description").stop(true, true).fadeOut('slow', function() {
// Animation complete
});
});
});
</script>
ACP > Templates & Style > *Your Theme* > Forum Bit Templates > forumbit_depth1_cat_subforum
Replace EVERYTHING with
Code:
<tr>
<td class="tcat" colspan="6"><strong>» <a href="{$forum_url}">{$forum['name']}</a></strong><br /><span class="smalltext">{$forum['description']}</span></td></tr>{$sub_forums}
ACP > Templates & Style > *Your Theme* > Forum Bit Templates > forumbit_depth2_cat
Replace EVERYTHING with
Code:
<tr>
<td class="tcat" colspan="2"><span class="smalltext"><strong> {$lang->forumbit_forum}</strong></span></td>
<td class="tcat" width="85" align="right" style="white-space: nowrap"><span class="smalltext"><strong>Stats</strong></span></td>
<td class="tcat" width="200" align="left"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
</tr>
ACP > Templates & Style > *Your Theme* > Forum Bit Templates > forumbit_depth2_forum
Replace EVERYTHING with
Code:
<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']}{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}<div id="pt">threads</div> </td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}<div id="pt">posts</div></td>
<td class="{$bgcolor}" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>
ACP > Templates & Style > *Your Theme* > Forum Bit Templates > forumbit_depth3
Replace EVERYTHING with
Code:
<li>{$statusicon}<a href="forumdisplay.php?fid={$forum['fid']}">{$forum['name']}</a></li>
ACP > Templates & Style > *Your Theme* > Forum Bit Templates > forumbit_depth3
Replace EVERYTHING with
Code:
<style type='text/css'>
.groupsub
{
list-style: none;
margin: 0;
padding: 0;
font-size: 11.5px;
}
.groupsub li
{
width: 40%;
float: left;
}
</style>
<br /><ul class="groupsub">{$sub_forums}</ul>
And the last step to activate euantors tutorial.
ACP > Templates & Style > *Your Theme* > Ungrouped Templates > headerinclude
Insert below
Code:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
Code:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
]