template help

**gjh42** · 22 Jan 2010, 08:14 PM

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** · 23 Jan 2010, 01:13 AM

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,

Code:

<!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** · 23 Jan 2010, 10:18 AM

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:

Code:

<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.

Code:

<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:

Code:

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

So make it:

Code:

#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** · 23 Jan 2010, 11:07 AM

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** · 23 Jan 2010, 04:32 PM

Originally Posted by 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.

Nick,

I used the nested div you suggested...

Code:

<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...

Code:

.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,

Click image for larger version.

Name: template_padding.jpg
Views: 127
Size: 5.3 KB
ID: 6931

which seems ok.

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

Click image for larger version.

Name: template_no_padding.jpg
Views: 183
Size: 14.9 KB
ID: 6932

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!

**niccol** · 23 Jan 2010, 05:20 PM

OK. Well the answer might be to put the bottom left corner into the <td> and the top left corner into the div. So #centerBackground is the one that needs to have the bottom left corner.

Basically, the <td> will be full height but the div inside it might not be.

**gjh42** · 23 Jan 2010, 06:20 PM

Since you have a fixed-width #mainWrapper at 900px wide, you can know exactly how wide the center column will be.
Thus, you can make one bg with the entire top(TL & TR rounded corners) and another with the entire middle and bottom (BL & BR rounded corners). If you want a border, make the second gif taller than you will ever have a page so there will always be side borders.

Assign the bottom gif to the <td>, positioned at the bottom center, and the top gif to the first <div>, positioned at top center. This will always fill the column from top to bottom.

There is an alternate version of this method using three gifs, including one for the middle bg and side borders that repeats vertically so none of the gifs needs to be tall. That would not work so well for the "keep it full height" requirement.

Thread: template help

Thread Tools

Search Thread

Display

Hybrid View

Re: template help

Re: template help

Re: template help

Re: template help

Re: template help

Re: template help

Re: template help

Similar Threads

Currency selector broken using template from template-help.com

Purchased template from Template Monster ... need help.

Template Coding / CSS template location help please?

Need help modifying a Template Monster template

Help About New Template Install Please Help

Posting Permissions