[Tutorial][Mybb 1.4] 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.

(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
   

   

..


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




..

[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