Rounding Corners Using JQuery

by Paulo Lopes — last modified Jul 09, 2009 10:56 PM

This jQuery plugin will easily create beautifully rounded corners. No images or obtrusive markup necessary.

It's now possible to quickly and easily add rounded corners to your site. In the past, tricks like curvycorners were used, but the effect was global. Now we can control when and where the rounding effect occurs. For the purposes of this section, we are going to refer to the following JQuery solution:

http://www.atblabs.com/jquery.corners.html

It's worth stating that it has the following features:

Less than 8000 bytes after yui compression.
Beautiful and fast anti-aliasing for older or stubborn browsers.
Degrades well for browsers with javascript turned off.
Native browser corners used on Safari, iPhone, and Firefox 3.
Form and anchor buttons are easily styled and rounded.
Documentation and test coverage (this file).

And, it works with:

iPhone
Chrome
Firefox
Safari 2+
Opera 9.0+
Internet Explorer 6+
and probably more...

Get Started

First, you need a theme product.

Then, you need to download the code from here: http://plugins.jquery.com/project/corners.
(This tutorial was written using the 1.2 version.)

In your theme product, you want to drop the jquery.corners.js file in your skins/templates folder or similar. You also want to take this code and create a new javascript file which we'll call rounded.js and place in our skins/templates folder:

jq(document).ready(function(){
  jq('.rounded').corners();
  jq('.rounded').corners(); /* test for double rounding */
  jq('table', jq('#featureTabsContainer .tab')[0]).each(function(){jq('.native').hide();});
  jq('#featureTabsContainer').show();
  tab(0);
});
function tab(n) {
  jq('#featureTabsContainer .tab').removeClass('tab_selected');
  jq(jq('#featureTabsContainer .tab')[n]).addClass('tab_selected');
  jq('#featureElementsContainer .feature').hide();
  jq(jq('#featureElementsContainer .feature')[n]).show();
}

You may notice that it is similar to the code at the top of the jQuery.corners.html file, but it has been modified slightly, as Plone 3.1.x and above know about jQuery from the "jq" designation, not from the $ designation. (You can use this technique in older Plone sites, but you'll have to add jQuery support.)

Then, we need to create a portlet (or other page template that knows about main_template). In this case, we will create a portlet called test.pt and we will insert the following code:

<html xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      i18n:domain="onenorthwest">
<body>
<div metal:define-macro="portlet">
    <dl class="portlet" id="portlet-rounded-corners">
        <dt class="portletHeader">
        </dt>
<dd>
<div style="background-color:#acc; padding:10px" class="rounded">
  Example with different x and y sizes.
</div>
<script>jq(document).ready( function(){
  jq('.rounded').corners("30px 10px");
});</script>
</dd>
    </dl>
</div>
</body>
</html>

Then, we modify our theme product's javascript registry file, jsregistry.xml file. This file is located in your theme's profiles/default directory. Add the following code:

<?xml version="1.0"?>
<object name="portal_javascripts">
 <javascript cacheable="True" compression="safe" cookable="True"
    enabled="True" expression="" id="jquery.corners.js"
    inline="True"/>
 <javascript cacheable="True" compression="safe" cookable="True"
    enabled="True" expression="" id="rounded.js"
    inline="True"/>
</object>

At this point, you can either install your theme product if you have not already done so, or you can import the javascript GenericSetup step through the ZMI in portal_setup. Make sure you choose your theme product's profile before you import that step.

Next, put your site's javascripts into debug mode via portal_javascripts.

Finally, we need to install the portlet. This particular portlet was created as a Classic portlet, so if you go to http://www.mysite.com/@@manage-portlets (where mysite is the name of your Plone site), and add a Classic portlet named "test", you will instantly see the results.

Additional Customization

There are a number of options that can be applied to your portlet, and these are all documented here: http://www.atblabs.com/jquery.corners.html

Attention

Rounding Corners Using JQuery

Get Started

Additional Customization

Contribute