MyBB Community Forums

Yeah the base snippets are meant for you to expand on but oh since you added back the tcat you could change things up a little just lets say for a basic example sake if you wanted to say brighten up on the existing snippet but expand it...

Basic Examples

As theme was intended but modified

* this way you dont really need to add back tcat cuz adding icons gets tge general idea oh yeah thread posts.. as the rest are self explanatory


forumbit_depth1_cat

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead{$expthead}" colspan="5">
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>
</td>
</tr>
</thead>
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
<!--
<tr>
<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>{$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 />

Modified but adding back tcat like you had

*if you opt to keep readded unneeded tcat

forumbit_depth1_cat

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead{$expthead}" colspan="5">
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>
</td>
</tr>
</thead>
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
<tr>
<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>{$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 />

forumbit_depth2_forum

<tr>
<td class="{$bgcolor}" align="center" width="1"><div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="{$forum['myfontawesomeicon']}"></i></div></td>
<td class="{$bgcolor}">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap"><i class="tanp fa fa-comment"></i> {$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap"><i class="tanp fa fa-comments"></i> {$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>

global.css snippet replaced with

.tanp {
   color: #333;
   font-size: 15px;
   text-shadow: 0 0 3px #3f9889, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #999;   
}

.tborder [id^="cat_"] td:nth-child(1){
    background: rgba(15,15,15,0.95);
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px; 
    margin-bottom: 4px;
    border: 1px solid #3f9889;
    -webkit-box-shadow: inset 0 1px 1px rgb(63,152,137), 0 0 8px rgba(63,152,137, 0.8);
    box-shadow: inset 0 1px 1px rgba(63,152,137, 0.8), 0 0 8px rgba(63,152,137, 0.8);
}

.tborder [id^="cat_"] td:nth-child(2){
    background: rgba(15,15,15,0.95);
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px; 
    margin-bottom: 4px;
    border: 1px solid #3f9889;
    -webkit-box-shadow: inset 0 1px 1px rgb(63,152,137), 0 0 8px rgba(63,152,137, 0.8);
    box-shadow: inset 0 1px 1px rgba(63,152,137, 0.8), 0 0 8px rgba(63,152,137, 0.8);
}

.tborder [id^="cat_"] td:nth-child(3){
   background: rgba(15,15,15,0.95);
   width: 5%;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px; 
    margin-bottom: 4px;
    border: 1px solid #3f9889;
    -webkit-box-shadow: inset 0 1px 1px rgb(63,152,137), 0 0 8px rgba(63,152,137, 0.8);
    box-shadow: inset 0 1px 1px rgba(63,152,137, 0.8), 0 0 8px rgba(63,152,137, 0.8);
}

.tborder [id^="cat_"] td:nth-child(4){
    background: rgba(15,15,15,0.95);
    width: 5%;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px; 
    margin-bottom: 4px;
    border: 1px solid #3f9889;
    -webkit-box-shadow: inset 0 1px 1px rgb(63,152,137), 0 0 8px rgba(63,152,137, 0.8);
    box-shadow: inset 0 1px 1px rgba(63,152,137, 0.8), 0 0 8px rgba(63,152,137, 0.8);
}

.tborder [id^="cat_"] td:nth-child(5){
    width: 15%;
    background: rgba(15,15,15,0.95);
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px; 
    margin-bottom: 4px;
    border: 1px solid #3f9889;
    -webkit-box-shadow: inset 0 1px 1px rgb(63,152,137), 0 0 8px rgba(63,152,137, 0.8);
    box-shadow: inset 0 1px 1px rgba(63,152,137, 0.8), 0 0 8px rgba(63,152,137, 0.8);
}

Correct hex color for on icon and mini on icon

myfontawesomeicons.css

.forum_status {background: none !important;height: 50px !important;width: 50px !important;font-size: 30px !important;text-align: center !important;}
.forum_status i {display: inline-block !important;line-height: 50px !important;}
.forum_on {color: #3f9889 !important;}
.forum_on i
.forum_off, .forum_offclose, .forum_offlink {color: #333 !important;}
.forum_off i {opacity: .4 !important;}
/*.forum_offclose i:before {content: "";}*/
/*.forum_offlink i:before {content: "";}*/
.subforumicon {background: none !important; height: 10px !important;width: 10px !important;display: inline-block !important;margin: 0 5px !important;}
.subforum_minion {color: #3f9889 !important;}
.subforum_minioff, .subforum_minioffclose, .subforum_miniofflink {color: #333 !important;}
.subforum_minioff {opacity: .4 !important;}
/*.subforum_minioffclose i:before {content: "";}*/
/*.subforum_miniofflink i:before {content: "";}*/
.forum_legend, .forum_legend dt, .forum_legend dd {margin: 0 !important;padding: 0 !important;}
.forum_legend dd {float: left !important;margin-right: 10px !important;margin-top: 17px !important;}
.forum_legend dt {float: left !important;margin-right: 5px !important;}

Etc, etc, and say modifying further to your wishes, for example say you want the forum on icon, sub mini on icon and the thread and post count icons we just added to pulse so as to draw the eye attention to them

myfontawesomeicons.css

.forum_on {
   color: #3f9889 !important;
   text-shadow: 0 0 3px #fff, 0 0 5px #aaa !important; 
   -webkit-text-fill-color: #3f9889 !important;
   -webkit-text-stroke-width: 1px !important;
   -webkit-text-stroke-color: #fff !important; 
    animation-name: pulse !important;
    animation-duration: 3s !important;
    animation-iteration-count: infinite !important;
}

.subforum_minion {
   color: #3f9889 !important;
   text-shadow: 0 0 3px #fff, 0 0 5px #aaa !important; 
   -webkit-text-fill-color: #3f9889 !important;
   -webkit-text-stroke-width: 1px !important;
   -webkit-text-stroke-color: #fff !important; 
    animation-name: pulse !important;
    animation-duration: 3s !important;
    animation-iteration-count: infinite !important;
}

global.css

@keyframes pulse {
  from { transform: scale(1); }
  50% { transform: scale(0.85); }
  to { transform: scale(1); }
}

.tanp {
   color: #333;
   font-size: 15px;
   text-shadow: 0 0 3px #3f9889, 0 0 5px #aaa; 
   -webkit-text-fill-color: #fff;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #999; 
    animation-name: pulse;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

You could tweak say the existing parts in snippets like so and further...


happy editing.