template help

[georgiepants]

version 1.3.8a

This is a CSS & PHP issue...

I've downloaded a few versions of the Free ZenCart templates from templates13.com, namely #372 and its color variants. All of these templates seem (to me) to have an error...

There are several template images that create a curved edge to the center column. They are called,

MenuRightHeader.gif (curved edge for top left center column)
MenuRightBackground.gif (fill-in repeating image under curved edge)
MenuRightFooter.gif (curved edge for bottom left on center column -- MISSING IN ACTION )

The PROBLEM is that MenuRightFooter.gif is not called upon anywhere in the CSS and without this image being used, the design is not curved at the bottom, but just a right angle by default. I've attached a screenshot from the template website of how it should look.

Here's a snippet of code from the stylesheet.css and as you can see it calls on the first two images but not the last...

[SCR]

.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
    padding-left:30px;
}
.centerColumn {
    background-image: URL(../images/MenuRightHeader.gif);
    background-repeat: no-repeat;
    padding-top:10px;
}

#centerBackground {
    background-image: URL(../images/MenuRightBackground.gif);
    background-repeat: repeat-y;
}
.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
    font-size: 0.9em;
    background-color:#C4B68E;
}
#siteinfoIP {
    padding-top:10px;
}

[/SCR]

I'm not a programmer but I'm familiiar with id tags and id selectors and so I need help finding/creating the correct id in the php code so I can call on the image in the css.

I've contacted the designer at Templates13.com and he is not willing to help at the moment (the site is quite outdated from 2007)

Any help is appreciated! Thanks :)

[niccol]

The usual way of doing this is to nest several divs inside each other. Each one of the nested divs carries one of the corners as its background (Not elegant but it works)

So, you haven't really given us enough information. Is there another div (probably just inside the center column)? It has probably been inserted into tpl_main_page.php if it exists.

Basically the problem is that each div can only have one background image in css2. So you need to stack the divs up to have more than one rounded corner.

This might change in css3 but by then better curved corners will be possible anyway - most modern browsers deal pretty well with curved corners already but their implementation is hardly uniform!

[georgiepants]

thanks for your reply! Here's the tpl_main_page.php

I'm not sure where to find the div

<?php
/**
 * Common Template - tpl_main_page.php
 *
 * Governs the overall layout of an entire page<br />
 * Normally consisting of a header, left side column. center column. right side column and footer<br />
 * For customizing, this file can be copied to /templates/your_template_dir/pagename<br />
 * example: to override the privacy page<br />
 * - make a directory /templates/my_template/privacy<br />
 * - copy /templates/templates_defaults/common/tpl_main_page.php to /templates/my_template/privacy/tpl_main_page.php<br />
 * <br />
 * to override the global settings and turn off columns un-comment the lines below for the correct column to turn off<br />
 * to turn off the header and/or footer uncomment the lines below<br />
 * Note: header can be disabled in the tpl_header.php<br />
 * Note: footer can be disabled in the tpl_footer.php<br />
 * <br />
 * $flag_disable_header = true;<br />
 * $flag_disable_left = true;<br />
 * $flag_disable_right = true;<br />
 * $flag_disable_footer = true;<br />
 * <br />
 * // example to not display right column on main page when Always Show Categories is OFF<br />
 * <br />
 * if ($current_page_base == 'index' and $cPath == '') {<br />
 *  $flag_disable_right = true;<br />
 * }<br />
 * <br />
 * example to not display right column on main page when Always Show Categories is ON and set to categories_id 3<br />
 * <br />
 * if ($current_page_base == 'index' and $cPath == '' or $cPath == '3') {<br />
 *  $flag_disable_right = true;<br />
 * }<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_main_page.php 7085 2007-09-22 04:56:31Z ajeh $
 */

