Posted by man.os | Posted in dotNetNuke, jQuery, Skinning | Posted on 12-02-2010
After spending lots of time making round corners for my containers using God knows how many small images, html tags and css classes I found out that I could easily ditch all that with just a bit of jQuery magic! It is important to note that this is a cross-browser solution – your browser doesn’t have to support any rounded corner CSS properties, so it works even on Internet Explorer 6.
What you will need.
If you have DNN version 5.0 or greater then you already have jQuery ready and you will only need the jQuery Corner plugin (jquery.corner.js) . You can download it from here: http://www.malsup.com/jquery/corner/ .
Including the plugin
In your Skin file, include the jquery.corner.js file by adding this line:
or better if you have copied the file to your skin’s path (e.g. in the scripts folder)
Making the Container
And now for any container you want to have rounded corners you just have to add this line at the end of your container code :
where .panel is the name of the div that you want to make its corners rounded.
You can see much more options by using some parameters here:
A complete container example:
And that’s it! No-images cross-browser rounded corners!