The Arcive of Official vBulletin Modifications Site.

puddlove · #1 04-13-2010, 01:54 PM

(Yes I've searched but the results weren't quite helpful enough alone so excuse me if it looks like I am beating a dead horse. Just need some help/advice

).

I've creating a new skin for my vBulletin and want the .tcat class (the thing used for category gradients, at the top of forums and threads etc.) to have rounded corners on both sides. The skin is going to be fluid width, which is no biggie. I created background images for the left and right hand side and then created new classes e.g. category_left, category_right, setting the width/height and rounded corner background images. Added the new classes where I wanted rounded corners. This works fine and works no matter what size resolution/screen you're viewing on which is what I wanted however, this was without table borders. I want to add a table border however when I do the table border goes around the .tcat class too and my category headers meaning I get a border around my rounded corners. Not very flattering at all

Settings the class borders to 0/none does nothing as I am talking about the main table outside borders (not the internal borders).

How can I overcome this fairly easily? I don't mind playing around a bit, but I know from other sites there IS a way to get fluid rounded corners and borders without having them interfere... I just don't know how to do it yet.

Any and all help appreciated, thanks guys

MathewC · #2 04-13-2010, 07:56 PM

Do you mean something like www.28forums.com have? or like vBulletin 4.0?

puddlove · #3 04-13-2010, 08:46 PM

Quote:

Originally Posted by DeadGeek

Do you mean something like www.28forums.com have? or like vBulletin 4.0?

Similar to the link you posted, yeah. See my attachment for an example (with the ugly border included!)

I guess I know a few ways to do this all myself, actually - but I don't wanna waste my time doing them the "wrong" way or finding out I could have done it way easier. I am looking for the easiest/quickest, most reliable (works on all major browsers) way of doing things!

Thanks for the reply.

vijayninel · #4 04-14-2010, 04:18 AM

I had exactly the same problem a few days back...now i cant member how I solved it but I did. I think it was by deleting some border setting in the forumhome templates.

Let me check it up and get back to you.

puddlove · #5 04-14-2010, 04:26 AM

Quote:

Originally Posted by vijayninel

I had exactly the same problem a few days back...now i cant member how I solved it but I did. I think it was by deleting some border setting in the forumhome templates.

Let me check it up and get back to you.

That would be very much appreciated, thank you

NoKSouLz · #6 04-14-2010, 10:26 AM

If your using IE then fluid rounded corners/borders dont really work.

There is a piece of code which can be added into css to round corners but only works with updated browsers such as FF, GoogleCrome, Safari

vijayninel · #7 04-14-2010, 10:43 AM

Quote:

Originally Posted by NoKSouLz

If your using IE then fluid rounded corners/borders dont really work.

There is a piece of code which can be added into css to round corners but only works with updated browsers such as FF, GoogleCrome, Safari

He is not using CSS ... he is using images/plain old HTML. those work on every browser unlike CSS.

He is making this for vb3 not vb4.

NoKSouLz · #8 04-14-2010, 11:28 AM

Quote:

Originally Posted by vijayninel

He is not using CSS ... he is using images/plain old HTML. those work on every browser unlike CSS.

He is making this for vb3 not vb4.

ah fair enough..

what seems to be the problem?

rockinaway · #9 04-17-2010, 07:29 AM

Have you tried NiftyCorners. CSS is used, but I am sure there will be a work around.

metalguy639 · #10 04-17-2010, 03:21 PM

You will have to take out the tborder part in your template code most likely. The easiest way to do this if you are using vb 3.8 or anything that is not 4.0 is to make the images that you want to use in photoshop, gimp, or whatever program you use to make images. Then you will need to splice it and then add it to 2 different templates and change some code in those templates for it to look right. You will need to know and understand html & css and be able to splice an image into 3 pieces. I can give you an example of what I did on my site.

1. Make your image for your category top in photoshop, gimp or whatever you use. It should be something similar to this:

This is a skin that I will be releasing soon to the public. So you want to either make something like that or you could something like this:

This is actual rounded corners I did some time ago.

Once you make your image and unless you are making it into a png I suggest that you pout a background color that is the same color as the background that the image will be on. You can see evidence of that in both pics above. Its easier and looks neater in the long run.

2. Now splice the image into 3 parts. A left side, right side & a middle part. Name them cat_left.gif, cat_right.gif, & cat_bg.gif.

3. Now you will need to change/add some code to your templates with this category image and you'll need to add it as a table to your templates. If you want tableless then you will have to look that up somewhere, but this will at least give you an idea of where & what to edit.

4. Login to your admincp and scroll down and find "Styles & Templates" Make sure that you expand the menu and look for "Style Manager" underneath the Styles & Templates. Click on the "Style Manager" link to open up your styles.

