(Updated Feb/2009) Mybb 1.2x/1.4x Pure CSS "Custom Forum Icons" with only 1 image

[aglioeolio]

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



..

[krazygamers]

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?

[aglioeolio]

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

[krazygamers]

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

[aglioeolio]

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

[smancuso]

This was extremely helpful - thanks!

[Pitter]

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,

[Infranight]

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

[aglioeolio]

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

[aglioeolio]

Tutorial updated using Forum Ids 2-6