Cherry Zen Template Support Thread

[jettrue]

Ok made i made the changes and as far as the browsers go, everything looks to be fine on the 2 that I use, except now I am back to square one where the text is too close to the sideboxes, for my liking. This was the whole reason I used the table for my text so that I could have the text (main content) further away from the edge of the sideboxes.

There must be somewhere in the css where i can change where the text is positioned in the main content, If i can find this then make the necessary changes, then I can eliminate the table altogether. If someone knows where it is, can you please point me in the right direction.

TIA for any help and thanks to those who have already helped!!

Your entire issue is that you changed the sidebox widths to 170px and didn't make the changes in the stylesheet for the right sideboxes, though you did make the correct changes for the left sideboxes. Change the two instances of 150px below to 170px.

.outer {
padding-left: 185px; /* Same width as margin-left for the float-wrap div */
padding-right: 150px; /* Our right column width */
}

#navColumnTwo {
float: right;
margin-right: -150px; /* This negative margin-right value is in this example the same as the right column width. */
position: relative; /* IE needs this */
}

[jettrue]

Is there a way I can add a dividing line between each product listing, or maybe alternate background shading?

Here is a link:
http://www.newoldsounds.com/index.ph...ex&cPath=46_49

It seems somewhat difficult to read because it's all white behind the products.

Thanks,
Tim

.productListing-data{border-top:1px solid #000000;}

or

.productListing-even{background:#AAAAA9;}

[jettrue]

Ok I have 2 questions and they may have been mentioned before but I am not searching 207 pages to find it.

I know this template was designed as a floating template but how do you go about making it fit all the way across the screen?

Second question the product decription is nw below the product where it was next to the product in the original template is there and easy way to fix this or would it be better left alone?

Examples:
below product

next to product

Change this:

#nw {
	width:80%; /* main site width; if you'd prefer a fixed width site, enter the width in px here. */
	max-width:1300px; /* prevents the main content from getting wider than 1300px in sites other than IE */
	min-width:1000px; /* this prevents the main content from getting smaller than 1000px in browsers OTHER THAN IE. You can make this as small as 800px, BUT any smaller than that, and the top header menu will break into two lines. Also, if you make this width 800px, you will need to make sure your product image on the product info page is no wider than 190px */
}
/* IE only. Controls Width of Site and Main Content*/
* html #nw {
 width:expression((d=document.compatMode=="CSS1Compat" ? document.documentElement : document.body) && (d.clientWidth > 1300? "1300px" : d.clientWidth > 1048? "80%" : d.clientWidth < 1048? "1000px" : "80%")); /* this prevents the site from getting smaller than 1000px or wider than 1300px in IE */
}
/* end IE only */

to this:

#nw {
	width:100%;
}

If you prefer the original zen cart product page styling, simply delete includes/templates/cherry_zen/templates/tpl_product_info_display.php

[jettrue]

I put my test site (using Cherry Zen template - thanks for it) through the W3C Validator and the only issue was the 'type' of the search box at the top.

The search box is of type "search" but that is not a permitted type.
If I change includes/functions/extra_functions/search_field_header.php to change the $type parameter of zen_draw_search_field() to 'text' then all is okay.

Looks like you got it all figured out. If the error bugs you enough, change it. If not, leave it (it creates a rounded text box in Safari). it won't hurt anything.

[jettrue]

Just added Zen Lightbox to my cart based on Cherry Zen Template. Had to make a couple of template alterations to get the drop shaddow back to normal. so thought I would post my file here for others to use if needed.

( sorry if its been done before )

File is the tpl_modules_main_product_image.php in your templates folder.

Thanks for doing this, I think I'll include this adjustment in my next template update, though actually they should use this instead (this way if they turn lightbox status to OFF, they'll still get the shadow box around the image).

<?php
/**
 * Module Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_main_product_image.php 3208 2006-03-19 16:48:57Z birdbrain $
 * modded to include Zen Lightbox v1.4 aclarke 2007-09-15 for the Cherry Zen Template by Jettrue
 */