// the following IF statement can be duplicated/modified as needed to set additional flags
  if (in_array($current_page_base,explode(",",'list_pages_to_skip_all_right_sideboxes_on_here,separated_by_commas,and_no_spaces')) ) {
    $flag_disable_right = true;
  }


  $header_template = 'tpl_header.php';
  $footer_template = 'tpl_footer.php';
  $left_column_file = 'column_left.php';
  $right_column_file = 'column_right.php';
  $body_id = ($this_is_home_page) ? 'indexHome' : str_replace('_', '', $_GET['main_page']);
?>
<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>
<?php
  if (SHOW_BANNERS_GROUP_SET1 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET1)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerOne" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>

<div id="mainWrapper">
<?php
 /**
  * prepares and displays header output
  *
  */
  if (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_HEADER_OFF == 'true' and ($_SESSION['customers_authorization'] != 0 or $_SESSION['customer_id'] == '')) {
    $flag_disable_header = true;
  }
  require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');?>

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">
  <tr>
<?php
if (COLUMN_LEFT_STATUS == 0 || (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '') || (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_COLUMN_LEFT_OFF == 'true' and ($_SESSION['customers_authorization'] != 0 or $_SESSION['customer_id'] == ''))) {
  // global disable of column_left
  $flag_disable_left = true;
}
if (!isset($flag_disable_left) || !$flag_disable_left) {
?>

 <td id="navColumnOne" class="columnLeft">
<?php
 /**
  * prepares and displays left column sideboxes
  *
  */
?>
<div id="navColumnOneWrapper"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_left.php')); ?>
<div class="leftBoxContainer">

</div>
</div></td>
<?php
}
?>
    <td valign="top" id="centerBackground">
<?php
  if (SHOW_BANNERS_GROUP_SET3 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET3)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerThree" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>

<!-- bof upload alerts -->
<?php if ($messageStack->size('upload') > 0) echo $messageStack->output('upload'); ?>
<!-- eof upload alerts -->

<div id="centerHeaderBackground"></div>
<?php
 /**
  * prepares and displays center column
  *
  */
 require($body_code); ?>

<?php
  if (SHOW_BANNERS_GROUP_SET4 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET4)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerFour" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?></td>

<?php
//if (COLUMN_RIGHT_STATUS == 0 || (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '') || (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_COLUMN_RIGHT_OFF == 'true' && $_SESSION['customers_authorization'] != 0)) {
if (COLUMN_RIGHT_STATUS == 0 || (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '') || (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_COLUMN_RIGHT_OFF == 'true' and ($_SESSION['customers_authorization'] != 0 or $_SESSION['customer_id'] == ''))) {
  // global disable of column_right
  $flag_disable_right = true;
}
if (!isset($flag_disable_right) || !$flag_disable_right) {
?>
<td id="navColumnTwo" class="columnRight">
<?php
 /**
  * prepares and displays right column sideboxes
  *
  */
?>
<div id="navColumnTwoWrapper"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_right.php')); ?></div></td>
<?php
}
?>
  </tr>
</table>

<?php
 /**
  * prepares and displays footer output
  *
  */
  if (CUSTOMERS_APPROVAL_AUTHORIZATION == 1 && CUSTOMERS_AUTHORIZATION_FOOTER_OFF == 'true' and ($_SESSION['customers_authorization'] != 0 or $_SESSION['customer_id'] == '')) {
    $flag_disable_footer = true;
  }
  require($template->get_template_dir('tpl_footer.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_footer.php');
?>

</div>
<!--bof- parse time display -->
<?php
  if (DISPLAY_PAGE_PARSE_TIME == 'true') {
?>
<div class="smallText center">Parse Time: <?php echo $parse_time; ?> - Number of Queries: <?php echo $db->queryCount(); ?> - Query Time: <?php echo $db->queryTime(); ?></div>
<?php
  }
?>
<!--eof- parse time display -->
<!--bof- banner #6 display -->
<?php
  if (SHOW_BANNERS_GROUP_SET6 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET6)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerSix" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
    }
  }
?>
<!--eof- banner #6 display -->
</body>

[georgiepants]

I've attached the 3 images that make the 'curved" edge near the center Column






