Thread Rating:
  • 10 Vote(s) - 4.2 Average
  • 1
  • 2
  • 3
  • 4
  • 5
(Updated Feb/2009) Mybb 1.2x/1.4x Pure CSS "Custom Forum Icons" with only 1 image
#1
Lightbulb 
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.

[Image: custom-forum-icons-mybb-1_44.png]

Updated in Feb/09


(I) New Style Sheet

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

custom_forum_icons.css

[Image: add_stylesheet.gif]

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

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

[Image: Css-configuration.gif]


[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

[Image: custom_forum_icons.png]

..


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


..


Attached Files
.zip   Tutorial mybb custom forum icons with CSS.zip (Size: 54.17 KB / Downloads: 647)
Reply
#2
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?
If You Are En I Tee, You Are Eeh

Blush Cool
Reply
#3
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
Reply
#4
Ok how do I make it so that each of them have there own image?
If You Are En I Tee, You Are Eeh

Blush Cool
Reply
#5
you need to edit this image to your needs
[Image: custom_forum_icons.png]
try it with your own forum IDs in CSS and you´ll get the idea Wink

if you dont know how to work with 'CSS' read some tutorials first, it´s easy and usefull stuff
Reply
#6
This was extremely helpful - thanks!
Reply
#7
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,
Reply
#8
Thanks! But now Labrocca has released a plugin for this...
Veetri Design & Development, or developer news at Changry
Reply
#9
(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
Reply
#10
Tutorial updated using Forum Ids 2-6
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)