Rounded edges or curvy corners are always a trendy style in web designing. Early stages we used images to make the edges rounded, later it replace with css or javascript alternatives. Among all the easiest method to use Magento curvycorners is curvycorners.js. Just include this javascript file and some 4-5 lines of code, your job is done. You can find examples and usage guide in www.curvycorners.net.
I am not going to explain much about curvy corners here, you just go to the above mentioned website and explore yourself more on that. Here i am going to explain how to use this with a magento themes.
For adding curvycorners.js, download the file ,extract it and copy curvycorners.js (curvycorners.src.js) to
<Magento installation>/js/lib
After this go to your theme directory and edit the page.xml file. You can find your page.xml in
/app/design/frontend/defaul//layout/page.xml
Here we will add the code for calling javascript. You can see a lot of js calls already there on the page.xml. Add these line to your page.xml file
<action method=”addJs”><script>lib/curvycorners.js</script></action>
So the new javascript will be called. There is few more steps to curve your html boxes in Magento. Hope you found how to use curvycoreners from its site (Refer it how to use section). There are some lines of code to add to the header section of the code. Here i suggest you to add that code to a new .js file and include it like what we did for curvycorners.js.
addEvent(window, ‘load’, initCorners);
function initCorners() {
var settings = {tl: { radius: 0 },tr: { radius: 10},bl: { radius:10 },br: { radius: 0 },antiAlias: true}
var settings2 = {tl: { radius: 10 },tr: { radius: 10 },bl: { radius: 10 },br: { radius: 10 },antiAlias: true}
var settings3 = {tl: { radius: 4 },tr: { radius:4 },bl: { radius: 4},br: { radius: 4 },antiAlias: true}
var settings4 = {tl: { radius: 5 },tr: { radius: 5 },bl: { radius: 0 },br: { radius: 0 },antiAlias: true}
curvyCorners(settings, “.footer”);
curvyCorners(settings2, “.col-main”);
curvyCorners(settings3, “.registered-users,.new-users”);
curvyCorners(settings4,”.breadcrumbs”);
}
The file content will be like this. So now you are done. This post is not of course to teach curvycorners, so if you have any doubt with magento curvycorners please visit www.curvycoreners.net and explore more.
