Lavender Template Support Thread

**kobra** · 12 Sep 2010, 06:46 AM

fei2010 where is your site?

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

**jagall** · 11 Aug 2011, 07:58 PM

Hi dw08gm,
know what you mean it doesn't actually stick so might try your method again. What I mean is that I just want the menu items in the footer to stay put at the bottom of template rather than expanding to fit browser width but as you way I prob need to play around more with code thanks again.

**cv733** · 25 Jan 2012, 05:21 PM

I am considering this template for a fresh install with version 1.5. Does anyone know if this template is compatible, as it is, with version 1.5?

I notice it has not been updated in the templates section, and this thread has not been posted to in a while.

**kobra** · 29 Jan 2012, 03:49 AM

Originally Posted by cv733

Does anyone know if this template is compatible, as it is, with version 1.5?

Yes it should be fine

**cv733** · 29 Jan 2012, 04:30 PM

Thanks kobra. That is great news.

Will you be updating the Template Packages zen cart list, as some have already done, that the template is verified compatible with 1.5