Register Members List Search Today's Posts Mark Forums Read

Thread Tools
Old 05 Jul 2006, 23:58
chilllax chilllax is offline
Join Date: Nov 2005
Rounded Header

How would I go about making the top part of the white space round like this forum's header, just above the header image?
Halo Trilogy Forum ~ free email to all members
Reply With Quote
Old 07 Jul 2006, 16:43
Princeton's Avatar
Princeton Princeton is offline
Join Date: Nov 2001
Real name: Joe Velez
On that site, they just created a header image with rounded corners.

If you do that you will have to modify the header template.
Former Staff Member

Latest Articles:
Liquid Layout = Less Ad Revenue?
How to Monetize Your Site
Improve Web Page Performance
How To Write For The Web

If it needs instructions, there's room for improvement.
Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them!
Reply With Quote
Old 07 Jul 2006, 22:39
chilllax chilllax is offline
Join Date: Nov 2005
oh, the white are takes the forum of the header? I thought there was some code or css thing I was going to have to modify. That makes things alot easier, if I understand what you saying right.

Thanks princeton. : )
Halo Trilogy Forum ~ free email to all members
Reply With Quote
Old 09 Jul 2006, 04:11
slappy slappy is offline
Join Date: Apr 2003
Here are some articles about making rounded corners:

Nifty Cube

CSS Design: Creating Custom Corners & Borders Part II

Bullet-Proof Rounded Corners

There's also one named:

Rounded corners without images A Nifty Corners Inspiration

which I have saved and downloaded on my computer, but is producing a 404 on the net at the moment. It uses a javascript which is downloadable here:

The instructions provided are:

