Welcome Guest [Log In] [Register]
Viewing Single Post From: Adding Smooth Corners
Nicola Dec 10 2007, 04:22 PM
Darth Vader's Sewing Instructor

 Adding Smooth Corners

Firstly, this isn't my script, it's Seth's. This jQuery takes advantage of the script he created to give the smooth corners to areas on the blog.

Please note that adding this to the #logo, #submenu or #nav will obscure the drop-down lists depending on the placement of the <!-- TOP MENU -->


See the full extent of this in play here. Select 'Smooth Corners via jQuery' from the Theme selector. You'll immediately see the possibilities that are available when using this script.



The jQuery Required

All you need to do is add this to the end of your theme layout (or 'Above the Copyright' in the Board Template )

The jQuery Required
 

<script type="text/javascript">
//<![CDATA[
$("#submenu").corner("15px");
//]]>
</script>



  • #submenu: You'll insert the class or ID you wish to add the effect to. On the test board you'll see that I've added it to #logo, #submenu, #submenu_bar, #wrap and .category.
  • 15px: Input the radius of the corners. Alternatively you can set the radius per corner using this method:
    Example 1
     

    $("#submenu").corner("15px 20px 25px 30px");

    Top - Right - Bottom - Left respectively.
    Or:
    Example 2
     

    $("#submenu").corner("15px 20px");

    Top/bottom - Right/Left respectively.


Adding more corners

If you want to do it in several places, just simply add them onto a new line.
Code used on test board
 

<script type="text/javascript">
//<![CDATA[
$("#wrap").corner("15px");
$("#logo").corner("15px 40px 15px 40px");
$("#submenu").corner("15px");
$("#submenu_bar").corner("15px");
$(".category").corner("15px");
//]]>
</script>




Obviously this is pretty nifty, if used well you could eradicate the need for image borders. It works in every commonly used browser. It even works in IE (if you've over-gasped, I apologise)
Now there is no excuse for not doing something quite pretty with your themes :P.

Enjoy!
Offline Profile Quote Post
Adding Smooth Corners · User Created Codes