2018-05-10, 02:07 PM
Some of you probably saw that some MyBB Forums uses background images in Category/Forums on index page, like this:
![[Image: zJUjVlp.png]](https://camo.mybb.com/2485c533f3532dbe19afd339a1f24e36ded032aa/68747470733a2f2f692e696d6775722e636f6d2f7a4a556a566c702e706e67)
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:
Now we are gonna add:
that will help us do this, like this:
Now we have each element with unique ID, see the image:
![[Image: oZgmbH7.png]](https://camo.mybb.com/da06e44a65a77b9642e06ad3196449133949c4e4/68747470733a2f2f692e696d6775722e636f6d2f6f5a676d6248372e706e67)
That is an area that will have background image.
3. Now open global.css (or any other css file) and add this code:
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
add:
That's it! Enjoy
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