The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#1
|
|||
|
|||
Fluid Rounded Corners and Borders
(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 |
#2
|
|||
|
|||
Do you mean something like www.28forums.com have? or like vBulletin 4.0?
|
#3
|
|||
|
|||
Quote:
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. |
#4
|
||||
|
||||
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. |
#5
|
|||
|
|||
That would be very much appreciated, thank you
|
#6
|
|||
|
|||
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 |
#7
|
||||
|
||||
Quote:
He is making this for vb3 not vb4. |
#8
|
|||
|
|||
Quote:
what seems to be the problem? |
#9
|
|||
|
|||
Have you tried NiftyCorners. CSS is used, but I am sure there will be a work around.
|
#10
|
|||
|
|||
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"> </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> 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']"> <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 /> Code:
<!-- main --> $forumbits $forumhome_markread_script <!-- /main --> <br /> $ad_location[ad_forumhome_afterforums] <br /> 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']"> <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 /> 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> 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"> 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"> </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> SAVE THE TEMPLATE. You are done and now you have category tops & the forums are separated from each other. |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|