web analytics

Blog

How to use curvycorners in Magento themes

Tags: curvycorners in Magento themesCustom javascript in Magento themesHow to

Published on: June 25, 2010 by Arnold Pablo

How to use curvycorners in Magento themes

Scenario:

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.

Category : Designing, Linux, magento

Arnold Pablo

Arnold Pablo

Technology always fascinated me and continues to do so. I started my career back in 2004 as a Junior System Admin and worked in various capacities both in technical and managerial roles. I love to experiment and try out new OSS projects and in free time, go for cycling to the interiors of God's own country, Kerala!

You may also read:

Comments

Add new commentSIGN IN

  • Wouldn’t it be easier to simply use the css method of calling your corners? No extra javascript, and will actually work without the script when IE finally supports them.

Let's Connect

Get new updates

Categories

$0.000 items