- 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 index.php file in your editor, you will need to find the following code at approximately line 65.
<?php if(mosCountModules('right')) : ?>
<td class="right">
<div class="padding">
<?php mosLoadModules('right', -2); ?>
</div>
</td>
<?php endif; ?>
This block of code will need to be moved from its current location, to approx line 40 between <tr align="top"> and <td class="mainbody">.
- The right column has now been moved to the left side of the Mainbody. However, the module position is still defined as "right", so any modules published into the right module position will load in the new left side column. This may become confusing having right modules loading in the left hand side, so for the sake of continuity, we need to make some more alterations to ensure that our left column utilizes the left module position.
From the code that was added in Step 2, 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 right column and module positions utilizes styles from the template_css.css. With changing of our tables to left, the styles in the template_css.css" file will need to be edited to reflect this. Open the template_css.css file located in the /rt_rokwebify/css folder.
You will need to change all the references of td.right to td.left. Below are all variables that you must alter:
These are the original classes in the template_css.css file:
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;
}
These are the results after making your modifications to the above classes:
td.mainbody .padding,
td.left .padding {
padding: 15px;
}
td.left {
background: #EEF6FF url(../images/col-divider.png)
0 0 repeat-y;
width: 255px;
}
td.left div.moduletable {
color: #121A28;
}
td.left div.moduletable h3 {
border-bottom: 3px solid #D2E0F2;
}
|