and the screen shot of where I'm at now...



here's the entire stylesheet.css for the template;

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $
 */

body {
	margin: 0;
	font-family: helvetica, arial, sans-serif;
	font-size: 12px;
	background-color: #7E8AA2;
}

a {	text-decoration: none;
}
a img {border: none; }


h1 {
	font-size: 1.5em;
	}

h2 {
	font-size: 1.4em;
	}

h3 {
	font-size: 1.3em;
	}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
	font-size: 1.1em;
	}

.biggerText {
	font-size: 1.2em;
	}

h1, h2, h3, h4, h5, h6 {
	margin: 0.3em 0;
	}

/*  Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p {
	position: relative;
	}
*html .centerColumn {
	height: 1%;
	}
*/

CODE {
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 1em;
	}

FORM, SELECT, INPUT {
	display: inline;
	font-size: 1em;
	margin: 0.1em;
	}

TEXTAREA {
	margin: auto;
	display: block;
	width: 95%;
	}

input:focus, select:focus, textarea:focus {
	background: #E4FEF5;
	}

FIELDSET {
	padding: 0.5em;
	margin: 0.5em 0em;
	border: 1px solid #cccccc;
	}

LEGEND {
	font-weight: bold;
	padding: 0.3em;
	color: black;
	}

LABEL, h4.optionName {
	line-height: 1.5em;
	padding: 0.2em;
	}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
	margin: 0.5em 0.3em;
	}

#logo {
	right:10px;
	top:10px;
	position:absolute;
}
#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}

LABEL.inputLabel {
	width: 9em;
	float: left;
	}

LABEL.inputLabelPayment {
	width: 14em;
	float: left;
	padding-left: 2.5em;
	}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
	width: 11em;
	float: left;
	}

#checkoutPayment LABEL.radioButtonLabel {
	font-weight: bold;
	}

P, ADDRESS {
	padding: 0.5em;
	}

ADDRESS {
	font-style: normal;
	}

.clearBoth {
	clear: both;
	font-size:0;
	padding:0;
	margin:0;
}

HR {
	height: 1px;
	margin-top: 0.5em;
	border: none;
	border-bottom: 1px solid #9a9a9a;
	}

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height: 1.8em;
	padding: 0.2em;
	border: 1px solid #9a9a9a;
	}

.messageStackWarning, .messageStackError {
	background-color: #ff0000;
	color: #ffffff;
	}

.messageStackSuccess {
	background-color: #99FF99;
	color: #000000;
	}

.messageStackCaution {
	background-color: #FFFF66;
	color: #000000;
	}

/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #ffffff;
	text-align: left;
	width: 900px;
	vertical-align: top;
	border: 0px solid #9a9a9a;
}
, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;

	}

#contentMainWrapper {
	background-color:#ffffff;
}
#headerWrapper {
}
#logoWrapper{
	background-image: url(../images/WindowBackground.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	height:200px;
	margin:0;
	position:relative;
	}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	} 

.columnLeft {
	background-color:#263248;
}
#navColumnOneWrapper{
	margin:0;

}
#navColumnTwoWrapper {
	margin:0;
}	
#tagline {
	color:#000000;
	font-size: 2em;
	text-align : center;
	vertical-align: middle;
	visibility: hidden;
	}

#sendSpendWrapper {
	border: 1px solid #cacaca;
	float: right;
	margin: 0em 0em 1em 1em;
	}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
	margin: 0;
	width: 47%;
	}

.wrapperAttribsOptions {
	margin: 0.3em 0em;
	}

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}

.navNextPrevCounter {
	margin: 0em;
	font-size: 0.9em;
	}
.navNextPrevList {
	display: inline;
	white-space: nowrap;
	margin: 0;
	padding: 0.5em 0em;
	list-style-type: none;
	}

#navMainWrapper {
	margin: 0em;
	background-image: url(../images/TopPanelBackground.gif);
	background-color:black;
	background-repeat: repeat-y;
	font-weight: bold;
	color: #ffffff;
	height:50px;
	}

