[Joomla Tutorial] How to put a new module position in your Joomla template

http://i270.photobucket.com/albums/jj97/zool_85/module_positions.jpg

Want to make your custom Joomla template for your site but don't know how to set your module position and order? This simple article will guide you to rearrange your Joomla module with your new custom template.

In Joomla template, the PHP template is combined with HTML. When you installed new Joomla template at you administrator, it's already have declared the module position. You can go to Administrator (Site --> Preview --> Inline With Positions) to view this position. Figure below show some module position example:

Each module position represent Joomla module (Modules --> Site Modules). This module can be relocated example : You can move "Latest News" module from top to right position. This figure below shows how it can be relocated:

You also can add up to 50 modules position with you own string. This setting can set at Site --> Template Manager --> Module Position

On, default Joomla installer, they list only 27 editable module position. The rest, is up to users. After you know about the Joomla module position, we will now show you how to implement this module to your own custom template.

First you need to know the default format of PHP code for Joomla module :

<?php mosLoadModules ( 'module position' ); ?>

In that code, module position come from the string value of position in module position table. This example of code shows how the string implemented from the table:

<?php mosLoadModules ( 'left' ); ?>

<?php mosLoadModules ( 'right' ); ?>

<?php mosLoadModules ( 'top' ); ?>

<?php mosLoadModules ( 'bottom' ); ?>

<?php mosLoadModules ( 'user1' ); ?>

<?php mosLoadModules ( 'user2' ); ?>

<?php mosLoadModules ( 'user3' ); ?>

<?php mosLoadModules ( 'user4' ); ?>

Next, after you decide to use which string module, we will show how this code works in HTML template. Let's say we use this string : header, top, user1, user2. Then we make a simple HTML and locate the position for each module:

__________________________________________________________

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Zooltechnology Inc.</title>
</head>

<body>

<table border="1" width="600" height="500">

<tr>
<td valign="top" colspan="2">

YOUR WEBSITE TITLE
<?php mosLoadModules ( 'header' ); ?></td>
</tr>
<tr>
<td valign="top" width="182">

MY SIDEBAR<?php mosLoadModules ( 'top' ); ?>
<?php mosLoadModules ( 'user1' ); ?>
<?php mosLoadModules ( 'user2' ); ?></td>
<td valign="top" height="504" width="874">

MY MAIN CONTENT

<?php mosMainBody(); ?>

</td>
</tr>
</table>

</body>

</html>

_______________________________________________________________

Then we copy paste this code to your current HTML code that you want to edit at Site --> Template Manager --> Site Templates. Choose the template package that you want to edit then click at Edit HTML. After you paste the code, you can view your new edited template with new module position at Site --> Preview --> Inline With Positions. Before that you must make it as a default template. Here is the result from the code:

After that, you can show which Module (Modules --> Site Modules) you want to display at the available position. Let's say we want to display this module:

Header ---> JoomlaSpan Google Adsense 2.0

Top ------> Members Login

user1 ----> Polls

user2 ----> Users online

Finally, after enable all the modules, the figure below shows the result: