|
 It often happens that when you use a template, its structure is often standardized according to the traditional web standard : menu on the left, content on the right. However it can be interesting to know how to change this structure with the menu on the right and the contents on the left, without being an HTML and CSS Guru and especially without turning the template out.
To illustrate this manipulation. I will use one of our templates, myFlowers. You can download it to practice this tutorial.
The original template : menu on the left and modules on the right.
HTML / PHP file
Initially, you have to identify in the php file source the portion of code corresponding to the menu on the left. For compatibility reasons between navigators and in order to avoid errors, in particular in IE, a minimum of table is used in the templates. It only has to exist if you have several columns, as in this case.
Then, we have to identify the end of the principal table. The last <td> tag corresponds to the place where we will move our portion of code previously selected.
For those which would not be used to HTML code, in appendix I recall brievly the basic structure of a table.
Move the portion of code corresponding to the left menu after the tag closing the cell.
In the zone of contents, you will have been able to notice that there is a block of contents on the line, we also will move this element on the left contents. With this intention identify the cell corresponding to this displaying. It is located just after the call of the php function mosMainBody allowing the displaying of the body of page.
Then move the selection with the top of the line of call of the function mosMainBody (line 71).
Now your template should appears like this one :
The next stage will consist in adjusting the CSS styles to give to the right the template.
Always in the php page, invert the classes <div class="wrapper_r"> and <div class="wrapper_rt"> being before the principal table by <div class="wrapper_l"> and <div class="wrapper_lt"> to place the solid drop shadow of the menu on the left edge. Made in the same way on the level of the menu which was moved and replace :
<td id="left" class="wrapper_l">
<div class="wrapper_lt">
<div id="menuleft"><?php mosLoadModules ( 'left', -2 ); ?></div>
</div>
</td> replace by
<td id="left" class="wrapper_r">
<div class="wrapper_rt">
<div id="menuleft"><?php mosLoadModules ( 'left', -2 ); ?></div>
</div>
</td> CSS file
In file CSS, the intervention will go on the level of the classes wrapper_l, wrapper_lt, wrapper_r and wrapper_rt to modify the alignment of the basic images, to add a padding to the class wrapper_lt and to remove it on the class wrapper_rt. At the same time, remove the attribution of the tag on the style for the class wrapper_rt .
At the same time, remove the attribution of the tag on the style for the class wrapper_l and wrapper_r.
.wrapper_l { background: url("../images/wrapper_l.gif") repeat-y 0 0; }
div.wrapper_lt {
background: url("../images/wrapper_lt.gif") no-repeat 0 0;
padding-left: 13px;
}
.wrapper_r { background: url("../images/wrapper_r.gif") repeat-y 0 0; }
div.wrapper_rt { background: url("../images/wrapper_rt.gif") no-repeat 0 0;
}
Side of the type of posting thin or wide (line 14-15 and 26-27), modify the following classes to invert the left and right margins.
div.thin div.wrapper_b,
div.thin div.wrapper_t { margin-right: 144px; }
div.wide div.wrapper_t { margin-right: 166px; }
div.wide div#pathway { margin-left: 14px; }
Currently, the menu placed on the right is stuck on the edge of the framework of contents. Add a padding-left of 10 pixels to air the unit.
For the image of the flowers, the css does not allow (still) rotations of images but you can always carry out an horizontal rotation in Photoshop in order to obtain the shade on the left. Also modify the alignment of the image for the property background while passing it to 0.
Last the operations will be carried out on the level of the block of contents positioned on the left of the body, we will invert the margin to space it compared to the text and to align it with the block of the top (“Latest news ” on the example). With this intention go to the line corresponding to the style right (line 209) and change the padding-left of 10 pixels by a padding-right.
And here, you henceforth have new a template with inverted elements and those without to have too much change HTML or CSS styles.
Appendix - basic Structure of an HTML table.
<table>
<tr>
<td>My text</td>
</tr>
</table>
The tags <table> and </table> make it possible to declare the beginning and the end of displaying of the table.
The tags <tr> and </tr> define a beginning and an end of line.
The tags <td> and </td> define a beginning and an end of cell, this element is that which will contain our texts and images. This play of tag is the only one which allows a correct displaying.
A tag <tr> can contain several plays of <td>. And a table can contain several sets of tags <tr>.
 |
