MyBB Tutorials
How to use background image in forumbit_depth2_forum (Forums in Index Page)
Submitted by owladmin, 04-05-2018, 02:42 PM, Thread ID: 87167
Thread Closed
Some of you probably saw that some MyBB Forums uses background images in Category/Forums on index page, like this:
![[Image: Forum_bg.png]](https://image.ibb.co/memzb7/Forum_bg.png)
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: id_bg.png]](https://image.ibb.co/dVfmOn/id_bg.png)
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:
--------------------------------------------------
HOPE YOU WILL FIND THIS USEFUL!
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:
Code:
<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:
Code:
id="forum_cat_{$forum['fid']}"that will help us do this, like this:
Code:
<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:
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.
Code:
id="forum_cat_{$forum['fid']}"add:
Code:
id="forum_cat_1"--------------------------------------------------
HOPE YOU WILL FIND THIS USEFUL!
RE: How to use background image in forumbit_depth2_forum (Forums in Index Page)
06-05-2018, 11:36 PM
#2 RE: How to use background image in forumbit_depth2_forum (Forums in Index Page)
07-05-2018, 06:59 AM
#3 Looking for MyBB friends <3
Always looking for good tutorials for MyBB.
RE: How to use background image in forumbit_depth2_forum (Forums in Index Page)
07-05-2018, 07:07 AM
#4 RE: How to use background image in forumbit_depth2_forum (Forums in Index Page)
10-09-2018, 11:47 PM
#5 I have since a month try to create te same effect like images, and I can't, I'm not good on css, ty anyway bro 
RE: How to use background image in forumbit_depth2_forum (Forums in Index Page)
11-09-2018, 06:10 AM
#6 10-09-2018, 11:47 PMkikizon Wrote: I have since a month try to create te same effect like images, and I can't, I'm not good on css, ty anyway bro
Why not just use the images for it like the OP did in the tutorial?
Looking for MyBB friends <3
Always looking for good tutorials for MyBB.
RE: How to use background image in forumbit_depth2_forum (Forums in Index Page)
11-09-2018, 07:10 AM
#7 RE: How to use background image in forumbit_depth2_forum (Forums in Index Page)
10-11-2018, 09:57 PM
#8 Users browsing this thread: 5 Guest(s)