Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] Use background image in Forums in Index Page
#1
Some of you probably saw that some MyBB Forums uses background images in Category/Forums on index page, like this:
[Image: zJUjVlp.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: oZgmbH7.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"


That's it! Enjoy Cool
Do NOT PM me for support unless I ask you on your support thread.
Reply
#2
Thanks, we appreciate your contribution.
eggplant you orange
Reply
#3
This user has been denied support. 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
Reply
#4
(05-14-2018, 04:48 PM)GrandMaster Wrote: 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.
Do NOT PM me for support unless I ask you on your support thread.
Reply
#5
Great, thank you!
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply
#6
i somewhat got it but why are they all the same images, think i am missing something
[Image: cb8706439326c408b2241c2c8f842288.png]
the image is just a test.
[Image: latest?cb=20140105190402]
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)