Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
DJ's "Custom Forum Icons" (Default Functionality You Didn't Know About)
Digital Jedi
Join Date: Oct 2006
Posts: 5,171

I buttered my rolling stone, now I have to lie in it.

PopCulturalReferenceLand
by Digital Jedi Digital Jedi is offline 09 Jan 2011
Rating: (1 vote - 5.00 average)

Periodically, I see questions asking how to add custom forum icons to a specific forum. Now in the case of Categories, there are a few mods out there that will do just that for various versions of vBulletin and you would need one of those if that's what you're looking for. But what a number of administrators don't know about, or don't quite understand, is vBulletin's default ability to add custom icons to your individual forum sections. And the default Admin CP instructions might be vague to beginners. In truth, it's actually easy as pie once explained. Here's a brief explanation for you to reference and for others to point to when this question comes up again.


Create Your Images
First and foremost, create/select the images you want to use for this forum section. You will need 5 images exactly. One for each status that forum might represent. Then you'll need to give them the same naming convention that your existing forum icons have, with one difference that I'll explain in a moment. Here's what you'll need.
forum_new.gif
For when there are unread posts in an open forum:


forum_new_lock.gif
For when there are unread posts in a closed forum:


forum_old.gif
For when there are NO unread posts in an open forum:


forum_old_lock.gif
For when there are NO unread posts in a closed forum:


forum_link.gif
For when your forum is a link to another URL:
That last one you may not need if you're not planning on making that forum a hyperlink. Or, you may just need a forum to have a hyperlink and nothing else. Make whatever images you think your going to need. Obviously, if it's a forum where posting is taking place, you'll need the first four.

I probably don't have to tell you to make sure those images are distinct and that it's clear at a glance what they mean. A forum where a user might not be allowed to post should reflect that, unless for some reason you don't care.

NOTE: If for some reason, you've edited your forumhome_ templates to use a different extension for Status Icon images, say you've changed them so they use .png instead .gif, then your custom icons will need to be the same extension type.

Rename Your Images
Now you need to make that change to the image names before you upload them to your /statusicon directory, otherwise you'll overwrite your existing default icons. Add a prefix to the beginning of the name.

djs_forum_new.gif
djs_forum_new_lock.gif
djs_forum_old.gif
djs_forum_old_lock.gif
djs_forum_link.gif

The prefix can be whatever you want, and doesn't have to include the underscore I used here. But the characters can only contain A-Z, 0-9, a dash, an underscore or a period.

Upload these images to your /statusicon directory. Be default, that's usually located in the /images folder. But you'll also need to upload them to the /statusicon folder of any custom styles you think people will be using when browsing that forum.

You can also add the icons to a subfolder in the statusicon folder. You would follow the same naming rules as above. You also don't necessarily have to add prefixes to the file names in this case.

Adding Your Icons
Now go to your Admin CP Forums & Moderators Forum Manager and select the forum you want to add custom icons to. Scroll down to Style Options and in Prefix for Forum Status Images your going to put the prefix name you just gave your images. In my case, I would simple put djs_ and save.


If you've instead added your icons to a subfolder in your statusicons folder, then put the name of the folder and a slash to indicate that it's a folder directory. For example, if the icons are located in your images/statusicons/new folder. Put new/ into that field and save.

If you also added prefixes to the images in this subdirectory, then include the prefixe name. For example, if my images are in the images/statusicons/new folder and they're all prefixed like this" djs_forum_new.gif. Then I simply put new/djs_ into that field and save.



Like I said, really easy, but not necessarily clear from the default instructions. Hopefully, this makes life a little easier for you and for anyone this needs explaining to. Have fun customizing your images. For adding Category icons, please see one of the numerous modifications throughout the forums that do just that for different versions of vB.

Last edited by Digital Jedi; 09 Jan 2011 at 07:15..
Views: 14137
Reply With Quote
Comments
  #2  
Old 02 Apr 2011, 14:25
gamerscms gamerscms is offline
 
Join Date: Aug 2007
I would like to say a big thanks for this, it was not clear but now you have made it all clear.

THANK YOU
Reply With Quote
  #3  
Old 24 Mar 2013, 17:49
matrex722's Avatar
matrex722 matrex722 is offline
 
Join Date: Jan 2007
thank you so much
Reply With Quote
  #4  
Old 08 Aug 2014, 01:44
fxdigi-cash fxdigi-cash is offline
 
Join Date: Jul 2012
Thanks DJ for the great article.

I have one question, is it possible to use sprite for forum icons with if conditional on vb4? because I don't see how this can work since vb4 has only forum_{vb:raw forum.statusicon}-48.png that changes by itself!!

any idea?
__________________
Shoot me a PM if I didn't reply in your post when you needed help. I can't remember things easily
Reply With Quote
Reply

Similar Article
Article Author Type Replies Last Post
Integration with vBulletin DJ's Living Avatars User CP/Admin CP "Integration" Digital Jedi vBulletin 3.8 Add-ons 49 11 Feb 2010 01:11



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 08:26.

Layout Options | Width: Wide Color: