MyBB Community Forums

This is a nice feature if you want to use custom icons and don't want to kill your CPU usage (if is a Shared Host) - Without <img> tags to each Forum there will be lower http requests.



Updated in Feb/09


(I) New Style Sheet

Create this CSS in ACP => Themes => Edit Theme => Add Stylesheet:

custom_forum_icons.css

Quote:CSS Example is attached to download with the complete tutorial

This new style must be conected only to forumdisplay.php and index.php




[II] Template Edit
Go to ACP => Templates & Style => Templates => Expand your Template

Expand "Forum Bit Templates":

forumbit_depth2_forum

Find:

Quote:
<img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" />

Replace with:

Quote:
<!--Start - CSS Custom Forum Icons-->
<h2 id="{$lightbulb['folder']}_{$forum['fid']}"><a href="forumdisplay.php?fid={$forum['fid']}" rel="nofollow"><span>status</span></a></h2>
<!--End CSS Custom Forum Icons -->

[III] Background Image

Put "custom_forum_icons.png" in "\images\yourtheme\" folder



..


Thanks Labrocca for Custom Forum Icons for 1.2x and texasli for the code in mybb 1.4

other ways to do it:
http://community.mybboard.net/thread-34606.html
http://www.mybbcentral.com/thread-1663.html


..

Ok I did all of that but there was one problem

Only that last forum category had an image

http://i38.tinypic.com/15x23ch.jpg

How do I edit the codes so they all have there own one?

The important it´s that each forum ID you have, get 3 classes in CSS file: on_ID, off_ID and offlock_ID. This sequence: 1,2 and 3 is figurative

example:
http://www.yoursite.com/forumdisplay.php?fid=38

will be:

Quote:/* Margin */
#on_38, #off_38, #offlock_38,
#on_2, #off_2, #offlock_2,
#on_3, #off_3, #offlock_3 { margin:0; padding:0; }

Replace all "_1" to "_38" and you´ll get the idea



When you have more than 3 Forums, just add some height to image canvas and add the new icons there and subtract 75pixels to last icon position in CSS background-position

x,y,z and v = different forum IDs

#on_x a, #off_x a { background-position: 0 -0px; }
#on_y a, #off_z a { background-position: 0 -147px; }
#on_z a, #off_z a { background-position: 0 -222px; }
#on_v a, #off_v a { background-position: 0 -297px; }
etc...

You can get this "Y" position in Photoshop with pressing Ctrl+R and using pixels to scale

Ok how do I make it so that each of them have there own image?

you need to edit this image to your needs

try it with your own forum IDs in CSS and you´ll get the idea

if you dont know how to work with 'CSS' read some tutorials first, it´s easy and usefull stuff

This was extremely helpful - thanks!

There is no need of such a lengthy piece of code, when by using CSS font shorthand rule you can write the whole style in a single line.Human beings understand a particular topic more clearly if it is explained with the help of examples. log on this website and take help
CSS Tools,

Thanks! But now Labrocca has released a plugin for this...

(2008-09-25, 09:50 AM)Pitter Wrote: [ -> ]There is no need of such a lengthy piece of code, when by using CSS font shorthand rule you can write the whole style in a single line.Human beings understand a particular topic more clearly if it is explained with the help of examples. log on this website and take help
CSS Tools,

I didn´t understand what you mean... the image itself is an example if you know how mybb forum icons works ('on', 'off' and 'offlock' states)

(2008-09-25, 09:28 PM)Infranight Wrote: [ -> ]Thanks! But now Labrocca has released a plugin for this...

OK but that´s not for shared hosts like mine, as to each ficon there is a new http request in mybb Central Plugin (<img src=blablabla>).

I´ve installed in my board the 1.2x version by labrocca and there is too much perfomance lost with 30+ foruns in Board Index like my case

Tutorial updated using Forum Ids 2-6