Step 1: Download NiftCube from http://www.html.it/articoli/niftycube/NiftyCube.zip Basically You need only 2 files from this zip: niftycube.js and niftyCorners.css

Step2 : Copy niftycube.js to public/javascripts/ folder and niftyCorners.css to public/stylesheets/ folder in Rails

Step3:  As we are keeping css file in different directory than js file You need to change a line in niftycube.js 

Change line # 37 to l.setAttribute(”href”,”stylesheets/niftyCorners.css”);   This enables niftycube to include the correct stylesheet onthe fly in rhtml. Or If you prefer an easy way, simply copy niftyCorners.css to public/javascrips/ folder too. In that way you dont need to change js file.

Step4:  Include Js file using <%= javascript_include_tag “niftycube” %> in your rhtml file.

Step5: Finally in your javascript/application.js or page specific.js  Add
window.onload = function(){
Nifty(”div#content,div#nav”);
}
Where content, nav are div IDs I want to make rounded corners. You could add as many as you want and choose whether you want rounded corners allsides or only some side. See http://www.html.it/articoli/niftycube/index.html for excellent documentation.

My hatsoff to Alessandro Fulciniti writing excellent NiftyCube library and ofcouse to Rails team.

Leave a Reply