#navSuppWrapper {
	background-image: url(../images/FooterBackground.gif);
	background-repeat: repeat-x;
	font-weight: bold;
	height:75px;
	padding-top:5px;
	}
#navSupp {
	margin:10px;
}

#navCatTabsWrapper {
	height:0px;
	visibility: hidden;
	color: #9a9a9a;
}

#navMain {
	padding-top:0px;
	padding-left:200px;
	margin-top:13px;
	margin-left:15px;
	font-size:16px;
	float:left;
	background-image: URL(../images/TopPanelText1.gif);
	background-repeat: no-repeat;
	height:25px;
}
#navMain ul, #navSupp ul, #navCatTabs ul {
	margin:0;
	padding:0;
	list-style-type: none;
	text-align: center;
	line-height: 1.5em;
	}

#navSupp ul {
	text-align:right;
	margin-right:30px;
}
#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;
	}

#navMain ul li a {
	text-decoration: none;
	margin: 0;
	padding-left:20px;
	color: #263248;
	white-space: nowrap;
	}

#navSupp ul li a {
	text-decoration: none;
	margin: 0;
	padding-left:20px;
	color: #000000;
	white-space: nowrap;
	}

#navCatTabs ul li a {
	color: #9a9a9a;
}

#navEZPagesTOCWrapper {
	font-weight: bold;
	float: right;
	height: 1%;
	border: 1px solid #9a9a9a;
	}

#navEZPagesTOC ul {
	margin: 0;
	padding: 0.5em 0em;
	list-style-type: none;
	line-height: 1.5em;
	}

#navEZPagesTOC ul li {
	white-space: nowrap;
	}

#navEZPagesTOC ul li a {
	padding: 0em 0.5em;
	margin: 0;
	}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
	margin: 0.5em;
	}

#navMainSearch {
	float: right;
	padding-right:20px;
	padding-top:15px;
	font-size:10px;
	}

#navBreadCrumb {
	background-color:#263248;
	background-image: url(../images/NavBarBackground.gif);
	background-repeat: repeat-x;
	font-size: 14px;
	font-weight: bold;
	margin: 0;
	padding-top: 13px;
	padding-left: 12px;
	height:28px;
	color:#000000;
}

#navBreadCrumb a {
	color:#000000;
}

#navEZPagesTop {
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	margin: 0;
	padding-top: 150px;
	padding-right: 20px;
	text-align:right;
	height:20px;
	}
#navEZPagesTop a {
	color: #000000;
	font-weight: bold;
}

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
	vertical-align: top;
	}

#productDescription, .shippingEstimatorWrapper {
	/*font-size: 1.2em;*/
	padding: 0.5em;
	}

.alert {
	color: #FF0000;
	margin-left: 0.5em;
	}
.advisory {}
.important {
	font-weight: bold;
	}
.notice {}
.rating{}
.gvBal {
	float: right;
	}
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
	padding-left:30px;
}
.centerColumn {
	background-image: URL(../images/MenuRightHeader.gif);
	background-repeat: no-repeat;
	padding-top:10px;
}

#centerBackground {
	background-image: URL(../images/MenuRightBackground.gif);
	background-repeat: repeat-y;
}

{ background-image: URL(../images/MenuRightFooter.gif);
        background-repeat: no-repeat;
}

 .smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
	font-size: 0.9em;
	background-color:#7E8AA2;
}
#siteinfoIP {
    padding-top:10px;
}

/*Shopping Cart Display*/
#cartAdd {
	float: right;
	text-align: center;
	margin: 1em;
	border: 1px solid #000000;
	padding: 1em;
	}

.tableHeading TH {
	border-bottom: 1px solid #9a9a9a;
	}

.tableHeading, #cartSubTotal {
	background-color: #e9e9e9;
	 }

#cartSubTotal {
	border-top: 1px solid #cccccc;
	font-weight: bold;
	text-align: right;
	line-height: 2.2em;
	padding-right: 2.5em;
	}

