[For 1.8] Use background image in Forums in Index Page

[Livewire]

Some of you probably saw that some MyBB Forums uses background images in Category/Forums on index page, like this:


It looks especially effective in Forums that has Dark color scheme.
It is not too complex, but it has to be done for each Category/Forum separately.

You can of course, using CSS, set that all category/Forums uses same background image too.

P.S. You should be aware that background image has to be transparent in order to take full effect.

1. First open:
   Home » Template Sets » Default Templates » Edit Template: forumbit_depth2_forum

2. This is the code you currently have:

<tr>
<td class="{$bgcolor}" align="center" width="1"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span></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">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>

Now we are gonna add:

id="forum_cat_{$forum['fid']}"

that will help us do this, like this:

<tr>
<td class="{$bgcolor}" align="center" width="1"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span></td>
<td id="forum_cat_{$forum['fid']}" 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">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>

Now we have each element with unique ID, see the image:


That is an area that will have background image.

3. Now open global.css (or any other css file) and add this code:

#forum_cat_2 {
   background: url(../../../images/your theme's image folder/002.png);
   background-repeat: no-repeat !important;
   background-position: left top !important;
}

Now you will have to add code to CSS file for every Forum ID..or

You can set one ID for all forums and add just one code to CSS, in that case all Forums will have same background image.

instead of

id="forum_cat_{$forum['fid']}"

add:

id="forum_cat_1"

That's it! Enjoy

[Omar G.]

Thanks, we appreciate your contribution.

[GrandMaster]

This user has been denied support.

Added all code and still nothing is showing up for me :/
Any chance you could lend a hand please

[Livewire]

Added all code and still nothing is showing up for me :/
Any chance you could lend a hand please

Forum URL?
Also please provide test admin account.

[Eldenroot]

Great, thank you!

[sosanime]

i somewhat got it but why are they all the same images, think i am missing something

the image is just a test.

[xXMoeXx]

This user has been denied support.

Thank you for this tutorial. I am currently adding it on my forum. I do have a recommendation to those that want to make it look like those images shown in OP.

- Bring Brightness Down on Image,
- Fade Image position,
- Make background of image the same as forum,