1. What you can learn?

Reading this article will give you:

• Basic overview of mambo layout.
• Tricks to well organize your page contents with mambo modules.

2. Joomla / Mambo layout overview.

Picture 1: Mambo Layout Overview

3. Layout explained

As you can see from Picture 1, Joomla / Mambo layout looks quite the same as any standardized portal webpages with 5 main parts:

1. Top: <pathway>, <user3> and <user4> modules.
2. Left: <left> module.
3. Center: <banner>, <user1>, <user2> and <mainbody> modules.
4. Right: <right> module.
5. Bottom: <footer> module.

This is just a default layout, all modules can be placed anywhere defined in the index.php file of the template. The syntax of loading modules PHP code as follows:

mosLoadModules( $position_name [, $style] )

With Joomla 1.0.1 / Mambo 4.5.2 and older versions, we have 0 (default), -1, 1, -2 or -3? for the $style of Joomla / Mambo. In Joomla / Mambo 4.5.2.1 the value "-3" for the $style was introduced. So what are the differences of using 0, -1, 1, -2 or -3? [ see (c) in Picture 1 ]

• 0 = (default ). Modules are displayed in a column. The following shows an example of the output:

<!-- Begin : Individual module -->
<table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
  <tr>
    <th valign="top">Module Title</th>
  </tr>
  <tr>
    <td>
      Module output
    </td>
  </tr>
</table>
<!-- End : Individual module -->

• 1 = Modules are displayed horizontally. Each module is output in the cell of a wrapper table. The following shows an example of the output:

<!-- Begin : Module wrapper -->
<table cellspacing="1" cellpadding="0" border="0" width="100%">
  <tr>
    <td align="top">
      <!-- Begin : Individual module -->
      <table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
        <tr>
          <th valign="top">Module Title</th>
        </tr>
        <tr>
          <td>
            Module output
          </td>
        </tr>
      </table>
      <!-- End : Individual module -->
    </td>
    <td align="top">
      <!-- ...the next module... -->
    </td>
  </tr>
</table>

• -1 = Modules are displayed as raw output and without titles. The following shows an example of the output:

Module 1 OutputModule 2 OutputModule 3 Output

• -2 = Modules are displayed in X-Joomla / Mambo format. The following shows an example of the output:

<!-- Begin : Individual module -->
<div class="moduletable[suffix]">
  <h3>Module Title</h3>
  Module output
</div>
<!-- End : Individual module -->

• -3 = Modules are displayed in a format that allows, for example, stretchable rounded corners.

<!-- Begin : Individual module -->
<div class="module[suffix]">
  <div>
    <div>
      <div>
        <h3>Module Title</h3>
        Module output
      </div>
    </div>
  </div>
</div>
<!-- End : Individual module  -->

I myself really like features of the new "-3" style. Using the "-3" will help you to create stylish rounded corners template for Joomla / Mambo. Step-by-step on how to create a rounded module is guided in this tutorial.

4. Tricks to hide / display modules wisely.

Obliviously in Joomla / Mambo templating, you have to preserve an area for a module to display. This area is often created with a fixed width block using <table, <td> or <div> tags . And the outcome of of this is when the module you desire to display is unpublished, the block you preserve will still be there, creating an ugly blank area and take the space of other contents. Therefore, a simple solution using if {} condition + mosCountModules syntax will be a perfect workaround. [ See (b) in Picture 1 ]

The sample code you see in Picture 1 is a standard one, a more complex if {} will produce a better result and remove unnecessary HTML codes. For example:

<!-- Begin : set the width for td of user1 and user2  -->
<?php 
  $numblock = 0;
  if (mosCountModules( "user1" )>0 && mosCountModules( "user2" )>0) {
    $numblock = 2;
    $blockwidth = 50;
  }else if (mosCountModules( "user1" )>0 || mosCountModules( "user2" )>0) {
    $numblock = 1;
    $blockwidth = 100;
  }
?>
<!-- End : set the width for td of user1 and user2  -->
 
<!-- Begin : load module user1 and user2  -->
<?php if ($numblock > 0) { ?>
  <tr>
  <?php if (mosCountModules( "user1" )) { ?>
    <td width="<?php echo $blockwidth; ?>%" valign="top">
    <div class="colorbox"> 
    <div id="user1" class="roundblock">
    <?php mosLoadModules ( "user1", -3 ); ?>
    </div>
    </div>    
    </td>
<?php } ?>
<?php if (mosCountModules( "user2" )) { ?>
  <td width="<?php echo $blockwidth; ?>%">
  <div id="user2" class="roundblock">
  <div class="colorbox"> 
  <?php mosLoadModules ( "user2", -3 ); ?>
  </div>
  </div>
  <?php } ?>
  </tr>
<?php } ?>
<!-- End : load module user1 and user2  -->

I use above codes in MBT GREY template to organize user1 and user2 modules. Those advanced if {} codes will divide user1 and user2 display areas into 2 equal boxes if both are published [Picture 2]; stretch the box to fit with the main content when one of them is unpublished [Picture 3] and, of course both will be totally removed when they are unpublished.

Picture 2: User1 and User2 published

Picture 3: User1 published, User2 unpublished

Though the above tricks can be applied in all modules (especially left, right, top, users), to some standard modules which are often the "must have" modules of a your site like search (user4) , topmenu (user3), pathway (pathway), and mainbody (mosMainBody) then a simple if {} is enough. [ See (a) in Picture 1 ]

5. Bottom lines.

There are other 2 functions that are quite useful in Joomla / Mambo templates:

• $mosConfig_sitename: use to display your site title. You can put this code in your header/logo area. For example

<?php echo "$mosConfig_sitename!"; ?>

• $mosCurrentDate: use to display date

<?php echo mosCurrentDate(); ?>

<?php echo mosFormatDate('2005-01-01 10:00:00'); ?>

Finally, this tutorial is written for Joomla 1.0.1 / Mambo 4.5.2.3 and also true to all versions up to now, Joomla / Mambo is developing everyday and there will be more interesting functions and features for template designers. I will try to keep this article updated.