The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
|
|||||||
|
How To Use Category Specific Images For Your Category Strips
peterska2
Join Date: Oct 2003
Posts: 6,504
Manchester, UK
06-18-2006, 10:00 PM
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>
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>"> 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]"> 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>
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]"> 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">
Notice the code Code:
</td> <td class="tcat" align="center"> 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" Code:
<a href="#top" 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">
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>
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 
|
|
#3
06-22-2006, 11:44 PM
|
|||
|
|||
Ditto, nice work
|
|
#7
07-18-2006, 05:52 AM
|
|||
|
|||
|
I like! this is something I'll definitely practice on.
|
|
#8
08-30-2006, 03:24 PM
|
||||
|
||||
|
Great post man! Thanks!
|
 |
«
Previous Thread
|
Next Thread
»
|
|
All times are GMT. The time now is 09:33 AM.