.tableRow, .tableHeading, #cartSubTotal {
	height: 2.2em;
	}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
	padding: 0.5em 0em;
	}

.cartUnitDisplay, .cartTotalDisplay {
	text-align: right;
	padding-right: 0.2em;
	}

#scUpdateQuantity {
	width: 2em;
	}

.cartQuantity {
	width: 4.7em;
	}

.cartNewItem {
	color: #33CC33;
	position: relative;  /*do not remove-fixes stupid IEbug*/
	}

.cartOldItem {
	color: #660099;
	position: relative;  /*do not remove-fixes stupid IEbug*/
	}

.cartBoxTotal {
	text-align: right;
	font-weight: bold;
	}

.cartRemoveItemDisplay {
	width: 3.5em;
	}

.cartAttribsList {
	margin-left: 1em;
	}

#mediaManager {
	width: 50%; 
	margin: 0.2em;
	padding: 0.5em;
	background-color: #E4FEf5;
	border: 1px solid #003D00;
	}
.mediaTitle {
	float: left;
	}
.mediaTypeLink {
	float: right;
	}

.normalprice, .productSpecialPriceSale {
	text-decoration: line-through;
	}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
	color: #ff0000;
	}

.orderHistList {
	margin: 1em;
	padding: 0.2em 0em;
	list-style-type: none;
	} 

#cartBoxListWrapper ul, #ezPageBoxList ul {
	list-style-type: none;
	}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
	margin: 0;
	padding: 0.2em 0em;
	} 

#cartBoxEmpty, #cartBoxVoucherBalance {
	font-weight: bold;
	}

.totalBox {
	width: 5.5em;
	text-align: right;
	padding: 0.2em;
	}

.lineTitle, .amount {
	text-align: right;
	padding: 0.2em;
	}

.amount {
	width: 5.5em;
	}

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .listingProductImage {
	margin: 3px;
	background-color:white;
	padding:5px;
	}

.categoryIcon {}

#cartImage {
	margin: 0.5em 1em;
	}

/*Attributes*/
.attribImg {
	width: 20%;
	margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
	margin: 1em 0em;
	}

.centerBoxWrapper {
	margin: 1.1em 0;
	}

h2.centerBoxHeading {
	font-size: 1.3em;
	color: #ffffff;
	}

/*sideboxes*/
.columnLeft {
    padding:10px;
    width:200px;
}

h3.leftBoxHeading, .leftBoxHeading a {
	font-size: 15px;
	color: #FFFFFF;
}
.leftBoxContainer, .leftBoxContainer a {
	color: #FFFFFF;
}
h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 15px;
	color: black;
	}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
	font-size: 0.9em;
	color: #white;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
	margin: 0em;
	color: #FFFFFF;
	}

.rightBoxContainer {
    padding:10px;	
}

.leftBoxContainer {
    margin-bottom:20px;
}

.sideBoxContent {
	padding: 0.4em;
}


.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
	text-align: center;
	}

#bestsellers .wrapper {
	margin: 0em 0em 0em 1.5em;
	}

#bestsellers ol {
	padding: 0;
	margin-left: 1.1em;
	}

#bestsellers li {
	padding: 0;
	margin: 0.3em 0em 0.3em 0em;
	}

#bannerboxHeading {
	background-color: #0000CC;
}

#upProductsHeading {
	text-align: left;
	}

#upDateHeading {
	text-align: right;
	}

/* categories box parent and child categories */

a.category-subs, a.category-products {
	color: #FFFFFF;
	display: block;
	width:140px;
	float:left;
	text-decoration: none;
}

#categoriesContent, #documentcategoriesContent {
	position:relative;
}
#categoriesContent a, #documentcategoriesContent a {
	margin-left:10px;

}
#categoriesContent em, #documentcategoriesContent em {
	position: absolute;
	right: 10px;
}

SPAN.category-subs-parent {
	font-weight: bold;
	}
