Rounded corners, how?

[junglejamgames]

Hi All

I`ve seen board with rounded coners on their background, how is this done?

Kind regards Dean

[thewitt]

http://html.tucows.com/designer/tips/roundtables.html

[junglejamgames]

Thanks thewitt but looking at the links content and not knowing VB well enough I`ll pass on it. :)

[Steve Machol]

Here's how I did it on my forums. You'll need four gifs for the corners, then add this to your header and footer templates:



Add to header template after: <!-- content table -->

<!-- rounded corners header - works with IE and NS -->
<table width="{ tablewidth }" border=0 cellpadding=0 cellspacing=0 align="center" bgcolor="{ categorybackcolor }">
<tr>
<td align=LEFT width="1%" nowrap height="20" bgcolor="{ categorybackcolor }"><img src="{ imagesfolder }/corner1.gif" width="20" height="20"></td>
<td align=Right width="99%" bgcolor="{ categorybackcolor }" valign="top" height="20"><img src="{ imagesfolder }/corner2.gif" width="20" height="20"></td>
</tr>
</table>
<!-- /rounded corners -->


Add to footer template after: </table>

<!-- rounded corners footer - works with IE and NS -->
<table width="{ tablewidth }" border=0 cellpadding=0 cellspacing=0 align="center" bgcolor="{ categorybackcolor }">
<tr>
<td align=LEFT width="1%" nowrap height="20" bgcolor="{ categorybackcolor }"><img src="{ imagesfolder }/corner3.gif" width="21" height="21"></td>
<td align=Right width="99%" bgcolor="{ categorybackcolor }" valign="top" height="20"><img src="{ imagesfolder }/corner4.gif" width="20" height="20"></td>
</tr>
</table>
<!-- /rounded corners -->

Be sure to remove the spaces after each { and before each }. I needed to add these for this to display correctly.

[junglejamgames]

Steve thanks alot, I`ve sorted it out and I`ve learnt alot too. :)

[Tim Mousel]

Here's a good tutorial:

http://www.webmasterbase.com/article.php/392

[Thomas P]

Hi,

I did it a bit different, in forumhome, forumdisplay_threadslist and showthread added:



<tr>
<td align="left" width="6"><img src="images/corner_left.gif">
</td><td bgcolor="#8080A6" width="99%"><img src="images/space.gif" width="1" height="1"></td>
<td align="right" width="6"><img src="images/corner_right.gif"></td>
</tr>



right into the main table before everything else.

I really like smachol's round tables, but my forum has a transparent table background... http://mcseboard.de

cu,
-Tom

[Steve Machol]

Very nice looking forums Thomas! :)

One advantage to putting the rounded corners in the header and footer templates is that this look will carry over to every page on the board; search, faq, member list, calendar, user cp, etc.

[Steve Machol]

Just to let everyone know there was a slight problem with the image width and height in my example code. I change these from 21x21 to 20x20 to match the actual size of the gifs I use.

[Thomas P]

Originally posted by smachol
Very nice looking forums Thomas! :)

One advantage to putting the rounded corners in the header and footer templates is that this look will carry over to every page on the board; search, faq, member list, calendar, user cp, etc.

Thanks, Steve :)

Yes, you're right, personally I would love to have the ability to change the category strip by tweaking one line of code, which would be used everywhere...
Unfortunately there's a cellpadding=4 or so in most of the table headers, so entering a background=xyz.gif looks ugly.

cu around,
-Tom

[Kreker]

can some one post the 4 gif corner?
thanks!

[Steve Machol]

Originally posted by Kreker
can some one post the 4 gif corner?
thanks!

What '4 gif corner' are you talking about? Every set is different depending on the colors used.

[Kreker]

I haven't it and I don't say how to made they

I need the blank corner

[Steve Machol]

There's no such thing as a 'blank' corner. To make your own, click on the link in thewitt's message above.

[Kreker]

I can't understand, I have to add this in the header and the footer and so......????
where are the gir corner1, corner2 etc etc??????



Originally posted by smachol
Here's how I did it on my forums. You'll need four gifs for the corners, then add this to your header and footer templates:



Add to header template after: <!-- content table -->

<!-- rounded corners header - works with IE and NS -->
<table width="{ tablewidth }" border=0 cellpadding=0 cellspacing=0 align="center" bgcolor="{ categorybackcolor }">
<tr>
<td align=LEFT width="1%" nowrap height="20" bgcolor="{ categorybackcolor }"><img src="{ imagesfolder }/corner1.gif" width="20" height="20"></td>
<td align=Right width="99%" bgcolor="{ categorybackcolor }" valign="top" height="20"><img src="{ imagesfolder }/corner2.gif" width="20" height="20"></td>
</tr>
</table>
<!-- /rounded corners -->


