MyBB Community Forums

Hello im trying to set different image/icon to each forum, i understand i need to edit the code in this template 

forumbit_depth2_forum

and here is the code, but  no matter how I edit the code, everytime the same icon is set on all forums

<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="fas fa-comment"></i>
    </div>
  </td>
  <td class="art {$bgcolor}">
    <strong>
      <a class="tooltip" href="{$forum_url}" style="word-wrap: break-word;" title="{$forum['description']}">
        {$forum['name']}
      </a>
    </strong>
    {$forum_viewers_text}
  </td>
<td class="mobile-hide {$bgcolor}" width="140" align="left" style="white-space: nowrap"><span style="color: #a7a7a7;"><strong>
Threads</strong><div class="float_right"style="margin-right:20px;">{$threads}{$unapproved['unapproved_threads']}</div><br>Posts</strong><div class="float_right"style="margin-right:20px;">{$posts}{$unapproved['unapproved_posts']}</div></span></td>
<td class="mobile-hide {$bgcolor}" width="220"align="left" style="white-space: nowrap;">{$lastpost}</td>	
{$subforums}
</tr>

i was trying also this, but its the same

<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']}">
        
        <img src="images/forums/myimg.png{$forum['name']|lower}.png" alt="{$forum['name']}" style="vertical-align: middle;">
    </div>
</td>
<td class="art {$bgcolor}">
    <strong><a class="tooltip" href="{$forum_url}" style="word-wrap: break-word;" title="{$forum['description']}">{$forum['name']}</a></strong>{$forum_viewers_text}
</td>
<td class="mobile-hide {$bgcolor}" width="140" align="left" style="white-space: nowrap">
    <span style="color: #a7a7a7;"><strong>Threads</strong>
    <div class="float_right" style="margin-right:20px;">{$threads}{$unapproved['unapproved_threads']}</div><br>
    <strong>Posts</strong>
    <div class="float_right" style="margin-right:20px;">{$posts}{$unapproved['unapproved_posts']}</div></span>
</td>
<td class="mobile-hide {$bgcolor}" width="220" align="left" style="white-space: nowrap;">{$lastpost}</td>    
{$subforums}
</tr>

Don't use the forum name as reference for a custom image!

Every forum has its own ID that is the best reference for every custom image.
First create images for each forum and save these as "FILENAME_FORUMID.png"

The "FILENAME" remains the same for all forums, but the FORUMID correspond to the forum ID.

For example:
Forum 1 / fid=1
Forum 2 / fid=2
Save your custom image for forum 1 as "./images/forumicon_1.png" for the first forum
Save your custom image for forum 2 as "./images/forumicon_2.png" for the second forum

Edit all relevant forumbit templates and add this line whereever you want the icon being displayed:
<img src=".images/forumicon_{$forum['fid']}" alt="{$forum['description']}" width="X" height="Y" />

Optionally you can style the appearance to fit your needs.

To get rid of the standard forum symbols, simply remove the "forum_status" as a value of the class:
<div class="forum_status ...">

[ETS]

(2023-11-13, 11:47 PM)[ExiTuS] Wrote: [ -> ]Don't use the forum name as reference for a custom image!

Every forum has its own ID that is the best reference for every custom image.
First create images for each forum and save these as "FILENAME_FORUMID.png"

The "FILENAME" remains the same for all forums, but the FORUMID correspond to the forum ID.

For example:
Forum 1 / fid=1
Forum 2 / fid=2
Save your custom image for forum 1 as "./images/forumicon_1.png" for the first forum
Save your custom image for forum 2 as "./images/forumicon_2.png" for the second forum

Edit all relevant forumbit templates and add this line whereever you want the icon being displayed:
<img src=".images/forumicon_{$forum['fid']}" alt="{$forum['description']}" width="X" height="Y" />

Optionally you can style the appearance to fit your needs.

To get rid of the standard forum symbols, simply remove the "forum_status" as a value of the class:
<div class="forum_status ...">

[ETS]

Thank you!