SPAN.category-subs-selected {
	font-weight: bold;
	}
/* end categories box links */

/*misc*/
.back {
	float: left;
	}

.forward, #shoppingCartDefault #PPECbutton {
	float: right;
	}

.bold {
	font-weight: bold;
	}

.rowOdd {
	background-color: #E8E8E8;
	height: 1.5em;
	vertical-align: top;
	}

.rowEven {
	background-color: #F0F0F0;
	height: 1.5em;
	vertical-align: top;
	}

.hiddenField {
	display: none;
}
.visibleField {
	display: inline;
}

CAPTION {
	/*display: none;*/
	}

#myAccountGen li, #myAccountNotify li {
	margin: 0;
	} 

.accountTotalDisplay, .accountTaxDisplay {
	width: 20%;
	text-align: right;
	/*vertical-align: top*/
	}

.accountQuantityDisplay {
	width: 10%;
	vertical-align: top
	}

TR.tableHeading {
	background-color: #cacaca;
	height: 2em;
	}

.productListing-rowheading {
	background-color: #263248;
	height: 2em;
	color: #FFFFFF;
	}
.productListing-rowheading a {
	color: white;
}
#siteMapList {
	width: 90%;
	float: right;
	}

.ratingRow {
	margin: 1em 0em 1.5em 0em;
	}

LABEL#textAreaReviews {
	font-weight: normal;
	margin: 1em 0em;
	}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
	background-color: #ffffff;
	}
.information {padding: 10px 3px; line-height: 150%;}

#shoppingcartBody #shippingEstimatorContent {
	clear: both;
	}

.seDisplayedAddressLabel {
	background-color:#85C285;
	text-align: center;
	}
.seDisplayedAddressInfo {
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	}
#seShipTo {
	padding: 0.2em;
	}

[niccol]

OK. Without being able to see it on a screen I am shooting in the dark a bit. I guess it is on a local server? If not can you post a URL?

Here's a interesting (in a kind of geeky way) bit of code:

<div id="centerHeaderBackground"></div>
<?php
 /**
  * prepares and displays center column
  *
  */
 require($body_code); ?>

The first line of that is definitely non-standard - and is almost in the right place - and doesn't seem to do much else - and has a weird ID.

The rest of the code does what it says in the comment - it prepares and displays the center column. So , I might try this:

<div id="centerHeaderBackground">
<?php
 /**
  * prepares and displays center column
  *
  */
 require($body_code); ?>
</div>

And then apply a stylesheet rule to add the desired image to the bottom left of this div (#centerHeaderBackground).

But as I say without being able to see the page this is all a bit of a guess and may result in a horrible road traffic accident - so make sure that you are backed up. As long as you can undo what you do you'll be fine.

[gjh42]

This is the overall center column container:
<td valign="top" id="centerBackground">
There are no other container divs for this in your tpl_main_page.php. Look in tpl_index_default.php and some similar files for the code that builds the center container.

[georgiepants]

Thanks for the replies Not quite there yet, its proving to be a stubborn little css issue...

The site isn't live yet but here's the source code from the index,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>Zen Cart</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="The Zen Cart&trade; Team and others" />
<meta name="generator" content="shopping cart program by Zen Cart&trade;, http://www.zen-cart.com eCommerce" />

<base href="http://">

<link rel="stylesheet" type="text/css" href="includes/templates/372/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/372/css/stylesheet_css_buttons.css" />
<link rel="stylesheet" type="text/css" media="print" href="includes/templates/372/css/print_stylesheet.css" />

</head>

<body id="indexHomeBody">

<div id="mainWrapper">



<!--bof-header logo and navigation display-->

<div id="headerWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><a href="http://">Home</a></li>

    <li><a href="https://">Log In</a></li>

</ul>
</div>
<div id="navMainSearch"></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><a href=""><img src="includes/templates/template_default/images/.gif" alt="" /></a></div>
    <div id="taglineWrapper">

      <div id="tagline"></div>
    </div>

<!--bof-header ezpage links-->
<!--eof-header ezpage links-->


</div>
<!--eof-branding display-->

<!--eof-header logo and navigation display-->

<!--bof-optional categories tabs navigation display-->
<!--eof-optional categories tabs navigation display-->

<!-- bof  breadcrumb -->
    <div id="navBreadCrumb">Home
</div>
<!-- eof breadcrumb -->


</div>

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">
  <tr>

 <td id="navColumnOne" class="columnLeft">
<div id="navColumnOneWrapper"><!--// bof: categories //-->

<div class="leftBoxContainer" id="categories">
<h3 class="leftBoxHeading" id="categoriesHeading">Categories</h3>
<div id="categoriesContent" class="sideBoxContent">
<a class="category-top" href=""></a><em>&nbsp;(1)</em><br />
<a class="category-top" href=""></a><br />
<a class="category-top" href=""></a><em>&nbsp;(1)</em><br />
<hr id="catBoxDivider" />
<a class="category-links" href="></a><br />
<a class="category-links" href="l"></a>

</div></div>
<!--// eof: categories //-->

<!--// bof: information //-->
<div class="leftBoxContainer" id="information">
<h3 class="leftBoxHeading" id="informationHeading">Information</h3>
<div id="informationContent" class="sideBoxContent">
<ul style="margin: 0; padding: 0; list-style-type: none;">
<li><a href="http://enamieyes.com/store/index.php?main_page=shippinginfo">Shipping &amp; Returns</a></li>
<li><a href="">Privacy Notice</a></li>
<li><a href="">Conditions of Use</a></li>

<li><a href="">Contact Us</a></li>
<li><a href="">Site Map</a></li>
<li><a href="">Gift Certificate FAQ</a></li>
<li><a href="">Discount Coupons</a></li>
<li><a href="">Newsletter Unsubscribe</a></li>
</ul>
</div></div>
<!--// eof: information //-->

<!--// bof: moreinformation //-->
<div class="leftBoxContainer" id="moreinformation">
<h3 class="leftBoxHeading" id="moreinformationHeading">More Information</h3>

<div id="moreinformationContent" class="sideBoxContent">

<ul style="margin: 0; padding: 0; list-style-type: none;">
<li><a href="">Page 2</a></li>
<li><a href="">Page 3</a></li>
<li><a href="">Page 4</a></li>
</ul>
</div></div>
<!--// eof: moreinformation //-->

<!--// bof: whatsnew //-->
<div class="leftBoxContainer" id="whatsnew">
<h3 class="leftBoxHeading" id="whatsnewHeading"><a href="">New Products&nbsp;&nbsp;[more]</a></h3>

<div class="sideBoxContent centeredContent"><a href=""><img src="" </div></div></div>
<!--// eof: whatsnew //-->

<div class="leftBoxContainer">


</div>
</div></td>
    <td valign="top" id="centerBackground">
    
<!-- bof upload alerts -->
<!-- eof upload alerts -->

<div id="centerHeaderBackground"></div>
<div class="centerColumn" id="indexDefault">
<h1 id="indexDefaultHeading">Welcome to my Shop</h1>

<h2 class="greeting">Hello <span class="greetUser">Guest!</span> Would you like to <a href="">log in</a>?</h2>

<!-- deprecated - to use uncomment this section
<div id="" class="content">This is the main define statement for the page for english when no template defined file exists. It is located in: <strong>/includes/languages/english/index.php</strong></div>
-->

<!-- deprecated - to use uncomment this section
<div id="" class="content">Define your main Index page copy here.</div>
-->

<div id="indexDefaultMainContent" class="content"></div>





<!-- bof: whats_new -->
<div class="centerBoxWrapper" id="whatsNew">
<h2 class="centerBoxHeading">New Products For January</h2>
    <div class="centerBoxContentsNew centeredContent back" style="width:50%;"><a href=""><img src="" /></a><br /><a href=""></a><br />$2.85</div>

    <div class="centerBoxContentsNew centeredContent back" style="width:50%;"><a href=""><img src=" /></a><br /><a href=""></a><br />$6.95</div>
<br class="clearBoth" />
 
</div>
<!-- eof: whats_new -->





<!-- bof: featured products  -->
<!-- eof: featured products  -->







<!-- bof: specials -->
<!-- eof: specials -->









</div>
</td>


</tr>
</table>



<!--bof-navigation display -->
<div id="navSuppWrapper">
<div id="navSupp">
<ul>
<li><a href="">Home</a></li>
<li></li>

</ul>
</div>
</div>

<!--eof-navigation display -->

<!--bof-ip address display -->
<div id="siteinfoIP">Your IP Address is:</div>
<!--eof-ip address display -->

<!--bof-banner #5 display -->
<div id="bannerFive" class="banners"></div>
<!--eof-banner #5 display -->

<!--bof- site copyright display -->
<div id="siteinfoLegal" class="legalCopyright">Copyright &copy</div>
<!--eof- site copyright display -->


</div>

<!--bof- parse time display -->
<!--eof- parse time display -->
<!--bof- banner #6 display -->
<!--eof- banner #6 display -->
</body></html>

[niccol]

Well, that's my point. The container divs are just not there at all.

So, we do not exactly know how the bottom corner was intended to be there. It seems like the structure for it is just not there which is a bit mystifying as it comes from a downloaded template. (or maybe not) Perhaps I am missing something....

What I would try is to create a container div to put it in. To go back to where we were:

<div id="centerHeaderBackground"></div>
<?php
 /**
  * prepares and displays center column
  *
  */
 require($body_code); ?>

I would either do what i said and try and use #centerHeaderBackground. The disadvantage of this is that I do not really know for sure that it is doing nothing special. So, instead let's add a new div.

<div id="centerHeaderBackground"></div>
<div id="newDiv">
<?php
 /**
  * prepares and displays center column
  *
  */
 require($body_code); ?>
</div>

The create a css rule that puts the correct image in the bottom left corner of this new div. Something like the rule that is hanging around loose in the css file:

{ background-image: URL(../images/MenuRightFooter.gif);
        background-repeat: no-repeat;
}

So make it:

#newDiv{
background-image: URL(../images/MenuRightFooter.gif);
background-repeat: no-repeat;
background-position: bottom left;
}