5. Find the style you want to edit in the list and the click on the drop down menu on the far right side and choose "Edit Templates".

6. Now click the <<>> button on the right side to expand the templates and then scroll down and find the FORUMHOME template. Double click to open it.

7. FIND:

Code:

<thead>
	<tr align="center">
	  <td class="thead">&nbsp;</td>
	  <td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
	  <td class="thead">$vbphrase[last_post]</td>
	  <td class="thead">$vbphrase[threads]</td>
	  <td class="thead">$vbphrase[posts]</td>
	  <if condition="$vboptions['showmoderatorcolumn']">
	  <td class="thead">$vbphrase[moderator]</td>
	  </if>
	</tr>
</thead>

AND DELETE IT FROM THE TEMPLATE.

8. NOW FIND:

Code:

$forumbits
<tbody>
	<tr>
		<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
			<a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
			<if condition="$vboptions['forumleaders']">&nbsp; &nbsp;
			<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if>
		</strong></div></td>
	</tr>
</tbody>
</table>
$forumhome_markread_script
<!-- /main -->

<br />
$ad_location[ad_forumhome_afterforums]
<br />

AND REPLACE WITH:

Code:

<!-- main -->
$forumbits
$forumhome_markread_script
<!-- /main -->

<br />
$ad_location[ad_forumhome_afterforums]
<br />

NOTE: If you still want to be able to mark the forum as read & have the view forum leaders at the bottom you can leave this code in and it would look like this instead:

Code:

<!-- main -->
$forumbits
<div align="center"><a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a>
			<if condition="$vboptions['forumleaders']">&nbsp; &nbsp;
			<a href="showgroups.php$session[sessionurl_q]">$vbphrase[view_forum_leaders]</a></if></div>
$forumhome_markread_script
<!-- /main -->

<br />
$ad_location[ad_forumhome_afterforums]
<br />

9. NOW FIND:

Code:

<!-- what's going on box -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr>
		<td class="tcat" colspan="2">$vbphrase[whats_going_on]</td>
	</tr>
</thead>

AND REPLACE WITH:

Code:

<!-- what's going on box -->
<!-- top category table setup -->
<table width="100%" style="background-image:url(path/to/your/category background image/here)" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" valign="top"><img src="path/to/your/category left image/here" alt=" " border="0" /></td>
<td align="left" width="100%" style="background-image:url(path/to/your/ left category image/here)" valign="left"><strong><div style="color:#FFFFFF;">$vbphrase[whats_going_on]</div></strong></td>
     <td align="right" valign="top"><img src="path/to/your/category right image/here" alt=" " border="0" /></td>
  </tr>
</table>
        <!-- End top category table setup -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

Be sure to replace the path/to/your/category background image/here with the path and your cat image names. If its the right image then the code before or after it will say align="right" if its the left cat it will say align="left".

10. Now Save the template.

11. Now open the forumhome_forumbit_level1_nopost template.

12. Highlight it all and delete it. Replace it all with this:

Code:

<br />
<!-- top category table setup -->
<table width="100%" style="background-image:url(path/to/your/cat background image/here)" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="41" height="30" align="left" valign="top"><img src="path/to/your/Left cat background image/here" alt=" " border="0" /></td>
    <td width="100%" style="background-image:url(path/to/your/cat background image/here)" valign="middle">
	
			
			<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>
			<div align="center">
			<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><b><font color="#003300">$forum[title]</font></b></a></div>
			<if condition="$show['forumdescription']"><div align="center" class="smallfont"><font color="#003300">$forum[description]</font></div></if>
			<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></div></if>
		
	
	</td>
     <td width="41" height="30" align="right" valign="top"><img src="path/to/your/right cat background image/here" alt=" " border="0" /></td>
  </tr>
</table>
        <!-- End top category table setup -->
        
        
        

<table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%" align="center">
<if condition="$childforumbits">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
<tr align="center">
	  <td class="thead">&nbsp;</td>
	  <td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
          <td class="thead" width="200">$vbphrase[last_post]</td>
          <td class="thead">$vbphrase[threads]</td>
	  <td class="thead">$vbphrase[posts]</td>
	  <if condition="$vboptions[showmoderatorcolumn]">
	  <td class="thead">$vbphrase[moderator]</td>
	  </if>
	</tr>
$childforumbits
</tbody>
</if>
</table>

Note that you will need to replace the path/to/your/cat image/here with the path to your images. You will also need to adjust the color in the css as well as the sizes of the images. (width & height)

SAVE THE TEMPLATE.

You are done and now you have category tops & the forums are separated from each other.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06980 seconds Memory Usage 2,290KB Queries Executed 14 (?)
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 (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (7)bbcode_code (4)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (10)post_thanks_box (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (10)postbit (1)postbit_attachment (10)postbit_onlinestatus (10)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 postbit_attachment tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!