MyBB Tutorials

How to use background image in forumbit_depth2_forum (Forums in Index Page)

Submitted by owladmin, , Thread ID: 87167

Thread Closed
owladmin
Novice
Level:
0
Reputation:
3
Posts:
41
Likes:
5
Credits:
1
04-05-2018, 02:42 PM
#1
Some of you probably saw that some MyBB Forums uses background images in Category/Forums on index page, like this:


[Image: 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:

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:
[Image: 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:


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)

Kiddo Monster
Closed Account
Level:
0
Reputation:
0
Posts:
146
Likes:
8
Credits:
123
06-05-2018, 11:36 PM
#2
Test this plugin - https://community.mybb.com/mods.php?action=view&pid=74

It doesn't need too much modify template when you use that plugin ! ( may only css tricks )

RE: How to use background image in forumbit_depth2_forum (Forums in Index Page)

Prohibit
Junior Member
Level:
0
Reputation:
9
Posts:
58
Likes:
2
Credits:
0
07-05-2018, 06:59 AM
#3
Dude, I have been looking EVERYWHERE for this, thank you so much!
A MyBB Community Owner
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)

gravywho
Member
Level:
0
Reputation:
2
Posts:
110
Likes:
12
Credits:
69
07-05-2018, 07:07 AM
#4
I was just wondering yesterday how they did this, what good timing :')
Thanks OP, never hurts to learn something new.

RE: How to use background image in forumbit_depth2_forum (Forums in Index Page)

kikizon
Novice
Level:
0
Reputation:
0
Posts:
44
Likes:
0
Credits:
4
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 Smile

RE: How to use background image in forumbit_depth2_forum (Forums in Index Page)

Prohibit
Junior Member
Level:
0
Reputation:
9
Posts:
58
Likes:
2
Credits:
0
11-09-2018, 06:10 AM
#6
10-09-2018, 11:47 PM
kikizon 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 Smile

Why not just use the images for it like the OP did in the tutorial?
A MyBB Community Owner
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)

kikizon
Novice
Level:
0
Reputation:
0
Posts:
44
Likes:
0
Credits:
4
11-09-2018, 07:10 AM
#7
I adopted another style, but it's ok, I already saved this tuto xd

RE: How to use background image in forumbit_depth2_forum (Forums in Index Page)

nikabuw
Novice
Level:
0
Reputation:
0
Posts:
23
Likes:
0
Credits:
0
10-11-2018, 09:57 PM
#8
cool modification!! i will apply it soon when i got the kingfire theme :sip:

Users browsing this thread: 1 Guest(s)