MyBB Community Forums

Hello there,
Is there a plugin or a tutorial to add background images in each forum
something like this

First create images for your forums and save them with specific ForumID in filename, e.g.:
"background_forum_2.png"
"background_forum_4.png"
"background_forum_5.png"

Edit your Forum Bit Templates "forumbit_depth2_cat"
Add a style (or a class) with a background-image and replace the number by the ID variable:

<div class="trow2 row-bit bottom-border" style="background: url('background_forum_{$forum['fid']}.png') 0 0 no-repeat #333a40">

This way the background image will change its name depending on the Forum ID.

Note: Create transparent images with a gardient for a smooth appearance fitting the background

[ExiTuS]

in which line do i ad this on forumbit_depth2_cat

<div class="trow2 row-bit bottom-border" style="background: url('background_forum_{$forum['fid']}.png') 0 0 no-repeat #333a40">

i added it on the beggining and nothing changes on the forums,
do i have do add the images on my root folder? 
i add my images here
/images/ForumsBackground/

Note:When i delete all the code from  forumbit_depth2_cat nothing changes too.

---

I am newbie at this

Mastersly Wrote:in which line do i ad this on forumbit_depth2_cat

I took the HTML code from your source code and added the style="" element to that line.

Mastersly Wrote:Note:When i delete all the code from forumbit_depth2_cat nothing changes too.

Uhh, then it is depending on your theme. I don't know you theme used and what the template looks like. You have to find the templates for Forum Bits used by your theme.

Best post your template content where forums/subforums are defined, because its a misery to guess any other template sets

[ExiTuS]

forumbit_depth2_cat

<div class="row bottom-border">
	<div class="col-lg-1 text-center padding-8px"><div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></div><i class="{$forum['myfontawesomeicon']}"></i></div>
	<div class="col-lg-5 padding-8px"><strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="small"><span class="help-block">{$forum['description']}</span>{$subforums}</div></div>
	<div class="col-lg-2 text-center small white-space-nowrap padding-8px">{$lang->forumbit_threads}:&nbsp;{$threads}{$unapproved['unapproved_threads']}<br>{$lang->forumbit_posts}:&nbsp;{$posts}{$unapproved['unapproved_posts']}</div>
	<div class="col-lg-4 text-center small white-space-nowrap padding-8px">{$lastpost}</div>
</div>

forumbit_depth2_forum

<div class="{$bgcolor} row-bit bottom-border">
	<div class="col-lg-1 hidden-xs hidden-sm hidden-md" style="padding: 7px 0 5px 10px;">
	<div class="tt forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="{$forum['myfontawesomeicon']}"></i>
	</div>
	</div>
	<div class="col-lg-6 padding-top line-height-1">
	<strong><a href="{$forum_url}" class="fname">{$forum['name']}</a></strong>
	{$forum_viewers_text}
	<div class="small padding-bottom-8px">
	<span class="help-block">{$forum['description']}<br />
	</span>


	</div>
	</div>

	<div class="col-xs-6 col-lg-1 tp posts-bit small white-space-nowrap padding-8px">
<div style="padding: 12px;margin: -12px;color: #afafaf;text-align: center;">{$lang->forumbit_threads}<br>{$threads}{$unapproved['unapproved_threads']}</div>
</div>

<div class="col-xs-6 col-lg-1 tp posts-bit small white-space-nowrap padding-8px">
<div style="padding: 12px;margin: -12px;color: #afafaf;text-align: center;">{$lang->forumbit_posts}<br>{$posts}{$unapproved['unapproved_posts']}</div>
</div>

	<div class="col-lg-3 pull-right lastp small padding-8px white-space-nowrap text-right">{$lastpost}</div>
</div>{$subforums}

this is my template.

"forumbit_depth2_forum"
That's the template to modify

First line:
<div class="{$bgcolor} row-bit bottom-border">

Modified:
<div class="{$bgcolor} row-bit bottom-border" style="background: url('images/ForumsBackground/background_forum_{$forum['fid']}.png') 0 0 no-repeat #333a40">

Mind the correct path to the images folder!

[ExiTuS]

that works perfect, thank you for your help.
I have to make some images now :p