?>
<?php require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_MAIN_PRODUCT_IMAGE)); ?> 
<div id="productImage" class="centeredContent back">
<!-- bof Zen Lightbox v1.4 aclarke 2007-09-15 -->
<?php

if ($current_page_base == 'product_reviews') {

$zen_lightbox_products_name = $products_name_reviews_page;

} else {

$zen_lightbox_products_name = $products_name;

}

if (ZEN_LIGHTBOX_STATUS == 'true') {

echo '<script language="javascript" type="text/javascript"><!--
document.write(\'<div id="productMainImage"><a href="' . zen_lightbox($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '" rel="lightbox[gallery]" title="' . addslashes($zen_lightbox_products_name) . '">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '</div><br class="clearBoth" /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>\')//--></script>';

} else {

echo '<script language="javascript" type="text/javascript"><!--
document.write(\'<div id="productMainImage"><a href="javascript:popupWindow(\\\'' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '\\\')">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '</div><br class="clearBoth" /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>\')//--></script>';

}

?>
<!-- eof Zen Lightbox v1.4 aclarke 2007-09-15 -->
<noscript>
<?php
  echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';
?>
</noscript>
</div>

[heavenlynights]

Thanks Jade

[crazycucumber]

Thanks for doing this, I think I'll include this adjustment in my next template update, though actually they should use this instead (this way if they turn lightbox status to OFF, they'll still get the shadow box around the image).

No worries ,

Thanks for a great template , thought you may want to see what I have done with it, hope you didn't mind me modifying it !

www.affixit.co.uk

Good luck with everything.

Mark.

[heavenlynights]

Hi again

I am rehashing the template a little. I have decided to make it a fixed width of 950px rather than a fluid width as I want to replace the logo with a 950px wide header. I figured I can't do this if the website is fluid width, without it looking silly.

I would also like to move the product attributes to below the product description

I have figured out how to change the width of the site, with the help of the read_me file but If anyone can help me in regard to moving the attributes, that would be great. I just need to know what parts of the css i need to change and what to change it to.

I am assuming that I need to change something in the below

#productAttributes {
width:100%;
float:left;
border:1px solid #bfbfbf;
padding-left:5px;
margin:5px 0 0 10px;

TIA

[crazycucumber]

Hi again

I would also like to move the product attributes to below the product description

I have figured out how to change the width of the site, with the help of the read_me file but If anyone can help me in regard to moving the attributes, that would be great. I just need to know what parts of the css i need to change and what to change it to.

I am assuming that I need to change something in the below

#productAttributes {
width:100%;
float:left;
border:1px solid #bfbfbf;
padding-left:5px;
margin:5px 0 0 10px;

TIA

I would look in the tpl_product_info_display.php file it is very well laid out with comments around every section , you can literally just pick up a section and move it under another one.

I moved it around quite alot on my site and it was very easy.
I believe Jettrue has laid it out so there is a left column a right column then a full width section under that. ( that is how I read the code anyway ) so you can place each section where you require it.

You can then use that bit of CSS to change the size and padding if you need to.

  <!--bof Attributes Module -->
  <?php
  if ($pr_attr->fields['total'] > 0) {
?>
  <?php
/**
 * display the product atributes
 */
  require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
  <?php
  }
?>
  <!--eof Attributes Module -->

Thats the section you can move around.

Have fun

MARK

[heavenlynights]

I would look in the tpl_product_info_display.php file it is very well laid out with comments around every section , you can literally just pick up a section and move it under another one.

I moved it around quite alot on my site and it was very easy.
I believe Jettrue has laid it out so there is a left column a right column then a full width section under that. ( that is how I read the code anyway ) so you can place each section where you require it.

You can then use that bit of CSS to change the size and padding if you need to.

  <!--bof Attributes Module -->
  <?php
  if ($pr_attr->fields['total'] > 0) {
?>
  <?php
/**
 * display the product atributes
 */
  require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
  <?php
  }
?>
  <!--eof Attributes Module -->

Thats the section you can move around.

Have fun

MARK

Thanks Mark, I will give it a go in the morning and post back my results