This recipe allows you to define and redefine column width and column layout, and modify the traditional three column layout to any other combination including asymmetrical designs, within seconds.
You can completely remove the right column, freeing up all space taken up by it.
Or you may prefer to keep both columns, but use the right column for thumbnail display only, as you have long category and manufacturer names, and need more space on the left.
Let's take one of grandma's favorites and make it new!
// customization for the design layout
define('BOX_WIDTH', 125); // how wide the boxes should be in pixels (default: 125)
The default-box width is defined by this parameter. We divide the parameter into two using the left and right column respectively. Replace with this code:
// customization for the design layout
define('BOX_WIDTH_LEFT', 125); // how wide the boxes should be in pixels (default: 125)
define('BOX_WIDTH_RIGHT', 125); // how wide the boxes should be in pixels (default: 125)
This will set both columns at the same width, and will be your play area when the recipe is well done.
2. Find in
index.phpand the other root files (altogether 38) the following lines:
<td width="<?php echo BOX_WIDTH; ?>" valign="top"> <table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2"> <!-- left_navigation //--> <?php require(DIR_WS_INCLUDES . 'column_left.php'); ?> <!-- left_navigation_eof //--> </table></td>
Replace this with the following lines, as we will be moving the column-cell definition directly into the column files:
<!-- left_navigation //--> <?php require(DIR_WS_INCLUDES . 'column_left.php'); ?> <!-- left_navigation_eof //-->
3. Repeat this for the right column, find:
<td width="<?php echo BOX_WIDTH; ?>" valign="top"> <table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2"> <!-- right_navigation //--> <?php require(DIR_WS_INCLUDES . 'column_right.php'); ?> <!-- right_navigation_eof //--> </table></td>
Replace with this:
<!-- right_navigation //--> <?php require(DIR_WS_INCLUDES . 'column_right.php'); ?> <!-- right_navigation_eof //-->
4. For both columns, you have now removed the cell definition from the root files. This means that if the included file is empty, no additional cell will be added and the entire page width can be used for the site content.
The parts that were cut from the root files have to be added to the column files; so open
catalog/includes/column_left.php, and add the following line at the very top, above the opening php tag:
<td width="<?php echo BOX_WIDTH_LEFT; ?>" valign="top"> <table border="0" width="<?php echo BOX_WIDTH_LEFT; ?>" cellspacing="0" cellpadding="2">
</table></td>
5. Repeat this procedure for the
catalog/includes/column_right.phpfile using the column-right definition when replacing.
<td width="<?php echo BOX_WIDTH_RIGHT; ?>" valign="top"> <table border="0" width="<?php echo BOX_WIDTH_RIGHT; ?>" cellspacing="0" cellpadding="2">
Add the following code after the closing php tag of
catalog/includes/column_right.php:
</table></td>
If you'd now like to remove the whole column right without changing the underlying structure, so you can have it back as soon as you implement a new design, comment out everything in the file
catalog/includes/column_right.php. You can add all boxes you'd like to keep to the left column.
Note
Chef's suggestion:
This setup enables you to have more than three columns also (you may want to show a column for ads on your product pages); all it takes is a new include for the additional column in the relevant file and a new file created following this method for your includes folder, with its own width specified.
Just as easily, add a conditional statement at the top of the column file (close at bottom), so your right column only shows on certain pages.
Time to share a cup of tea with Grandma! You've done it! Bon appetit!