f. The Three Column structure:
Ok, now let's add the three column structure to our theme.html template under the header area: left blocks, center block & modules, right blocks and footer:
Open theme.html template with your favorite web editor, and, at the bottom of the HTML code, before the closing </BODY> </HTML> tags, insert following code:
<TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR> <TD> <TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR VALIGN="TOP"> <TD> <TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR> <TD WIDTH="172" VALIGN="TOP" BGCOLOR="#2D6EC5"> <TABLE WIDTH="171" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR> <TD ALIGN="CENTER" CLASS="login" > Welcome message</TD> </TR> <TR> <TD HEIGHT="4" CLASS="login" ><IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="1" HEIGHT="4"></TD> </TR> </TABLE> <TABLE WIDTH="172" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR> <TD WIDTH="3"><IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="3" HEIGHT="1"></TD> <TD> Left Blocks </TD> </TR> </TABLE> </TD> <TD WIDTH="100%" ALIGN="CENTER" VALIGN="TOP"> <TABLE WIDTH="98%" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR> <TD ALIGN="CENTER"> Center blocks & Modules here </TD> </TR> </TABLE> </TD> </TR> </TABLE> </TD> <TD WIDTH="2" BGCOLOR="#2D6EC5"> </TD> <TD ALIGN="CENTER" BGCOLOR="2D6EC5"> <TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR> <TD HEIGHT="7"><IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="8" HEIGHT="8"></TD> </TR> </TABLE> Right blocks</TD> </TR> </TABLE> </TD> <TD WIDTH="1" ALIGN="RIGHT" BGCOLOR="#2D6EC5"><IMG SRC="<?php echo $imgpath; ?>spacer.gif" WIDTH="1" HEIGHT="1"></TD> </TR> </TABLE> <TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR> <TD BGCOLOR="#2D6EC5"> <TABLE WIDTH="100%" BORDER="0" CELLSPACING="6" CELLPADDING="0"> <TR> <TD CLASS="footer" ALIGN="CENTER" height="20"> Footer Message </TD> </TR> </TABLE> </TD> </TR> </TABLE> <TABLE WIDTH="100%" HEIGHT="23" BORDER="0" CELLPADDING="0" CELLSPACING="0"> <TR> <TD ALIGN="RIGHT" BGCOLOR="#2D6EC5"></TD> </TR> </TABLE> </BODY> </HTML> |
Let's see the table structure we added:
two nested tables each with a unique row <TR> from line 40 (where the added code starts) to 100: the second table consists of some cells: one nested table containing left and center blocks (line 43 – 74), one separator cell (line 75) and a cell for the right blocks (line 76-82).
the table for left and center blocks (line 43-74) consists of a column (<TD>) with a row for the welcome message, a separator and a row for left blocks. Background color of the columns and cells is always blue (#2D6EC5): Center blocks has no BGCOLOR: it will show white per default.
forces a blank space, since HTML code recognises only one blank space between words in the text....
So you created your 3 column basic structure where to place the AT commands that will insert the real objects: blocks, variables, modules, etc. Save the theme.html file and open the MDPro site from the browser, using the usual preview URL
http://127.0.0.1/mdpro/index.php?theme=ATTest
That's what we got:
Now we have to insert the