RoSeo

How to rounded corner your Joomla Modules

1. Find the file JOOMLA_ROOT/templates/YOUR_DEFAULT_SITE_TEMPLATE/html/modules.php, if the file doesn't exist, please create one.

2. Add the following function to modules.php

   function modChrome_roundedCorner($module, &$params, &$attribs) {
   	$headerLevel = isset($attribs['headerLevel']) ? (int) $attribs['headerLevel'] : 3;
   	if (!empty($module->content)) {
   		?>
   <div
   	class="cssspritesroundedBox_45929 moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>">
   <span class="corner_45929 topLeft_45929"></span><span
   	class="corner_45929 topRight_45929"></span> <?php if ($module->showtitle) { ?>
   <h <?php echo $headerLevel; ?>> <span class="backh"><span class="backh2"><span
   	class="backh3"> <?php echo $module->title; ?></span></span></span> </h<?php echo $headerLevel; ?>>
   	<?php }; ?> <?php echo $module->content; ?> <span
   	class="corner_45929 bottomLeft_45929"></span><span
   	class="corner_45929 bottomRight_45929"></span></div>
   	<?php
   	};
   }
   

3. Put the following style to your template css file.

   .cssspritesroundedBox_45929 {zoom:1;position:relative; padding:12px; margin-bottom: 12px;background-color:#d2dde0; }
   .corner_45929 {position:absolute; background-image:url(../images/cssspritedcorner_45929.png);width:12px; height:12px;font-size: 0;}
   .topLeft_45929 {top:0; left:0; background-position:0px 0px;}
   .topRight_45929 {top:0; right:0; background-position:-12px 0px;}
   .bottomLeft_45929 {bottom:0; left:0; background-position:0px -12px;}
   .bottomRight_45929 {bottom:0; right:0; background-position:-12px -12px;}
   

4. Put the image file cssspritedcorner_45929.png into the following folder:JOOMLA_ROOT/templates/YOUR_DEFAULT_SITE_TEMPLATE/images

5. In the template index.php file, just use the rounded corner like this

   <jdoc:include type="modules" name="position-7" style="roundedCorner" headerLevel="3" />
   

6. You can use Rounded Corner to generate your own rounded corners.