Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > Programming Articles
Reload this Page How To Use Category Specific Images For Your Category Strips
FAQ Community Calendar Today's Posts Search

Reply
Page 2 of 2 1 2
 
Thread Tools
How To Use Category Specific Images For Your Category Strips
peterska2
Join Date: Oct 2003
Posts: 6,504

 

Manchester, UK
Show Printable Version Email this Page Subscription
peterska2 peterska2 is offline 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>
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
Reply With Quote
  #12  
Old 06-22-2008, 01:06 AM
silly rabbit silly rabbit is offline
 
Join Date: Oct 2005
Location: Atlanta/NYC
Posts: 92
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Kerry-Anne,
I found these today - work very well in the postbit. Nothing new I know but when put together effective:

PHP Code:
<!-- jpg image display conditionals --> 
<if condition="in_array($forumid, array(20))"> 
<if condition="in_array($bbuserinfo['usergroupid'], array(6,25,27))"> 
<center><img src="images/editor/spelling.gif"></center> 
</if></if> 
<!-- jpg image display conditionals --> 
Wabbit
Reply With Quote
  #13  
Old 06-30-2008, 09:00 AM
Goomzee Goomzee is offline
 
Join Date: Apr 2008
Location: Philippines
Posts: 588
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
there is any screen shots becouse above link is not working now anymore
Reply With Quote
  #14  
Old 07-03-2008, 09:20 AM
KURTZ KURTZ is offline
 
Join Date: Nov 2006
Location: Italy
Posts: 2,257
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Goomzee View Post
there is any screen shots becouse above link is not working now anymore
Ditto.
Reply With Quote
  #15  
Old 08-06-2008, 02:02 AM
PGAmerica PGAmerica is offline
 
Join Date: Mar 2008
Posts: 405
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
The demo link does not work. Do we have screencaps or another demo link?

--------------- Added [DATE]1218078055[/DATE] at [TIME]1218078055[/TIME] ---------------

Quote:
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
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.
My template looks like this
Code:
</table>
 
<br />
 
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

<tbody>
    <tr>
        <td class="tcat" style="background:url(images/categories/cat_$forumid.gif) no-repeat;" colspan="<if condition="$vboptions[showmoderatorcolumn]">5<else />4</if>" height="75">
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><img src="/forums/images/clear.gif" width="100%" height="20" border="0"></a>
    </td>
<td class="tcat" align="center">
            <if condition="$childforumbits">
        <a 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>
            </if>
        </td>
    </tr>
    <tr align="center">
      <td class="thead" width="5%">&nbsp;</td>
      <td class="thead" width="50%" align="$stylevar[left]">$vbphrase[forum]</td>
      <td class="thead" width="25%">$vbphrase[last_post]</td>
      <td class="thead" width="10%">$vbphrase[threads]</td>
      <td class="thead" width="10%">$vbphrase[posts]</td>
      <if condition="$vboptions['showmoderatorcolumn']">
      <td class="thead" width="0%">$vbphrase[moderator]</td>
      </if>
    </tr>

</tbody>
<if condition="$childforumbits">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
$childforumbits
</tbody>
</if>
Your code does not match mine exactly. Where do I put it?
Reply With Quote
  #16  
Old 08-07-2008, 09:35 PM
PGAmerica PGAmerica is offline
 
Join Date: Mar 2008
Posts: 405
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Is there any answer to this?
Reply With Quote
  #17  
Old 08-12-2008, 07:32 PM
PGAmerica PGAmerica is offline
 
Join Date: Mar 2008
Posts: 405
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hello? Anybody Here?
Reply With Quote
Reply
Page 2 of 2 1 2

« Previous Thread | Next Thread »

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
Forum Jump


All times are GMT. The time now is 09:02 AM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04566 seconds
  • Memory Usage 2,286KB
  • Queries Executed 23 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (14)bbcode_code
  • (1)bbcode_php
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (7)post_thanks_box
  • (7)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (7)post_thanks_postbit_info
  • (6)postbit
  • (7)postbit_onlinestatus
  • (7)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete