Rounded Header

[chilllax]

<a href="http://www.halogrid.com/hgforum/" target="_blank">http://www.halogrid.com/hgforum/</a>

How would I go about making the top part of the white space round like this forum's header, just above the header image?

[Princeton]

On that site, they just created a header image with rounded corners.

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

[chilllax]

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. : )

[slappy]

Here are some articles about making rounded corners:

Nifty Cube

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

CSS Design: Creating Custom Corners & Borders Part II

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

Bullet-Proof Rounded Corners

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

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:

http://seky.nahory.net/soubory/0504-kulate-rohy/rounded-corners.js

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:

margin
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.
border
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.

Regards,

[chilllax]

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.

[a simple fa?ade]

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

class="rounded-corners"

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

[Phooey]

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!

[xcingix]

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.
<if condition="$forum[forumid] != 106">
</table>

<br />

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
</if>
<tbody>
<tr>
<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>
</tr>
<tr align="center">
<td class="thead" width="5%">&nbsp;</td>
<td class="thead" width="50%" align="$stylevar[left]">$vbphrase[forum]</td>
<td class="thead" width="25%">$vbphrase[last_post]</td>
<td class="thead" width="10%">$vbphrase[threads]</td>
<td class="thead" width="10%">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead" width="0%">$vbphrase[moderator]</td>
</if>
</tr>
</tbody>
<if condition="$childforumbits">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
$childforumbits
</tbody>
</if>

[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