Lavender Template Support Thread

fei2010 where is your site?

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.

<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 > > ``` 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
> 
> ```
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?

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." :yes:

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

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

Hope this helps.

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

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.

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.

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.

cv733:

Does anyone know if this template is compatible, as it is, with version 1.5?
Yes it should be fine

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

I'd like to make one very small change to the category pages. http://scentsandsilver.com/products/index.php?main_page=index&cPath=1 - The subcategory name, Beaded Garlands, shows up as a small text below the category description. I'd like to enlarge the font size so that it, and the other subcategories that will soon be added, are more visible. How would I do that?

Also, how do I make the heading "New Products [more]" a font size smaller, so it will fit better in the small space available?

Thank you for your help!!

Never mind on changing the "New Products [more]" font size; I just widened the side columns.

But I would still like to know how to remove the category and subcategory counts. Thanks!

Sorry, my brain is fried. I meant to say, I'd still like to know how to enlarge the font size so that it, and the other subcategories that will soon be added, are more visible.

You have a font-size declaration of 68.5% in your css body tag. Increasing this value will be site-wide. Also you do not seem to have defined a font-size for any betterCategories css tags of your catalog listing.

As for removing the category and subcategory counts, I believe there is an admin switch for this, but cannot recall where.

The Lavender template is somewhat dated, insofar as it is not responsive, which leads me to suspect you are running on an old version of zencart. Recent zc versions allow you to search for admin switches via Admin > Tools > Developers Tool Kit, but if you are running an old version, installing search_configuration_keys mod would help you find them.

Actually I'm running on the newest version of zencart; I just chose this template because the clients liked the color and layout.

I figured out the category and subcategory counts...yes, it was a switch in the admin section.

I don't want to increase the font size throughout the site...I only want to make it larger on the category pages so that the text categories beneath the category description are larger...without also increasing the size of the actual item descriptions. If I add something like <font size="2"> at the end of the category page description, it does make the text links nice and large...but then all the New Product listings are also much larger. I guess I'll just have to muddle by with very small text. :-<

Have you loaded the betterCategoriesEzInfo mod. It is old but still good.

I could not find it in plugins, so here is a copy.

Thanks very much. :smile:

One more question (I hope only one more)...I added thumbnails to the category pages so that the text links would stand out a little better. (http://scentsandsilver.com/products/index.php?main_page=index&cPath=1) But the thumbnails are also showing up on the category overview pages (http://scentsandsilver.com/products/index.php?main_page=index&cPath=1_18) and also on the individual product pages (http://scentsandsilver.com/products/index.php?main_page=product_info&cPath=1_18&products_id=1). I only want it to show up on the category pages (http://scentsandsilver.com/products/index.php?main_page=index&cPath=1). What setting controls that?

thumbnails are also showing up on the category overview pages
In your admin there is a setting for this page and using a "0" in the place where the image is referenced will drop it's display

Okay, I've looked through every setting I can find, and I didn't see it. ...help? :blink:

admin > config > product listing > display product image > set to "0"

kuroi:

Just happened by the forum in time to see that you've been busy KoBra!

For anybody else that would like to see the new template in action ... there's a working copy here.

Can't get to the site guys