Update: I have replaced Liquid Canvas with jQuery Corner script. Even though the rounded corners are not as smooth (in IE), jQuery Corner script is lighter, easier to use and has more design choices.
Thanks to Nitin for his comment and letting me know about it.
Liquid Canvas is a JavaScript library which allows you to draw inside an HTML canvas element with an easy yet powerful description language.
Spent most of the day today playing around w/ Liquid Canvas on this blog. I have added rounded corners to individual posts on the front page, single post view and page view. Tested them in IE 6, IE 7, IE 8 and Firefox.
Screenshots:
Here’s how I implemented it on this Builder powered WordPress blog:
Copy header.php from Builder directory into your child theme. Add the following before the closing php tag:
<!--Liquid Canvas code for cross browser rounded corners start-->
<!--[if IE]><script type="text/javascript" src="http://sridharkatakam.com/js/liquid-canvas/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://sridharkatakam.com/js/liquid-canvas/liquid-canvas.js"></script>
<script type="text/javascript" src="http://sridharkatakam.com/js/liquid-canvas/liquid-canvas-plugins.js"></script>
<script type="text/javascript">
// First we wait until the document is completely loaded using the handy
// jQuery "ready" method.
$(window).load(function() {
// Now we can paint our canvas.
$(".post, .page").liquidCanvas(
"fill{color:#FFFFFF} => roundedRect{radius:12}");
$("#commentform textarea, #comments").liquidCanvas(
"fill{color:#FFFFFF} => roundedRect{radius:12}");
});
</script>
<!--Liquid Canvas code for cross browser rounded corners end-->
You might want to download Liquid Canvas, put the .js files on your server and accordingly change the paths in the above.
That’s it.
