As promised, I come back this week with the second part of "How to make rounded module like Mamboserver.com" for Mambo 4.5.2.x (and over)
Make sure you do not miss the Part 1: Images preparation
In this 2nd part, we will learn how to put the 4 images we made in Part 1 ( box_t_l.png, box_t_r.png, box_b_l.png and box_b_r.png ) into Mambo.

Part 2: Putting corners into Mambo

A. Under standing Mambo 4.5.2.1 and future versions (hopefully)
What is new?
As you may know, the standard mosLoadModules function in Mambo is:

mosLoadModules( $position_name [, $style] )

 mosLoadModules("position",-3)

 
 
<div class="module[suffix]">
  <div>
    <div>
      <div>
        <h3>Module Title</h3>
        Module output
      </div>
    </div>
  </div>
</div>

You can learn more about the difference of of using 0, 1, -1 and -2 at this article (Mambo layout)

Study an example
Look at the following codes of one of Mambotheme.com modules:

 
<div class="module-blue"><div><div><div><h3>Special offer!</h3>
<table class="contentpaneopen">
  <tr>
    <td valign="top" colspan="2">
    Stop paying $19-$30 per Mambo template!...
    </td>
  </tr>
</table>
</div></div></div></div>

The content between the <table class="contentpaneopen">...</table> is the output of the module and the module-blue is module[suffix]

2 easy steps to put corners into Mambo

Step 1.Adding codes into index.php of your template
Just add the following code into your index.php of your template. The index.php file is in mamboroot/templates/template_name

Step 2. Adding styles into template_css.css
Now you have understand how the modules is organized and the second thing is just put into your template_css.css which is in mamboroot/templates/template_name/css folder and add the following lines:

 
div.leftblock div.module {
  padding:0px 0px 0px 0px;
}
.leftblock#leftmenu div.module {
  background: url('../images/box_b_l.png') no-repeat bottom left;
}
.leftblock#leftmenu div.module div div {
    background: url('../images/box_t_l.png') no-repeat top left;
}
.leftblock#leftmenu div.module div {
  background: url('../images/box_b_r.png') no-repeat bottom right;
}
.leftblock#leftmenu div.module div div div {
    background: url('../images/box_t_r.png') no-repeat top right;
}
.leftblock#leftmenu div.module div div div h3{
  display:block;
  font-size: 10px;
}
.leftblock#leftmenu div.module div div div div {
    background:none;
}

A. Some css explainations


Class .leftblock is used to define style for the box
ID #leftmenu is to tell that this style for #leftmenu only (this is optional)
Once again, do not forget to put the 4 images we made in Part 1 ( box_t_l.png, box_t_r.png, box_b_l.png and box_b_r.png ) into the images folder. If you put them in other folder, change the path to the images in your css codes.