Lavender Template Support Thread

**andoverit** · 8 Sep 2009, 09:45 PM

Funny how you can look for ages, and then as soon as you post a question you find it :o)

I found the following worked okay for me:

includes>templates>template_default>templates>tpl_index_products_list.php

Find:
<div id="categoryImgListing" class="categoryImg"><?php echo zen_image(DIR_WS_IMAGES . $categories_image, '', CATEGORY_ICON_IMAGE_WIDTH, CATEGORY_ICON_IMAGE_HEIGHT); ?></div>

Amend to:

**kobra** · 9 Sep 2009, 10:10 AM

Originally Posted by andoverit

Funny how you can look for ages, and then as soon as you post a question you find it :o)

I found the following worked okay for me:

includes>templates>template_default>templates>tpl_index_products_list.php

Hopefully you are not editing the core files in template_default!!
A copy should be saved to

Code:

includes>templates>lavender>templates>tpl_index_products_list.php

https://www.zen-cart.com/tutorials/i...hp?article=230
https://www.zen-cart.com/tutorials/i...hp?article=143
https://www.zen-cart.com/tutorials/index.php?article=36

**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;
	}

**fei2010** · 18 Jul 2010, 02:35 AM

I like this great template!

I am trying to make some changes on the product listing page. By default layout, there is no line separate each product, it is kind of crowd. How can I set a line to separate them? this same apply to search result page too.

thanks.

**kobra** · 26 Jul 2010, 09:53 PM

Need a link to your site....

Inset ONE space to beak link as in

http: //www.zen-cart.com/

**fei2010** · 11 Sep 2010, 05:25 PM

need some help to make minor css changes:

1). the link to "home" in the top left corner, I want to change the color of the font when user mouse hoover over it, which css class do I need to change?

2). in the product page, there are three buttons: Previous, Product Listing, Next. how can I make it change the font color when user mouse hoover over the button?

Thanks!

Thread: Lavender Template Support Thread

Thread Tools

Search Thread

Display

Re: Lavender Template Support Thread

Re: Lavender Template Support Thread

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