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.

(I) New Style Sheet
Create this CSS in ACP => Themes => Edit Theme => Add Stylesheet:

custom_forum_icons.css

Quote:
/* CSS Custom Forum Icons to Mybb 1.4
Customization with less http requests
http:\\agleoeoleo.wordpress.com
*/

/* Margin */
#on_1, #off_1, #offlock_1,
#on_2, #off_2, #offlock_2,
#on_3, #off_3, #offlock_3 { margin:0; padding:0; }

/* New Threads? Lighten up */
#on_1 a,
#on_2 a,
#on_3 a {filter:alpha(opacity=100);-moz-opacity:1.0;
}

/* no new messages? Less attention then */
#off_1 a,
#off_2 a,
#off_3 a {filter:alpha(opacity=25);-moz-opacity:.25;
}

/* hidden span */
#on_1 a span, #off_1 a span, #offlock_1 a span,
#on_2 a span, #off_2 a span, #offlock_2 a span,
#on_3 a span, #off_3 a span, #offlock_3 a span { display:none }

/* All ppl background */
#on_1 a, #off_1 a,
#on_2 a, #off_2 a,
#on_3 a, #off_3 a,
#offlock_1 a,
#offlock_2 a,
#offlock_3 a {display:block;
width:80px; height:70px;
margin:0; padding:0;
background: url(images/yourtheme/custom_forum_icons.png);
text-decoration: none;}


/* Background position - Make you way here */
#on_1 a, #off_1 a { background-position: 0 0; }
#on_2 a, #off_2 a { background-position: 0 -147px; }
#on_3 a, #off_3 a { background-position: 0 -222px; }



/* Locked Forum - Same to all ppl */
#offlock_1 a,
#offlock_2 a,
#offlock_3 a { background-position: 0 -70px;
}

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

Expand "Forum Bit Templates":

forumbit_depth2_forum

Replace:

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

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 and Screenshot

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

See attachments
[attachment=10361]

[attachment=10362]

..


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




..

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...

(09-25-2008 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)

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

OK but that´s not to shared hosts as 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 boards