Add to footer template after: </table>

<!-- rounded corners footer - works with IE and NS -->
<table width="{ tablewidth }" border=0 cellpadding=0 cellspacing=0 align="center" bgcolor="{ categorybackcolor }">
<tr>
<td align=LEFT width="1%" nowrap height="20" bgcolor="{ categorybackcolor }"><img src="{ imagesfolder }/corner3.gif" width="21" height="21"></td>
<td align=Right width="99%" bgcolor="{ categorybackcolor }" valign="top" height="20"><img src="{ imagesfolder }/corner4.gif" width="20" height="20"></td>
</tr>
</table>
<!-- /rounded corners -->

Be sure to remove the spaces after each { and before each }. I needed to add these for this to display correctly.

[Kreker]

it can't find the image

I have to make and upload'?

[Steve Machol]

As I said, you need to make your own corner gifs. And you can learn how to do this by clicking on thewitt's link.

[Loki]

ok dumb question. I see that you said to enter that code in the header and footer template. but where is that? I have created the .gifs already just cant find what to edit.

[Steve Machol]

Admin CP -> Templates -> Edit -> Expand List -> Header, then Footer

[Loki]

thank you!! :)

[dojo]

Is there any chance to get the template pages to be downloaded on the PC? I worked for 3 hours already and cannot make those round corners. Not to mention I cannot export the CSS so that I can make the changes, I have to reload that page in the admin panel for 10 times to make some changes.

One link to the tutorials is not working and there seems to not be a chance to make those borders. Should you be able to offer me some more direction to decent tutorials that could cover this, I thank you in advance.

[slappy]

This is from a post I previously made, which you would have found if you used the Search Button. ;)

You might want to check this document out. It's titled:

Rounded Corners without Images: A Nifty Corners Inspiration

It's found here and it will teach you "a method of creating rounded corners of an element without using images, just with a piece of JavaScript and few drops of CSS." It provides the technique and the javacode to do this.

http://seky.nahory.net/2005/04/rounded-corners/

Here's a discussion of Rounded Corners using images and CSS.

http://kalsey.com/2003/07/rounded_corners_in_css/

Here's another title: CSS and round corners: Boxes with curves

http://www.webcredible.co.uk/user-fr...rs-boxes.shtml

Here's another titled: Nifty Corners: rounded corners without images

http://www.html.it/articoli/nifty/index.html

This artiles links earlier articles by the author with yet more code and samples.

Much to be found on this subject with some basic searching on the web.

Regards,

[dojo]

I have searched previously, this is how I got to this thread ;)

http://www.webcredible.co.uk/user-fr...rs-boxes.shtml
does't work.

I didn't make myself clear unfortunately and I apologise. I need a tutorial for VB not "normal" sites. I can "fool" the template system with the rounded corners IF i knew where to put that code.

I tried what was said in here, and didn't get to anything. My page is already modified since I try to put a photoshop made design into it. But I don't know what template bits to modify (tried the header - footer thing, doesn't work). I need to have this made on the index page (and have the main categories separated (not "glued" as in the default style) and also put a rounded table instead of the "normal" squared corner one. And I have searched the web and even tried modifying the theme as the admin panel lets me, but with no avail. And that means almost 5 hours of doing nothing. I am not used to not be able to solve such things, that would explain my "grumpy" attitude. I just wished there was a simpler way :)

[slappy]

Here is some additional information I posted over on vBulletin.org:

CSS Design: Creating Custom Corners & Borders Part II

http://www.alistapart.com/articles/customcorners2

Bullet-Proof Rounded Corners

http://www.albin.net/CSS/roundedCorners/

This last one uses a javascript which is downloadable here:

http://seky.nahory.net/soubory/0504-...ded-corners.js

This last one is a javascript to produce rounded corners to elements where you want to have the rounded corners. You open the rounded-corners.js file copy and saved that then uploaded the javascript to your server, generally to your /clientscript folder. Then you add to the appropriate template: "<script src="rounded-corners.js>" and "Add the rounded class to all elements, that should have the rounded corners.

a simple façade added:

Look in your templates and find elements that ought to be rounded, and add the following inside the corresponding HTML tags:


HTML Code:
class="rounded-corners" This is what calls the CSS for the correct style settings with the javacode in the download.

You can find additional information on vBulletin.org by using the Search button there and entering: rounded corners

Regards,