Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
How To Use Category Specific Images For Your Category Strips
peterska2
Join Date: Oct 2003
Posts: 6,504

Manchester, UK
by peterska2 peterska2 is offline 19 Jun 2006

This article describes how to set up category specific images for each category on your site. This works for fixed width styles only.



Step One: Create Your Images

First of all you need to create your images. You need one for each category on your site. The width of each one needs to be approx 100px less than your style width (eg if your style is 800px wide, then your image should be 700px wide). When saving your images, ensure that they have the filename cat_x.gif where x is the forumid number for the category that it will be used for.

Ensure that the category title and any description text is included in the image.

When you have created your images, upload them to a new directory in your images folder /images/categories/

For best results, your category background color should match that of the main background of your images, or blend with your background.



Step Two: Locating The Template Section That We Will Be Working With

To show the images that you have created, you need to edit one template: forumhome_forumbit_level1_nopost

In the template, find
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

This is the section of code that we will be working with.



Step Three: Setting The Main Back Ground

We need to change the background of the category strip to that of your image. So replace
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

with
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

This tells us that the background for the category will be the image cat_x.gif as created in step one.

You will notice that the colspan numbers have changed. This is to allow the collapse button to display correctly. We will deal with that shortly.



Step Four: Removing The Text And Ensuring The Link Still Works

As you have added the category title and description to the image, you don't want to be showing that again, however, you still need the image to be clickable to enter that category.

To do this, find
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and delete it. This stops the text from appearing over your image.

Now find
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and add after (on a new line)
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

This utilises the clear image used in various places in vBulletin to create the link for the category.

Notice the code

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

This is to create the final column that we removed in step three. This column will house the collapse button.



Step Five: Aligning The Collapse Button Better


As the collapse button now has it's own box, it needs to be aligned better to give a more professional look.

To do this find
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and replace it with
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

In combination with the code added in step four, this will align the button to the center of it's box.



Step Six: Adding A Row For Subforum Information

When you have clicked on your category, the next page displays information abour the subforums. As we have removed this information, this requires adding back in.

To do this find
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and add above it
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

This tells it to add an additional row if it is showing subforums. The width of this row is the full width of the forums.



Step Seven: Save And Tweak

All the edits are now complete, so save your template and have a look to see what it looks like. If you have any broken images, then you have either missed the images out when you created them, or you have not named them correctly.

You may find at this point that the images do not show correctly in either IE or FF and are partially hidden under your forums. To adjust this, simply change the height setting entered in step three.



Things To Remember

If you add any further categories to your site, you will also need to create additional images for them otherwise they will display broken images and break your style.

Try and keep to a plain background for your images so that you can use the same color for your tcat background in the style manager. This is so that the box with the collapse button blends with the image.




I hope that you find this useful. Feel free to ask any questions about this article.

If you have used this, and wish to show off your work, please let me have the URL to your forums and I will add your site to the article as a demo.

Demo Links
http://www.hiphopscrypt.com/forums/?styleid=24

Last edited by peterska2; 19 Jun 2006 at 03:26..
Views: 8637
Reply With Quote
Comments
  #2  
Old 19 Jun 2006, 18:09
vBSkins vBSkins is offline
 
Join Date: Jun 2006
Very Useful! Thanks for your post, I will be using this on many custom skins in the future!

-Vibe-
Reply With Quote
  #3  
Old 23 Jun 2006, 01:44
PennylessZ28 PennylessZ28 is offline
 
Join Date: Mar 2002
Real name: Mike
Ditto, nice work
Reply With Quote
  #4  
Old 23 Jun 2006, 03:00
snowlion snowlion is offline
 
Join Date: Mar 2005
thank for post, great job peterska2
Reply With Quote
  #5  
Old 23 Jun 2006, 04:12
Sangrun Sangrun is offline
 
Join Date: May 2006
Very nice work. That will come in handy for sure.
Reply With Quote
  #6  
Old 02 Jul 2006, 23:39
satfox360's Avatar
satfox360 satfox360 is offline
 
Join Date: Jun 2006
Thumbs up Demo link doesn't work.

Sounds like a great hack. Anyone else have a demo of how theirs looks?

Thanks
Reply With Quote
  #7  
Old 18 Jul 2006, 07:52
Ohiosweetheart Ohiosweetheart is offline
 
Join Date: Dec 2005
Real name: Peggy
I like! this is something I'll definitely practice on.
Reply With Quote
  #8  
Old 30 Aug 2006, 17:24
Klaymen TK's Avatar
Klaymen TK Klaymen TK is offline
 
Join Date: Aug 2006
Location: [Italy]
Real name: Norman
Great post man! Thanks!
Reply With Quote
  #9  
Old 11 Jan 2007, 15:40
vietfancy's Avatar
vietfancy vietfancy is offline
 
Join Date: Mar 2005
why have to go through all that for just that?

there're easier way...
Reply With Quote
  #10  
Old 11 Jan 2007, 17:38
Darat Darat is offline
 
Join Date: Aug 2004
Such as?
Reply With Quote
  #11  
Old 22 Jun 2008, 03:06
silly rabbit silly rabbit is offline
 
Join Date: Oct 2005
Real name: Kiera
Kerry-Anne,
I found these today - work very well in the postbit. Nothing new I know but when put together effective:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Wabbit
Reply With Quote
  #12  
Old 30 Jun 2008, 11:00
Goomzee Goomzee is offline
 
Join Date: Apr 2008
Real name: Tariq Rathore
there is any screen shots becouse above link is not working now anymore
__________________
Mortal Kombat Nexus Mortal Kombat X MKWallpapers MK Komics
Mortal Kombat Winamp skins, Animations, Movies, Dragon Renders on your 1 click
Pakistan 1st and Largest Mortal Kombat Gaming website
Reply With Quote
  #13  
Old 03 Jul 2008, 11:20
KURTZ KURTZ is offline
 
Join Date: Nov 2006
Real name: Christian
Originally Posted by Goomzee View Post
there is any screen shots becouse above link is not working now anymore
Ditto.
Reply With Quote
  #14  
Old 06 Aug 2008, 04:02
PGAmerica PGAmerica is offline
 
Join Date: Mar 2008
The demo link does not work. Do we have screencaps or another demo link?

--------------- Added 07 Aug 2008 at 04:00 ---------------

Originally Posted by Kerry-Anne
Step Six: Adding A Row For Subforum Information

When you have clicked on your category, the next page displays information abour the subforums. As we have removed this information, this requires adding back in.

To do this find
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and add above it
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

This tells it to add an additional row if it is showing subforums. The width of this row is the full width of the forums.
My template looks like this

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Your code does not match mine exactly. Where do I put it?

Last edited by PGAmerica; 07 Aug 2008 at 04:00. Reason: Auto-Merged DoublePost
Reply With Quote
  #15  
Old 07 Aug 2008, 23:35
PGAmerica PGAmerica is offline
 
Join Date: Mar 2008
Is there any answer to this?
Reply With Quote
Reply



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

Layout Options | Width: Wide Color: