MyBB Community Forums

Full Version: [Guide] Custom Forum Icons - No Plugin
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Today I will be showing you how I setup my forum topic icons without using any plugins. I know I had a hard time figuring this out, so I hope this guide helps. ( :

First of all, I would like to give most credit to Eric J. of
MyBB Community. I just put in my own words, and give additional information.

Let's begin.

1. Start with the following.

Quote:Now, in your ftp, make a folder called "icon" under your /images directory, and upload images named after the specific fid to get them to appear in that specific forum. So, for example, if you click on one of your forums, and in the top address bar, it says "forumdisplay.php?fid=12", you would name the image for that forum, 12.png, and then upload it to your /images/icon directory.
- Eric J.
You can get your forum icons at http://www.iconspedia.com/. I suggest using 64x64.

2. After you have finished step 1 completely, go to the Admin Panel of your forum. Click Templates & Styles> Templates (left side)>
Whatever theme you plan to use this for click expand.

3. Now expand the Forum Bit Templates, then click forumbit_depth1_cat. Replace everything in this box with the following and save.


<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead" colspan="6">
<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">
<td class="tcat"><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 />

4. Back at your forumbit template list, click on forumbit_depth2_cat.
Replace everything in this box with the following and save.


<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="center">

<img src="{$theme['imgdir']}/icon/{$forum['fid']}.png" />

</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>

<td class="{$bgcolor}" valign="top" align="center" 
style="white-space: 
nowrap">{$threads}{$unapproved['unapproved_threads']}</td>

<td class="{$bgcolor}" valign="top" align="center" 
style="white-space: 
nowrap">{$posts}{$unapproved['unapproved_posts']}</td>

<td class="{$bgcolor}" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>

</tr>

5. Back at your forumbit template list, click forumbit_depth2_forum.
Replace everything in this box with the following and save.

-Big thanks to Yaldaram of
MyBB Community

<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="center" width="50px">
<img src="{$theme['imgdir']}/icon/{$forum['fid']}.png" />
</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']}</td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>

6. Now back at your theme templates (same place as forumbit templates), expand the Forum Display Templates. Scroll down and click forumdisplay_subforums.

Now replace everything in the box with the following and save.


<table border="6" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

<tr>

<td class="thead" colspan="0" align="center"><strong>{$lang->sub_forums_in}</strong></td>

</tr>

<tr>

<td class="tcat"></td>

<td class="tcat" width="2%">&nbsp;</td>

<td class="tcat" width="59%"><span 
class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>

<td class="tcat" width="7%" align="center" style="white-space: 
nowrap"><span 
class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>

<td class="tcat" width="7%" align="center" style="white-space: 
nowrap"><span 
class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>


</tr>

{$forums}

</table>

<br />

Now you should have custom icons for your forum topics. xD
Please, if you have any questions or feedback feel free to comment.