Lavender Template Support Thread

**andoverit** · 22 Sep 2009, 11:06 AM

Am having a big problem moving the site from the test site to the live one. As far as I can see I have done all I should have:

Installed a clean version of ZenCart on the NEW site
Moved the files from the OLD site to the NEW site except the 2 configure.php files
Imported t

he database from the OLD site to the NEW site

It doesn't look right though. Any suggestions?

I also need to go through the links in the dscriptions and update them from the old site (http://www.olddomain.com/testshop) to the new one (http://www.newdomain.com). Apart from manually going through, any ideas?

Thanks Kobra

**andoverit** · 22 Sep 2009, 01:43 PM

Sods Law - looks like it's sorted now. Will post exactly how I did for future reference for others later.

**dw08gm** · 4 May 2010, 12:22 PM

Hi Kobra

I thought I would post this Footer Always At Bottom Of Screen code here first as it was built using your??? Lavender template and is based on the three column fluid design design of pmob.

Please note that while this works for me, I cannot really explain how it works, or why it may fail for others.

The following is the skeletal framework of
\includes\templates\your_template\common\tpl_main_page.php.
The key elements are the divs and their order of placement.

Code:

<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>

<!-- bof header -->
<!-- eof header -->

<div id="mainWrapper">
<div id="clearheader"><!-- to clear header --></div>

<div id="contentMainWrapper">

<!-- bof navColumnOne -->
<div id="navColumnOne" class="columnLeft" style="width: <?php echo COLUMN_WIDTH_LEFT; ?>">
<div id="navColumnOneWrapper" style="width: <?php echo BOX_WIDTH_LEFT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_left.php')); ?></div>
</div>
<!-- eof navColumnOne -->

<!-- bof navColumnTwo -->
<div id="navColumnTwo" class="columnRight" style="width: <?php echo COLUMN_WIDTH_RIGHT; ?>">
<div id="navColumnTwoWrapper" style="width: <?php echo BOX_WIDTH_RIGHT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_right.php')); ?></div>
</div>
<!-- end navColumnTwo -->

<!-- bof  center content -->
<!-- eof  center content  -->

</div><!-- end contentMainWrapper -->

<div id="clearfooter"><!-- to clear footer --></div>

</div><!-- end mainWrapper -->

<!-- bof footerWrapper -->
<div id="footerWrapper">
</div><!-- eof footerWrapper -->

</body>

The following is the key ingredient of
\includes\templates\your_template\css\stylesheet.css

Code:

html, body {
	height: 100%;
	max-width: 1300px;
	margin:0 auto;
	}

* html {height:100%;}

body {
	margin: 0;
	padding: 0;
	border: 0;
	}

#mainWrapper {
	position:relative;
	min-height: 100%;
	margin-left:20%; /* adjustable */
	margin-right:20%; /* adjustable */
	}

* html #mainwrapper { height:100%;} /* for mozilla as IE treats height as min-height anyway */

#clearheader { /* needed to make room for headerWrapper */
	height:140px;
	}

#headerWrapper {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:140px; /* same as clearHeader height */
	}

/* mac hide \*/
* html #headerWrapper {height: 140px; he\ight: 1px} /* height needed for ie to force layout*/
/* end hide */

#contentMainWrapper {
	position:relative;
	width: 100%;
	margin: 0 auto;
	}

.centerColumn { 
	width: auto;
	padding: 0 1em;
	}

/* mac hide\ */
* html #centerColumn {height:1%;} /* combat IE's 3 pixel jog */
/* end hide */

#navColumnOne {
	position:relative; /* ie needs this to show float */
	float:left;
	margin-left:-27%; /*  note negative sign, value same or slightly larger than Layout Settings COLUMN_WIDTH_LEFT */
	margin-right:1px; /* makes element 1px smaller than width otherwise won't push footer down */
	}

#navColumnTwo {
	position:relative; /* ie needs this to show float */
	float:right;
	margin-right:-27%; /* note negative sign, value same or slightly larger than Layout Settings COLUMN_WIDTH_RIGHT*/
	margin-left:1px; /* makes element 1px smaller than width otherwise won't push footer down */

	}

#navColumnOneWrapper {
	margin: 0 auto; /* required */
	}

#navColumnTwoWrapper {
	margin: 0 auto; /* required */
	}

#clearfooter { /* needed to make room for footer */
	clear:both;
	height:130px; /* height of footer */
	}

#footerWrapper {
	clear: both;
	position: relative;
	bottom: 0px;
	height: 130px;   /* Height of the footer */
	margin-top: -130px; /* negative value drags footer back into page */
	width: 100%;
	}

