MyBB Community Forums

Hello all. I would like to know how would I change the forum icons into .png format?

You'd need to edit a few of the Forum Bit Templates (as well as the index template if you want the icon legends to match the changes) and the ./jscripts/general.js file.

(2011-09-05, 11:45 AM)faviouz Wrote: [ -> ]You'd need to edit a few of the Forum Bit Templates (as well as the index template if you want the icon legends to match the changes) and the ./jscripts/general.js file.

Could you explain the forum bit templates?

By the way, thanks for the quick reply.

I'll just break it down for you. Provided you have already uploaded the PNG images, here's exactly what you need to do:

1. Go to Admin CP > Templates & Style > Templates > Your Template Set > Forum Bit Templates > forumbit_depth2_cat.

2. Find:

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

3. Change to:

<td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.png" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td>

4. Go to Admin CP > Templates & Style > Templates > Your Template Set > Forum Bit Templates > forumbit_depth2_forum.

5. Find:

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

6. Change to:

<td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.png" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td>

7. Go to Admin CP > Templates & Style > Templates > Your Template Set > Index Page Templates > index.

8. Find:

<dl class="forum_legend smalltext">
	<dt><img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->new_posts}</dd>

	<dt><img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->no_new_posts}</dd>

	<dt><img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
	<dd>{$lang->forum_locked}</dd>
</dl>

9. Change to:

<dl class="forum_legend smalltext">
	<dt><img src="{$theme['imgdir']}/on.png" alt="{$lang->new_posts}" title="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->new_posts}</dd>

	<dt><img src="{$theme['imgdir']}/off.png" alt="{$lang->no_new_posts}" title="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /></dt>
	<dd>{$lang->no_new_posts}</dd>

	<dt><img src="{$theme['imgdir']}/offlock.png" alt="{$lang->forum_locked}" title="{$lang->forum_locked}" style="vertical-align: middle;" /></dt>
	<dd>{$lang->forum_locked}</dd>
</dl>

10. Open the ./jscripts/general.js file in a text editor (e.g. Notepad++).

11. Find:

if(element.src.match("off.gif") || element.src.match("offlock.gif") || (element.title && element.title == lang.no_new_posts)) return;

12. Change to:

if(element.src.match("off.png") || element.src.match("offlock.png") || (element.title && element.title == lang.no_new_posts)) return;

13. Find:

$('mark_read_'+fid).src = $('mark_read_'+fid).src.replace("on.gif", "off.gif");

14. Change to:

$('mark_read_'+fid).src = $('mark_read_'+fid).src.replace("on.png", "off.png");

Woah thank you so much.

Favouiz, I guess js file isn't necessary to edit, I've used this thing over many things and just changed the template part only.

You should though.

Thanks for the great tutorial, very helpful.