You may have issues with padding, margins and borders so that may need to be tweaked.

[niccol]

After a cup of coffee here is an afterthought.

If you do try this then you may have to re-arrange the order in which the images are applied. You are creating nested <div>s. You want the corners to be applied to the innermost <div>s other wise they may not be visible.

[georgiepants]

After a cup of coffee here is an afterthought.

If you do try this then you may have to re-arrange the order in which the images are applied. You are creating nested <div>s. You want the corners to be applied to the innermost <div>s other wise they may not be visible.

Nick,

I used the nested div you suggested...

<div id="centerHeaderBackground">
<div id="newDiv">
<?php
 /**
  * prepares and displays center column
  *
  */
 require($body_code); ?>
</div>
</div>

and tweaked padding in the css as well...

.centerColumn {
	background-image: URL(../images/MenuRightHeader.gif);
	background-repeat: no-repeat;
	padding-top:10px;
        background-position: top left;
}

#centerBackground {
	background-image: URL(../images/MenuRightBackground.gif);
	background-repeat: repeat-y;
        background-position: top left;
}

#newDiv{
background-image: URL(../images/MenuRightFooter.gif);
background-repeat: no-repeat;
background-position: bottom left;
padding-bottom: 100%;
}

and i got this,


which seems ok.

But without the padding the MenuRightFooter.gif is directly under whatever products are in the center.


The new challenge is to find a way to permanently align the MenuRightFooter.gif image to the bottom of the left column, since the center column's length seems to be dictated by how much content is displaying in the LEFT COLUMN.

Now THAT would be perfect!