Instructions for use
Link the JavaScript rounded-corners.js to the page (by adding the <script src="rounded-corners.js"></script> to the header of your page).
Add the rounded class to all elements, that should have the rounded corners. You can set up some parameters of the corners by adding another classes as well, see bellow.
On the very bottom of the page call the JavaScript function make_corners(). (It's better than calling it by the onload event of the page, because it waits till all the pictures are loaded.)
See a simple example of rounded corners.

Setting up the parameters of corners
For each element with the rounded class you can set additional parameters through another classes. The layout can be set up through CSS as well, using the classes rounded (the element with rounded corners), rc-container-top and rc-container-bottom (containers for the rounding strips), rc-inner a rc-level-NN (rounding strips; NN is i number in range 0 up to corner radius).

Names of the parameters classes should have name in the form rc-[property_name]-[property_value]. Use 1 / 0 values for booleans (you can omit the 1 value). All the parameters have a corresponding JavaScript variable with the name $rc_[property_name], in the rounded_corners() function. The next table shows an overview of all the parameters.

CSS Class name JS variable Description
rc-radius-[integer] $rc_radius Sets the radius of corners.
rc-top-[0|1] $rc_top Switches rounding of upper corners.
rc-bottom-[0|1] $rc_bottom Switches rounding of lower corners.
rc-right-[0|1] $rc_right Switches rounding of right corners.
rc-left-[0|1] $rc_left Switches rounding of left corners.
rc-selfcolor-[RRGGBB] $rc_self_color Sets color of the rounded element.
rc-parentcolor-[RRGGBB] $rc_parent_color Sets the background color (color of the parent element).
rc-inheritstylecolors-[0|1] When enabled, the script sets no color, which means that CSS defined colors are used.
rc-antialiased-[0|1] $rc_antialiased Adds border to the strips which makes the corners look a bit anti-aliased. (But it's no real anti-aliasing.)
Works with rc-method-margin only.
Warning: doesn't work with MSIE when colors are set like white or #FFF and not #FFFFFF or rgb(255,255,255). (Execution crashes in such case and no rounding is produced.)
rc-antialiasedcf-[0-1] $rc_antialiased_cf Anti-aliasing ratio. The closer to 1, the closer is the color of anti-aliasing border to the background color.
rc-compact-[0|1] $rc_compact Sets negative margins to the containers, so that the rounded element doesn't get bigger.
Sometimes buggy in MSIE.
rc-automargin-[0|1] $rc_auto_margin Sets negative margin to compensate padding of the rounded element.
Does not work in MSIE.
rc-method-[margin|border] $rc_method Sets the method of drawing rounded corners.
rc-border $rc_border Creates rounded borders. For instructions about how to use it see example of rounded borders.

The rc-method property is of importance, as it determines the method of drawing rounded corners:

Draws the container with the same background color, as the parent element. The strips have the color of rounded element and variable margin margin. You can use the “anti-aliasing” in this case.
Background of the container and strips remains transparent, but the strips have variable with borders of the same color, as the parent element. This method is useful, when you have an image as background of the rounded element.
See an example of using parameters of rounded corners.

How does it work?
First the script finds all the elements that should be rounded (using the find_class() function) Then it checks the rounded corners parameters. When a property is not found, it uses the default value (see the first line of rounded_corners()function). Then it inserts the rounding container and strips. Their color is determined by the function get_current_style(), which unfortunately doesn't work in KHTML browsers (like Safari and Konqueror) and older versions of Opera (prior to 7.5) as these browser don't support the getComputedStyle() method of defaultView object. However, for these browser you can use the “manual setting” of colors or just leave the corners square till they start to support it. (The time should come, as this is a part of DOM standard.)

All comments, improvements, suggestions etc. are welcome. You can use all the code, ideas etc. any way you want. Enjoy.

Reply With Quote
Old 09 Jul 2006, 15:10
chilllax chilllax is offline
Join Date: Nov 2005
Thank you so much slappy I really appriciate that. But unfortunatley I dont know much about css.

What I have done is opened the rounded-corners.js file copied and saved that then uploaded it to my server. Then I added this to my header template like you said. "<script src="rounded-corners.js"

Here is where I got lost.
Add the rounded class to all elements, that should have the rounded corners.
I have no idea how to do that.
Halo Trilogy Forum ~ free email to all members
Reply With Quote
Old 09 Jul 2006, 16:24
a simple façade's Avatar
a simple façade a simple façade is offline
Join Date: Jun 2006
Location: Atlanta
Real name: Will
Look in your templates and find elements that ought to be rounded, and add the following inside the corresponding HTML tags:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

This is what calls the CSS for the correct style settings.

Technician for MTGNews
Technician for Magic Deck Vortex
IRC Op and Retired Global Moderator for MTGSalvation
Reply With Quote
Old 17 Nov 2006, 13:47
Phooey Phooey is offline
Join Date: May 2004
Real name: Evan
I'm trying to get this to work on my forum, but having trouble. Ideally, I'd like to have every table on the forum have a 5px rounded corner, but I can't figure out how to implement this. Is there any way to do this through the table border main css?

I currently have the rounded-corners.js in my clientscript folder, so my header code reads <script src="clientscript/rounded-corners.js"></script> but I can't figure out how to get it to work globally.

Thanks in advance!
Chai Life | Display Lighting | Reaction GIFs

Last edited by Phooey; 17 Nov 2006 at 14:02.
Reply With Quote
Old 20 May 2007, 04:20
xcingix's Avatar
xcingix xcingix is offline
Join Date: Feb 2006
Real name: Daniel Michel
This is VERY confusing. I have no trouble installing ANY other mod, but this is just way too confusing.
Is there any way someone can post a step>by>step for each table like tcat, postbit, etc.?

For example, where woul dI put the code here if I wanted to round off the category stips.

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Last edited by xcingix; 20 May 2007 at 04:25.
Reply With Quote
Old 01 Apr 2009, 05:32
ZiG ZiG is offline
Join Date: Oct 2002
Real name: Zig
i am trying to get this done on my forums, and man is this just confusing.

all of these great scripts have come out to use javascript that automatically rounds the corners of the div elements, but i don't understand how that would work for vbulletin when everything is tables. i guess ill just have to wait until vb4 comes out, which is pretty dissapointing.

if anyone can help with this, or better explain how to go about using one of these scripts like nifty or the various others out there with vb; getting the category strips, or the tableheader/footers rounded this would be helpful and very much appreciated.

cause i can't understand this or any of the threads i've searched on this topic across many vbulletin forums and google
Reply With Quote

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Thread Tools

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

New To Site? Need Help?

All times are GMT. The time now is 12:23.

Layout Options | Width: Wide Color: