PDA

View Full Version : Rounded Category Strip Corners


semann
07-16-2006, 03:04 PM
any one knows how to make Rounded Category Strip Corners??
Peggy
07-16-2006, 03:33 PM
nope, but I'd love to learn
semann
07-17-2006, 03:13 PM
no one knows??
Peggy
07-17-2006, 03:34 PM
bet Shelley does
Coder1
07-18-2006, 06:54 AM
It's one of those questions that is extremely difficult to answer. It's like asking how to make angled corners... you draw that shape. Same with a rounded corner. When creating your image, you draw a rounded corner with the tools provided in your graphics application.
Elsie
07-18-2006, 07:12 AM
is there no way to actually code a rounded corner for a table? cos if there is, surely that could be applied to the forum tables?
Noppid
07-18-2006, 09:28 AM
If you view the source code on a website that has rounded corners, the answer will be so obvious you'll kick yourself.

It's usually 3 tables. The header and footer table with the roundies above and below the content table.

The header and footer table are usually 3 elements. The two sides fixed size slammed left and right and a middle that is dynamic size.

So you need 5 images to pull it off. 4 if the corners are a pure plain color should work too.
Elsie
07-18-2006, 09:33 AM
oh my! i was close to being right!! blimey! :D
Peggy
07-18-2006, 09:48 AM
Lol
semann
07-18-2006, 10:33 AM
but that means youll have to edit css...?
Noppid
07-18-2006, 10:43 AM
but that means youll have to edit css...?

Well, yeah, you will need CSS too in most cases. But you can add the custom CSS in the custom CSS input box in the vB style manager.
semann
07-18-2006, 12:15 PM
i found this http://www.albin.net/CSS/roundedCorners/ i dont know if anyone could explain where to change it in forumhome
The Coldwood
07-18-2006, 08:30 PM
I know a way but you'll have to modify A LOT of code.
semann
07-18-2006, 08:35 PM
could you share it?
Peggy
07-18-2006, 08:46 PM
regular corners are looking real good to me right now, lol
The Coldwood
07-18-2006, 08:50 PM
Sure, I'll share it but just give me some time to write up a "proper" tutorial.
Peggy
07-18-2006, 08:58 PM
Very nice of you, Coldwood.

If you would, when you post it, please put it in the Graphics Discussion forum.

Thank you!
semann
07-18-2006, 09:05 PM
thanks a lot ive been lookin for that for weeks... i think we could make more proffessional works with that coding
The Coldwood
07-18-2006, 09:37 PM
Yeah, I know HOW it's done, I just need to make sure my technique works.
Coder1
07-19-2006, 07:27 AM
There are lots of intricate techniques, including tricks like using lots of tiny 1-pixel divs.

But by far the simplest is to just use images, like in this example (http://www.tgreer.com/rounded.html).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Rounded Corners</title>
<style type="text/css">
.nav_l
{
background: url(nav_l.gif) no-repeat top left;
}
.nav_r
{
background: url(nav_r.gif) no-repeat top right;
padding: 0px 0px 0px 10px;
color: #FFFFFF;
font-weight: bold;
font-size: 10px;
line-height: 25px;
height: 25px;
}
.nav_b
{
background: #663377 url(nav_b.gif) repeat-x;
}
</style>
</head>
<body>
<div class="nav_b"> <div class="nav_l"> <div class="nav_r">
</body>
</html>
semann
07-19-2006, 07:34 AM
we replace it in forumhome?
Coder1
07-19-2006, 08:12 AM
Maybe... of course, the CSS part you'd add in the "extra CSS" definitions. But in FORUMHOME, there are TD elements with the "tcat" class. If you placed the divs inside that TD, that might work. Experiment with it.
semann
07-19-2006, 09:06 AM
i coudnt do it... well if someone can please post
Coder1
07-19-2006, 09:42 AM
Ok, I've played around with it a bit, too. I haven't got it 100%, but I pretty sure that the templates you'd need to edit would be the forumbit templates.

The "tcat" style also interferes, so you'll need to edit that style definition.

Basically, you'll need to rewrite the section that looks like:



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


What I think you should do is modify the "tcat" style to use the left curved image as a background. Then, use a div to hold most of the rest of that code, the links, forum description, etc., with the "nav_b" graphic set as a backround for that div.

Move the "tcollapse" image and link into another div, this one with the nav_r image as a background.

With some fiddling around, that should work.
Elsie
07-27-2006, 01:43 AM
for anyone interested, as i am, in creating rounded corners for tables on non-vb sites i found this tutorial. i've read through it, and i can understand it so that proves how well it's written! ;)

Tutorial (http://www.htmlgoodies.com/tutorials/tables/article.php/3479841)
semann
07-27-2006, 08:29 AM
no we have to apply it in vBulletin!
Elsie
07-27-2006, 09:38 AM
i know that was the original question, but thought those of us who have non-vb websites (and by that i mean non-forum sites) as well might be able to make use of the info. :)
Peggy
07-27-2006, 09:51 AM
Very good, thanks Elsie.
miner
07-28-2006, 06:31 AM
Select your style> edit Templates> Forum Home Templates> forumhome_forumbit_level1_nopost>

Delete the whole and insert the following code:


<br />
<!-- top category table setup -->
<table width="100%" style="background-image:url($stylevar[imgdir_misc]/cat_back.gif)" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="140" height="27" align="left" valign="top"><img src="$stylevar[imgdir_misc]/cat_left.gif" alt=" " border="0" /></td>
<td width="100%" style="background-image:url($stylevar[imgdir_misc]/cat_back.gif)" valign="center">


<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="#FFFFFF">$forum[title]</font></b></a></div>
<if condition="$show['forumdescription']"><div align="center" class="smallfont"><font color="#FFFFFF">$forum[description]</font></div></if>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></div></if>


</td>
<td width="140" height="27" align="right" valign="top"><img src="$stylevar[imgdir_misc]/cat_right.gif" 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>
<!-- bottom table setup -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="70" align="left" valign="top"><img src="$stylevar[imgdir_misc]/bot_left.gif" alt=" " border="0" /></td>
<td width="100%" style="background-image:url($stylevar[imgdir_misc]/bot_back.gif)"></td>
<td width="70" align="right" valign="top"><img src="$stylevar[imgdir_misc]/bot_right.gif" alt=" " border="0" /></td>
</tr>
</table>
<!-- End bottom table setup -->
<div class="spacer"></div>

Now you have to create 6 new images and save in your misc folder and upload it:
cat_left.gif
cat_back.gif
cat_right.gif
bot_back.gif
bot_left.gif
bot_right.gifChange the size of the image in above code replace it with your actual image size <td width="140" height="27"
semann
07-28-2006, 08:27 AM
wow thanks!!! that the best thing you could