* html #footerWrapper { /* only ie gets this style */
	\height:130px; /* for ie5 */
	he\ight:128px; /* for ie6 */
	}

Admin > Configuration > Layout Settings

Code:

Column Width - Left Boxes  	96%
Column Width - Right Boxes 	96%

Column Width - Left  	25%
Column Width - Right 	25%

Enjoy.

**Budgee Bare** · 15 Jun 2010, 04:55 PM

Hello from The Great Smokey Mountains of East Tennessee. USA

My wife and I have a website called Groove-eMart,Com. We are using Zen Cart Ver. 1.3.9b and we are trying to use the lavender template.

The Template is great, but we are having 2 problems.

1. We can not get the logo.gif to scan the full width of the screen.
I think this may have to do with the fact that I have the #mainWrapper width set to 100%. I don't like the narrow width of the default template. I have logo.gif set to 150 px high and 1000 px wide.

Yes! I have searched the FAQ's and this Thread for the answer. But I am still confused.

2 The second problem we are having is the purple bar just below the area were the categories go. The light purple bar that divides the header from the side boxes. We want the font in this bar to be white. How can I change that? Black on Purple is hard to read. I'm sure we need to change the css file to do that, but which line?

You can get to our website athttp://www.groove-emart.com

And while you are there please look around and see if you can offer us any other suggestions on how we can improve this website.

Thank You in advance
Budgee Bare

**kobra** · 15 Jun 2010, 07:11 PM

Originally Posted by Budgee Bare

We can not get the logo.gif to scan the full width of the screen.
I think this may have to do with the fact that I have the #mainWrapper width set to 100%. I don't like the narrow width of the default template. I have logo.gif set to 150 px high and 1000 px wide.

The template as delivered has the mainWrapper set to 100% so as to be a "Fluid" layout
You can optionally set it to be the same as your image - 1000px

OR this might assist by adding this line to the #logo div
Try it and see

Code:

#logo {
	margin: 0em;
        background-color: #ffffff;
/*	float: left; */
	text-align: center;
	padding-top: 0px;
	}

**jagall** · 9 Aug 2011, 10:28 AM

Originally Posted by dw08gm

Hi Kobra

I thought I would post this Footer Always At Bottom Of Screen code here first as it was built using your??? Lavender template and is based on the three column fluid design design of pmob.

Please note that while this works for me, I cannot really explain how it works, or why it may fail for others.

The following is the skeletal framework of
\includes\templates\your_template\common\tpl_main_page.php.
The key elements are the divs and their order of placement.

Code:

<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>

<!-- bof header -->
<!-- eof header -->

<div id="mainWrapper">
<div id="clearheader"><!-- to clear header --></div>

<div id="contentMainWrapper">

<!-- bof navColumnOne -->
<div id="navColumnOne" class="columnLeft" style="width: <?php echo COLUMN_WIDTH_LEFT; ?>">
<div id="navColumnOneWrapper" style="width: <?php echo BOX_WIDTH_LEFT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_left.php')); ?></div>
</div>
<!-- eof navColumnOne -->

<!-- bof navColumnTwo -->
<div id="navColumnTwo" class="columnRight" style="width: <?php echo COLUMN_WIDTH_RIGHT; ?>">
<div id="navColumnTwoWrapper" style="width: <?php echo BOX_WIDTH_RIGHT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_right.php')); ?></div>
</div>
<!-- end navColumnTwo -->

<!-- bof  center content -->
<!-- eof  center content  -->

</div><!-- end contentMainWrapper -->

<div id="clearfooter"><!-- to clear footer --></div>

</div><!-- end mainWrapper -->

<!-- bof footerWrapper -->
<div id="footerWrapper">
</div><!-- eof footerWrapper -->

</body>

The following is the key ingredient of
\includes\templates\your_template\css\stylesheet.css

Code:

html, body {
	height: 100%;
	max-width: 1300px;
	margin:0 auto;
	}

* html {height:100%;}

body {
	margin: 0;
	padding: 0;
	border: 0;
	}

#mainWrapper {
	position:relative;
	min-height: 100%;
	margin-left:20%; /* adjustable */
	margin-right:20%; /* adjustable */
	}

* html #mainwrapper { height:100%;} /* for mozilla as IE treats height as min-height anyway */

#clearheader { /* needed to make room for headerWrapper */
	height:140px;
	}

#headerWrapper {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:140px; /* same as clearHeader height */
	}

/* mac hide \*/
* html #headerWrapper {height: 140px; he\ight: 1px} /* height needed for ie to force layout*/
/* end hide */

