Nifty Corners: rounded corners without images

Posted by jay on October 3, 2006 under Programming | Be the First to Comment

If you want to have some cool rounded corners on your site but you don't want to go through the trouble of either creating the 4 rounded corner images then Nifty Corners is your answer.

See the search box above. I got the cool rounded corner effect with very little code.
*note - I've changed my theme again and I am not using NiftyCorners here. *

First I create the JavaScript link to the *.js file:

PLAIN TEXT
HTML:
  1. <script type="text/javascript" src="http://gotfoo.org/js/niftycube.js"></script>

If you are using WordPress you will need to be sure that niftycube.js and niftycube.js are in the same directory as your template.

Next up is adding a window.onload event to the header.php and invoke the Nifty function by passing it a list of elements#id's to convert:

PLAIN TEXT
HTML:
  1. <script type="text/javascript">
  2. window.onload=function(){
  3. Nifty("p#searchbox,p#toplinks");
  4. }
  5. </script>

As you can see I am passing it a <p> tag it's respective id searchbox.

It's that easy!!

home top