August 20, 2009

How to set up rounded corners using JavaScript in Joomla Modules

Posted in CMS Development by Alex | Tags: javascript, joomla, modules, rounded corners

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

A very interesting fact about joomla is that you can’t have separate module styles all the time. You need to work your way with module class suffix. Well, how do you have the right sidebar modules with rounded corners whyle the left sidebar menu has a different style?

The answer is simple, with a little help of javascript. And here si how you can get it done.

First step is to include the code

Open up your template`s index.php file and paste this code before the end of the head tag.

After that include this js inside your template folder. (Right click -> “Save As”). Then navigate to your module and set up a suffix in the module like in the picture below.

Next step is to change within the pasted code we inserted earlyer the new class name of the module. If the module class suffix is “_john” within the code we replace it like this:

And presto, you have instant rounded corners even in IE. NOTE that for a menu module the prefix for the menu class is “module“. So the code will be like “module_menuname“.

Other rounded corners resources for Joomla:

The credits for the Javascript code go to CurvyCorners.

4 Comments to “How to set up rounded corners using JavaScript in Joomla Modules”

August 30, 2009 at 9:35 am
dota says:

Nice! I would like to find something like this for Drupal CMS modules…
dota´s last blog ..Выбираем Акса через -random
December 12, 2009 at 4:06 am
cathy says:

Thank-you. Thank-you. Thank-you. I spent the majority of my day trying to get css/div rounded corners to work in joomla. I Think I tried everything. I hesitate to use js because I am not familiar at all. This was so simple. So Thank-you
January 2, 2010 at 7:51 am
Dota Allstars says:

Very nice work! Thank!
June 3, 2010 at 10:56 am
Blog Pendidikan Terdepan says:

i tried it for my joomla but not work well. help me please. I use Beez Template for Joomla. Check my website and guide me please