Joomla Templates - RokWebify Tutorials - Adding Module Positions

There are many module positions in RocketTheme templates, however, you may want more or a particular position to suit your personal needs. Once you have grasped the concept of creating new module positions, inserting them into your index.php and assign CSS to them, you will be able to truely individualise your website. The process itself is relatively simple, you just need to know exactly what you wish to accomplish and begin the creation process.

This tutorial will go through the process of creating 3 types of module positions. The first, is adding a module position underneath the right position in the side column. The second, is how to create a module position on the horizontal axis of another position. The last is creating a module position outside of the constraints of the main template, possibly for the purpose of advertising, this will be similar to the "Support Joomla!" image on the top right of www.joomla.org.

Part One - Adding module positions in a columnar style

Open your index.php file. This should be contained within the rt_rokwebify folder. A code specific editor, such as Adobe Dreamweaver or TextMate are perfect for making changes, but any text editor will do the trick.

Now that you have opened your index.php. You must locate the following
```
<?php if(mosCountModules('right')) : ?>

<td class="right">

<div class="padding">

<?php mosLoadModules('right', -2); ?>

</div>

</td>

<?php endif; ?>
```
This area of the index.php is responsible for loading and controlling the right position. The following will break down each line to further your understanding of how the template operates.

<?php if(mosCountModules('right')) : ?> is a php statement that allows for collapsable modules. Therefore, if there is no module in the right position, then the column will not load such as, if you wanted a full width wrapper.

<td class="right"> defines the column in which the position is located. The 'class="right"' denotes which area in the template_css.css controls the style of the colum. Therefore, in the template_css.css, you will see "td.right" with the position's variables.

<div class="padding"> as the name suggests, is responsible for the padding of the module position.

<?php mosLoadModules('right', -2); ?> is another php statement which loads the module itself. The name inside the ' ' brackets is the module position name that Joomla! shall recognise. The numbers have varying meanings and operations which are described at Joomla!

If you select a module name that is not part
of the normal Joomla! set, you must add it in the Joomla! Admin Area
via Site > Tempate Manager > Module Positions

</div> </td> <?php endif; ?> are all closing tabs

During the next process, we are going to add a module position underneath right and it will be called, advert1.

For this to occur, we must edit the code from point 2 to the following:
```
<?php if(mosCountModules('right') 
or mosCountModules('advert1')) : ?>

<td class="right">

<div class="padding">

<?php mosLoadModules('right', -2); ?>

 <?php mosLoadModules('advert1', -2); ?>

</div>

</td>

<?php endif; ?>
```
The first line has been alterred to <?php if(mosCountModules('right') or mosCountModules('advert1')) : ?>. This maintains the collaspable effect of both module positions, so they can both be active, separate or non at all.

After the fourth line, we added <?php mosLoadModules('advert1', -2); ?> which allows Joomla! to load the module beneath the right module position.

We do not need to make any alterations to the CSS of the template due to the position being controlled by the same CSS as the right position. This maintains the integrity of the template.

If you type the following into your web browser, you should see the something similar to the screenshot below, www.yoursiteURL.com/index.php?tp=1

Part 2 - Adding a module position horizontally

Remember, the technique is applicable to most situations of this type

For this example adding the new module position in a horizontal fashion, we are going to add User 9 to the right of User 1 and User 2.

Locate the following in your index.php
```
<?php if(mosCountModules('user2')) : ?>

<td class="usermodules">

<?php mosLoadModules('user2', -2); ?>

</td>

<?php endif; ?>
```
Below the above code, you must insert the following
```
<?php if(mosCountModules('user9')) : ?>

<td class="usermodules">

<?php mosLoadModules('user9', -2); ?>

</td>

<?php endif; ?>
```
This will produce the same CSS styling as the User1/2 positons due to them loading the same <td class="usermodules">.

Part Three - Adding a module outside of the template

Whilst we are still within the index.php, you must locate the following.
```
<body id="page_bg">
```
It should be near the beginning of the index.php

After the code presented above, add the following
```
<div id="advert2">
<?php mosLoadModules('advert2', -1); ?>
</div>
```
<div id="advert2"> denotes which area of the template_css.css controls the styling of this new module position

<?php mosLoadModules('advert2', -1); ?> is responsible for loading the module position, in this case "advert2". For this situation, a collaspable module is not needed due to it being outside of the main template.

</div> is the closing tag for this section

We now need to edit the CSS of the template to make the new module position conform to our personal specification

Open the template_css.css file located in rt_rokwebify/css

Locate the following within the template_css.css
```
img#logo {
float:
left;
margin-left: 38px;
width: 469px;
height: 138px;
background: url(../images/logo.png) 
0 0 no-repeat;
```
After this section in the CSS, you must add the code below
```
div#advert2 {
float: right;
width:100px;
height:100px;
}
```
div#advert2 is giving so it loads the corresponding area in the index.php <div id="advert2">

{ is the opening tag for the CSS

float:right ensures that the module position is located to the exact right of the template. Alternatively, you could use float:left for the reverse effect.

width:100px controls the width of the position. You can insert any number that you deem fit.

height:100px is responsible for the height of the position. Edit this to your personal preferences.

} is the closing tag for the CSS

You can enter as many other CSS variables as you wish to fully customise your module position such as margins, padding, borders, backgrounds, font styles etc... Ensure that you add them before the } closing tag