Joomla Templates - RokWebify Tutorials

The following tutorial will illustrate the steps needed to create a 3 column structure instead of the default 2. This will create a left and right side column with the mainbody located in the centre

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.

Once you have opened the above file, you must find the following
```
<?php if(mosCountModules('right')) : ?>
   <td class="right">
   <div class="padding">
   <?php mosLoadModules('right', -2); ?>
   </div>
   </td>
   <?php endif; ?>
```
This should be around the line 65

You will need to Copy and Paste the above section between the following variables in the index.php (around line 40). The area has been highlighted.

This area of the file should now mimic the following

<tr valign="top">
   <?php if(mosCountModules('right')) : ?>
   <td class="right">
   <div class="padding">
   <?php mosLoadModules('right', -2); ?>
   </div>
   </td>
   <?php endif; ?>
   <td class="mainbody">

The right column has now been cloned onto the left side of the Mainbody. However, the module position is still right so any modules under the right position will load in the new left side column.. Therefore, we need to make some more alterations to ensure that the left column has the left module position.

From step 3, change all references of right to left. This is illustrated below
```
<tr valign="top">
   <?php if(mosCountModules('left')) : ?>
   <td class="left">
   <div class="padding">
   <?php mosLoadModules('left', -2); ?>
   </div>
   </td>
   <?php endif; ?>
   <td class="mainbody">
```
The column is now loading the left module position and the new CSS class td.class="left" which we shall create later.

The right position loaded styles from the template_css.css. With creating the left column with the left characteristics, the styles will not appear as they did in the right column. We must now edit the template_css.css to rectify this issue.

Open the template_css.css file located in rt_rokwebify/css

You must find all references of td.right within the CSS file. We must then copy them and change them from td.right to td.left. Some variables are contained within our sections so you need to add the td.left code in those sections. All will become clear in the visual aids below

Below are all variables that you must alter

td.mainbody .padding,
         td.right .padding {
         padding: 15px;
         }

td.right {
         background: #EEF6FF url(../images/

         col-divider.png) 
         0 0 repeat-y;
         width: 255px;
         }

td.right div.moduletable {
         color: #121A28;
         }

td.right div.moduletable h3 {
         border-bottom: 3px solid #D2E0F2;
         }

The results can be seen below

td.mainbody .padding,
         td.right .padding,
         td.left .padding {
         padding: 15px;
         }

td.right,
        td.left {
         background: #EEF6FF url(../images/

         col-divider.png) 
         0 0 repeat-y;
         width: 255px;
         }

td.right div.moduletable,
         td.left div.moduletable {
         color: #121A28;
         }

td.right div.moduletable h3,
         td.left div.moduletable h3 {
         border-bottom: 3px solid #D2E0F2;
         }

However, if you want individual column styling, you must divide them out into separate sections. The results can be seen below.

td.mainbody .padding,
         td.right .padding {
         padding: 15px;
         }

td.mainbody .padding,
         td.left .padding {
         padding: 15px;
         }

td.right{
         background: #EEF6FF url(../images/

         col-divider.png) 0 0 repeat-y;
         width: 255px;
         }

td.left{
         background: #EEF6FF url(../images/

         col-divider.png) 0 0 repeat-y;
         width: 255px;
         }

td.right div.moduletable {
         color: #121A28;
         }

td.left div.moduletable {
         color: #121A28;
         }

td.right div.moduletable h3 {
         border-bottom: 3px solid #D2E0F2;
         }

td.left div.moduletable h3 {
         border-bottom: 3px solid #D2E0F2;
         }

As can be observed above, there is now double the amount of column styling instead of integrating them together. With this division, you can change the width; borders (style, size, colour); background-colour; dividers (colour, image)

Grey_Column

If you have enacted the above steps, you will notice a "squashing" effect on the mainbody as it as been reduce by the 255px of the new left column. There are various approaches to rectify this problem.

Firstly, you can extend the width of you template as seen in the Fluid Width Tutorial with an extra 255px.

If you have chosen to integrate the left and right column CSS, you can simply change the width as seen in the following code
```
td.right,
    td.left {
    background: #EEF6FF url(../images/

    col-divider.png) 0 0 repeat-y;
    width: 255px;
         }
```
However, if you have chosen the individual left and right column styling, the technique is similar. You can change the widths of both or just a single one, depending on your personal preference. As seen in the following code.
```
td.right{
   background: #EEF6FF url(../images/

  col-divider.png) 0 0 repeat-y;
   width: 255px;
         }
```
```
td.left{
   background: #EEF6FF url(../images/

   col-divider.png) 0 0 repeat-y;
   width: 255px;
         }
```