#contentMainWrapper {
	position:relative;
	width: 100%;
	margin: 0 auto;
	}

.centerColumn { 
	width: auto;
	padding: 0 1em;
	}

/* mac hide\ */
* html #centerColumn {height:1%;} /* combat IE's 3 pixel jog */
/* end hide */

#navColumnOne {
	position:relative; /* ie needs this to show float */
	float:left;
	margin-left:-27%; /*  note negative sign, value same or slightly larger than Layout Settings COLUMN_WIDTH_LEFT */
	margin-right:1px; /* makes element 1px smaller than width otherwise won't push footer down */
	}

#navColumnTwo {
	position:relative; /* ie needs this to show float */
	float:right;
	margin-right:-27%; /* note negative sign, value same or slightly larger than Layout Settings COLUMN_WIDTH_RIGHT*/
	margin-left:1px; /* makes element 1px smaller than width otherwise won't push footer down */

	}

#navColumnOneWrapper {
	margin: 0 auto; /* required */
	}

#navColumnTwoWrapper {
	margin: 0 auto; /* required */
	}

#clearfooter { /* needed to make room for footer */
	clear:both;
	height:130px; /* height of footer */
	}

#footerWrapper {
	clear: both;
	position: relative;
	bottom: 0px;
	height: 130px;   /* Height of the footer */
	margin-top: -130px; /* negative value drags footer back into page */
	width: 100%;
	}

* html #footerWrapper { /* only ie gets this style */
	\height:130px; /* for ie5 */
	he\ight:128px; /* for ie6 */
	}

Admin > Configuration > Layout Settings

Code:

Column Width - Left Boxes  	96%
Column Width - Right Boxes 	96%

Column Width - Left  	25%
Column Width - Right 	25%

Enjoy.

Hi dw08gm this sticky footer is driving me mad and have been trying to implement your code, slowly getting there but not sure. Do you replace the existing divs in the CSS with the ones you have.
I have footer menu 4 col but it is not sitting in the wrapper rather above it and also cannot get my header image to come back in as want this at 100% width too. Is this working for you now?

**dw08gm** · 11 Aug 2011, 04:47 PM

Hi Jagall

It almost drove me mad until I got the hang of it, but now it works brilliantly.

If I may quote "I suffered for my music, now it's your turn."

The clearFooter and footerWrapper divs are new template additions, and all of your footer content would go into the footerWrapper div, unless you determine otherwise.

Temporarily changing the background colors of all the divs may help visualise the layout better.

The trick to maintaing a vertical scroll bar, which prevents the layout from jumping about when loading the page, is to make the height of the footerWrapper div 1px larger than that of the clearFooter div, (ie 131px intead of the 130px shown).

To apply a maximum width to your pages for different screen widths, ensure this is in your body html and headerWrapper divs

Code:

	width:100%;
	max-width:1300px; /* change to suit */

Hope this helps.

**jagall** · 11 Aug 2011, 05:36 PM

Hi dw08gm thanks for this I actually abandoned it as I removed the footer callout in the tpl main page to outside the div as advised by Kobra in this post http://www.zen-cart.com/forum/showthread.php?p=980052
Still you can see that I am still struggling with trying to the get the menu items not to stretch, same problem with the headerwrapper, here is link. See websites like this all the time that have browser wide images and then layered with menus or social icons, cannot get a handle on it yet and I know this is prob kids play to some but really doing my nut in. Thanks again

**dw08gm** · 11 Aug 2011, 06:49 PM

Hi Jagall

Kobras solution only works for pages longer than screen height.

For pages shorter than screen height, the footer will not likely sit at the bottom of the screen, but will rise up to the bottom of the content. Just as well you have lots of sideboxes.

It is not clear to me what you mean by "not to stretch", but I suspect your solution is just a matter of playing with css properties, especially:
float:
width:
margin: 0 auto;
padding:

All the best.

Thread: Lavender Template Support Thread

Thread Tools

Search Thread

Display

Hybrid View

Re: Lavender Template Support Thread

Re: Lavender Template Support Thread

Footer Always At Bottom Of Screen

Re: Lavender Template Support Thread

Re: Lavender Template Support Thread

Re: Footer Always At Bottom Of Screen

Re: Lavender Template Support Thread

Re: Lavender Template Support Thread

Re: Lavender Template Support Thread

Similar Threads

v150 aBagon Template Support Thread

TB Sempre Template Support Thread

Rustic Template Support Thread

Watermelon Template Support Thread

DigitalShop Template Support Thread

Posting Permissions