Cherry Zen Template Support Thread

[jettrue]

I see it...the shadow at the top right corner of the main content is inset to the left too much. Also the site is off center (too much to the right) by about the same amount as the shadow is offset, so my guess is the the two problems are connected in some way. Have you change the width of your site?

Make that banner image smaller at the bottom of your site.

[KADesign]

Hi,

Both of my sites look okay in IE7 and FF, but they are off in older browsers. They both are too wide even though I have them set to go no wider than 850. What did I do wrong?
Any ideas?

Thanks,
Kelly

[sfuredi]

I am redesigning my site using the cherry zen template (which by the way is awesome) however I am running into a problem that I am not sure how to fix. Currently if you check out my create account page my Zip/Postal code box is being pushed to the right hand side. I did modify the width of the template and also added a bunch of mods but I can't see anything that would specifically relate to the moving of just that box. You can see what I mean by going to my work site.

http://oldsite.lotsofgifts.net/index...create_account

Any insight would be greatly appreciated. I would hate to have just one little flaw after spending a bunch of time redesigning my site.

[mediathing]

I am redesigning my site using the cherry zen template (which by the way is awesome) however I am running into a problem that I am not sure how to fix. Currently if you check out my create account page my Zip/Postal code box is being pushed to the right hand side. I did modify the width of the template and also added a bunch of mods but I can't see anything that would specifically relate to the moving of just that box. You can see what I mean by going to my work site.

http://oldsite.lotsofgifts.net/index...create_account

Any insight would be greatly appreciated. I would hate to have just one little flaw after spending a bunch of time redesigning my site.

Hi,

I used Firefox and added two line breaks (<br><br>) after this line which fixed the problem, not sure if that is the correct way to do it though:

<label class="inputLabel" for="postcode">Post/Zip Code:</label>

[sooraj]

Hi,
I tried to use the stylesheet_dropshadow css to apple zen template, i also did copy all the images wich the css looks for..but unable to get thhe dropshadow look for the productinfo page.. is there anything i miss??

[jettrue]

Hi,
I tried to use the stylesheet_dropshadow css to apple zen template, i also did copy all the images wich the css looks for..but unable to get thhe dropshadow look for the productinfo page.. is there anything i miss??

You have to also upload includes/templates/YOUR_TEMPLATE/templates/tpl_modules_main_product_image.php

from Cherry zen.

[jettrue]

I am redesigning my site using the cherry zen template (which by the way is awesome) however I am running into a problem that I am not sure how to fix. Currently if you check out my create account page my Zip/Postal code box is being pushed to the right hand side. I did modify the width of the template and also added a bunch of mods but I can't see anything that would specifically relate to the moving of just that box. You can see what I mean by going to my work site.

http://oldsite.lotsofgifts.net/index...create_account

Any insight would be greatly appreciated. I would hate to have just one little flaw after spending a bunch of time redesigning my site.

This was fixed in newer versions of this template, but you can change LABEL.inputLabel in stylesheet.css to this:


LABEL.inputLabel {
width:90%;
float:left;
margin:.3em;
}

[jettrue]

Hi,

Both of my sites look okay in IE7 and FF, but they are off in older browsers. They both are too wide even though I have them set to go no wider than 850. What did I do wrong?
Any ideas?

Thanks,
Kelly

Because there are two sections that control width, one for IE, one for other browsers:

#nw {
	width:80%; /* main site width; if you'd prefer a fixed width site, enter the width in px here. */
	max-width:850px; /* prevents the main content from getting wider than 1300px in sites other than IE */
	min-width:850px; /* 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 */
	}

So you would change the IE section to this:

/* IE only. Controls Width of Site and Main Content*/
* html #nw {
	width:expression((d=document.compatMode=="CSS1Compat" ? document.documentElement : document.body) && (d.clientWidth > 1300? "850px" : d.clientWidth > 1048? "80%" : d.clientWidth < 1048? "850px" : "80%")); /* this prevents the site from getting smaller than 1000px or wider than 1300px in IE */
	}

Though I'm not sure why you'd not want it to resize for people with wide browser windows?

[sooraj]

You have to also upload includes/templates/YOUR_TEMPLATE/templates/tpl_modules_main_product_image.php

from Cherry zen.

Hi.. uploaded but still no result. need to modify anything in the css??

[jettrue]

Hi.. uploaded but still no result. need to modify anything in the css??

Well, you said you already uploaded the shadow css, so I thought you already had that covered.

Add this to your stylesheet.css:

/* css for product image drop shadow and border. To disable the drop shadow and border, simply delete or comment out this section */

#productMainImage {
float:left;
background: url("../images/shadowAlpha.png") no-repeat bottom right !important;
background: url("../images/shadow.gif") no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

#productMainImage img {
display: block;
position: relative;
background: #ffffff;
margin: -3px 6px 6px -3px;
border: 1px solid #a9a9a9; /* defines the border for the product image. To remove the border delete or comment out this line, AND padding: 4px; below */
padding: 4px;
}

/* end css for product image drop shadow */