{mosgoogle center}

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] )

Normally, we have 0 (default), -1, 1 and -2 for for the $style of Mambo. In Mambo 4.5.2.1 the value "-3" for the $style was introduced. Therefore, by using a PHP code:

 mosLoadModules("position",-3)

you will have extra "divs" tags which generate the following format in your Mambo templates:

  

    

      

        
Module Title
        Module output
      
    
  

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:

Special offer!

	

		

		Stop paying $19-$30 per Mambo template!...
		
	

The content between the

...

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

(Above code is a picture, see it in a text file here)

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.

{mosgoogle center}

B. Closing words
Now you can package your template (if you create the template ) or just reload your page (if you custome from existing template) to see what we have been doing with each other so far. You can employ the similar steps to make custom module styles with diffrent colors like Mambotheme.com

C. Download the .PSD files of this tutorial
The .PSD files of this tutorial are available to Mambo Templates Club only and the membership is only $19. Join Now to download (I you pay via Paypal, you can download instantly after 5 minutes). Learn more about what you will get when become our member
If you are our member, after login, click HERE to download