To have cross browser rounded corners in this blog using jQuery Corner script, I added the following to my theme’s header.php file just above
<?php wp_head(); //we need this for plugins ?>
Note: When using Builder, if your child theme doesn’t have header.php file, copy it from Builder’s directory into the active theme’s directory.
<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/jquery.corner.js"></script>
<script type="text/javascript">
$('.post, .page, #commentform textarea, #comments').corner();
$('.widget').corner("bottom");
$('.widget').corner("bevelfold tr");
</script>
Let’s examine the above.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
calls jQuery from google’s server.
<script type="text/javascript" src="http://sridharkatakam.com/js/jquery.corner.js"></script>
calls jQuery Corner script. Please download this .js file from http://jquery.malsup.com/corner/, place it in your server and modify the URL accordingly.
$('.post, .page, #commentform textarea, #comments').corner();
The above specifies that we want all the following elements to be rounded on all the 4 corners for:
- any div that has a class of “post”
- any div that has a class of “page”
- any “textarea” element that is under a div with ID of “commentform”
- the div that has an ID of “comments”
$('.widget').corner("bottom");
The above specifies that we want all widgets to have corners at the bottom (i.e., bottom left and bottom right)
$('.widget').corner("bevelfold tr");
The above specifies that we want all widgets to have a bevel fold type of corner at top right.
The reason why I have not specified any corner for top left corners of my widgets is because I am using a background image for this corner.
There are many more corner types, patterns and size options available. These can be seen on the script site.
