vb.org Archive - How To Use Category Specific Images For Your Category Strips

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

Code:

<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">

            <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>

            <a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>

            <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>

            <if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>

        </td>

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

Code:

colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">

with

Code:

style="background:url(images/categories/cat_$forumid.gif) no-repeat;" colspan="<if condition="$vboptions[showmoderatorcolumn]">5<else />4</if>" height="[high]height of images[/high]">

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

Code:

<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>

            <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>

            <if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>

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

Now find

Code:

style="background:url($stylevar[imgdir_misc]/cat_$forumid.gif) no-repeat;" colspan="<if condition="$vboptions[showmoderatorcolumn]">5<else />4</if>" height="[high]height of images[/high]">

and add after (on a new line)

Code:

<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><img src="clear.gif" width="100%" height="20" border="0"></a>

    </td>

<td class="tcat" align="center">

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

Notice the code

Code:

    </td>

<td class="tcat" align="center">

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

Code:

<a style="float:$stylevar[right]" href="#top"

and replace it with

Code:

<a href="#top"

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

Code:

    </td>

    </tr>

</tbody>

<if condition="$childforumbits">

and add above it

Code:

<if condition="$show['subforums']">

</td>

</tr>

<tr>

<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">

    <div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>

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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01203 seconds Memory Usage 1,747KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (11)bbcode_code_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: