MyBB Community Forums

Full Version: [Tutorial] Forum Icons Variation
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5
This tutorial will give you this result:

[attachment=14914]

I'll just post the tutorial here, as it's pointless to link to my site. XD

In this tutorial, I'll be showing you how to add forum icons to your forums, they'll be custom for each section.

This tutorial was inspired by http://community.mybboard.net/thread-34606.html.

It's a simple tutorial, and only takes a few simple steps. First, open your forumbit_depth1_cat template, and replace it with this:

<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"></td>
<td class="tcat"></td>
<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 />

Find your forumbit_depth2_cat and replace it with this:

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

Next, find your forumbit_depth2_forum template and replace it with this:

<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']}{$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>

Now, lastly, find your forumdisplay_subforums and replace it with this:

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="6" 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>
<td class="tcat" width="15%" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
</tr>
{$forums}
</table>
<br />

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.


Tutorial powered by http://mybbfix.freehostia.com.
Nice job, looks pretty easy to accomplish. Shame that it doesn't change if there are new posts or not. That would be amazing.
Great tut. Thx.
[Image: sanstitresum.jpg]



I think I did okay, copied and replace the templates in the cp-created the folder and put the pictures there just as the number of each section in my forum but they do not appear.
http://www.moviemania-pt.com/forumdisplay.php?fid=2

Your first image should be 2.png

http://www.moviemania-pt.com/forumdisplay.php?fid=59

Your second image should be 59.png

And so forth and so on.
I already have did that.. in all sections,but didn't work
Then you're doing something wrong. :/

Make sure the images are in currentthemedirectory/images/icon, and if they're named right, you shouldn't have any problems.
lolz::>

public_html/images/icon yes they are named right can see it on print?
I can't find my problem...xP
Can someone see the images?
http://www.moviemania-pt.com/index.php
Alright, found your problem. You need to upload them to images/midnight/icon.
nice tutorial, thanks
Pages: 1 2 3 4 5