Cherry Zen Template Support Thread

[xt0rt]

Jade,

I've used your template for many sites that I've built in the past year or so, and am thoroughly impressed. Thanks for providing such a great template to the community!

Here's my question for you (or anybody else)...
Most of the sites I've built with Cherry Zen have been displaying the categories via images on the main page, split into three columns. I have a rather picky client who wants the category name text under the image to be removed because it is "redundant".

I have been unable to figure out which file to edit that would allow me to keep this text from displaying, any help would be greatly appreciated!

[australican]

First question. Is your grey sidebar supposed to go all the way up to the search bar? It does in Firefox and Camino.

Your idea will work best if the middle logo stays centered, no matter the width, while the left and right logos stay to the left and right, no matter the width.

This is pretty easy to do, but will require you to move #logo2 to AFTER #logo3.

So open up includes/templates/cherry_zen/common/tpl_header.php and change it to this order;

<div id="logo"></div>
<div id="logo3"></div>
<div id="logo2"></div>

It may seem goofy, but it will work.

Then remove

float:left;

from #logo2 in your stylesheet.css.

Thanks for your help..
No the side bar isn't supposed to go all the way up.
I couldn't find where to stop it it from doing so.
I had a look at the style sheet and other places, even checked the form.
It's covered up with a header background image now, so it doesn't matter, but I'd still like to know how to do it if you could spare the time.

Also, thanks for reminding me to check my pages in other browsers. (the side bar was covered with b-ground image in IE7)I mistakenly assumed that if it looked right in IE7 (since it seems to be the one with all the problems), that it would look right in other browsers.
I'll now check in IE7 and Firefox, any other suggestions?

I made the changes for the logo as advised and it worked great. I also found that changing my display settings will show me how it looks on larger monitors (yes, that should have been obvious.)

Thanks again for the template and continued support,
David

If anyone else has comments on my silly mistakes, please feel free to berate me. Nothing better than constructive criticism.

www.countrytothecore.net/shop/

[Stuff4Toys]

I am getting ready to go live with a site running Cherry Zen. The problem I have is that in IE6 (only) the left column side boxes are pushed down below the main index contents.

Take a look at www.nativitydisplays.com and www.liberty-flag.com/ xstore/index.php

Both sites use Cherry Zen and both sites act the same.

You have to see it in IE6, but I am sure there is a css fix that I have either messed up or don't know about.

Kinya, Kinya help a guy out here?
Thanks
JOhn ><>

[jettrue]

I am getting ready to go live with a site running Cherry Zen. The problem I have is that in IE6 (only) the left column side boxes are pushed down below the main index contents.

Take a look at www.nativitydisplays.com and www.liberty-flag.com/ xstore/index.php

Both sites use Cherry Zen and both sites act the same.

You have to see it in IE6, but I am sure there is a css fix that I have either messed up or don't know about.

Kinya, Kinya help a guy out here?
Thanks
JOhn ><>

Did you follow the instructions on adjusting the sidebox widths in the readme.txt to a "t"? The original left sidebox is 150px wide, but in the css, the original width used for the left sidebox section is 165px (to accommodate padding and such).

So you want a left sidebox that is 190px wide (40 pixels wider), so you'll need to increase the original value of 165px by 40 px more.

Please find the section in the readme on increasing sidebox width.

[Stuff4Toys]

Did you follow the instructions on adjusting the sidebox widths in the readme.txt to a "t"? The original left sidebox is 150px wide, but in the css, the original width used for the left sidebox section is 165px (to accommodate padding and such).

So you want a left sidebox that is 190px wide (40 pixels wider), so you'll need to increase the original value of 165px by 40 px more.

Please find the section in the readme on increasing sidebox width.

I thought I did. I even setup the liberty xstore template from scratch.

* html #contentMainWrapper {
 height: 100%;
}
.outer {
 padding-left: 190px; /* Same width as margin-left for the float-wrap div */
 padding-right: 150px; /* Our right column width */
}
.inner {
 width: 100%;
}
.float-wrap {
 float: left;
 width: 97%;
 margin-left: -190px; /* Same length as .outer padding-left but with negative value */
}
#content {
 float: right;
 margin-right: -190px; /* Same length as .outer padding-left but with negative value */
 width: 100%;
 line-height:1.6;
 position: relative; /* IE needs this  */
}
.contentWrap {
 padding: 5px 0 5px 5px;
}
#navColumnOne {
 float: left;
 position: relative; /* IE needs this  */
}
#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  */
}
* html #navColumnTwo {
 margin-right: -190px !important; /* Fixes IE6 Issue */
}
/* end wrappers - page or section containers*/

What did I miss?

[jettrue]

I thought I did. I even setup the liberty xstore template from scratch.

* html #contentMainWrapper {
 height: 100%;
}
.outer {
 padding-left: 190px; /* Same width as margin-left for the float-wrap div */
 padding-right: 150px; /* Our right column width */
}
.inner {
 width: 100%;
}
.float-wrap {
 float: left;
 width: 97%;
 margin-left: -190px; /* Same length as .outer padding-left but with negative value */
}
#content {
 float: right;
 margin-right: -190px; /* Same length as .outer padding-left but with negative value */
 width: 100%;
 line-height:1.6;
 position: relative; /* IE needs this  */
}
.contentWrap {
 padding: 5px 0 5px 5px;
}
#navColumnOne {
 float: left;
 position: relative; /* IE needs this  */
}
#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  */
}
* html #navColumnTwo {
 margin-right: -190px !important; /* Fixes IE6 Issue */
}
/* end wrappers - page or section containers*/

What did I miss?

What I was trying to say with my previous post:

165 + 40 = 205

your 190px's should be 205px because the original value there was 165px, NOT 150px.

Edited To Add:
* html #navColumnTwo {
margin-right: -190px !important; /* Fixes IE6 Issue */
}
and put the above back to -170px.

[Stuff4Toys]

What I was trying to say with my previous post:

165 + 40 = 205

your 190px's should be 205px because the original value there was 165px, NOT 150px.

Edited To Add:
* html #navColumnTwo {
margin-right: -190px !important; /* Fixes IE6 Issue */
}
and put the above back to -170px.

BINGO I knew that you would spot the error in a second.

THANKS
JOhn ><>

[Stuff4Toys]

BINGO I knew that you would spot the error in a second.

THANKS
JOhn ><>

Didn't seem to help www.nativitydisplays.com

.outer {
 padding-left: 165px; /* Same width as margin-left for the float-wrap div */
 padding-right: 165px; /* Our right column width */
}
.inner {
 width: 100%;
}
.float-wrap {
 float: left;
 width: 97%;
 margin-left: -165px; /* Same length as .outer padding-left but with negative value */
}
#content {
 float: right;
 margin-right: -165px; /* Same length as .outer padding-left but with negative value */
 width: 100%;
 line-height:1.6;
 position: relative; /* IE needs this  */
}
.contentWrap {
 padding: 5px 0 5px 5px;
}
#navColumnOne {
 float: left;
 position: relative; /* IE needs this  */
}
#navColumnTwo {
 float: right;
 margin-right: -165px; /* This negative margin-right value is in this example the same as the right column width. */
 position: relative; /* IE needs this  */
}
* html #navColumnTwo {
 margin-right: -170px !important; /* Fixes IE6 Issue */

I thought I had a good understanding of this. Hmmmmm

[jettrue]

Didn't seem to help www.nativitydisplays.com

.outer {
 padding-left: 165px; /* Same width as margin-left for the float-wrap div */
 padding-right: 165px; /* Our right column width */
}
.inner {
 width: 100%;
}
.float-wrap {
 float: left;
 width: 97%;
 margin-left: -165px; /* Same length as .outer padding-left but with negative value */
}
#content {
 float: right;
 margin-right: -165px; /* Same length as .outer padding-left but with negative value */
 width: 100%;
 line-height:1.6;
 position: relative; /* IE needs this  */
}
.contentWrap {
 padding: 5px 0 5px 5px;
}
#navColumnOne {
 float: left;
 position: relative; /* IE needs this  */
}
#navColumnTwo {
 float: right;
 margin-right: -165px; /* This negative margin-right value is in this example the same as the right column width. */
 position: relative; /* IE needs this  */
}
* html #navColumnTwo {
 margin-right: -170px !important; /* Fixes IE6 Issue */

I thought I had a good understanding of this. Hmmmmm

Man, you're hurtin' me.

The original value for the left boxes in the css is 165px. The original value for the right boxes in the css is 150px. Since you changed them BOTH 15px more, you need to increase BOTH by 15 px more.

165 + 15 =180

150 + 15 =165 (you have this correct for the right sideboxes.

Please look at this section from the ORIGINAL file, and increase EACH value accordingly!

[Stuff4Toys]

Man, you're hurtin' me.

The original value for the left boxes in the css is 165px. The original value for the right boxes in the css is 150px. Since you changed them BOTH 15px more, you need to increase BOTH by 15 px more.

165 + 15 =180

150 + 15 =165 (you have this correct for the right sideboxes.

Please look at this section from the ORIGINAL file, and increase EACH value accordingly!

That's Pthththth
LOL

I only changed the right column to be equal to the left (I thought)

I've been at this for 20+ years and still have brain freeze from time to time.

Left columns are still at 165 (right?)
I increased the right column from 150 to 165 = 15

This hurts both of us. Where do I have to add the 15?

This is what I see in the original css:

.outer {
 padding-left: 165px; /* Same width as margin-left for the float-wrap div */
 padding-right: 150px; /* Our right column width */
}
.inner {
 width: 100%;
}
.float-wrap {
 float: left;
 width: 97%;
 margin-left: -165px; /* Same length as .outer padding-left but with negative value */
}
#content {
 float: right;
 margin-right: -165px; /* Same length as .outer padding-left but with negative value */
 width: 100%;
 line-height:1.6;
 position: relative; /* IE needs this  */
}
.contentWrap {
 padding: 5px 0 5px 5px;
}
#navColumnOne {
 float: left;
 position: relative; /* IE needs this  */
}
#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  */
}
* html #navColumnTwo {
 margin-right: -170px !important; /* Fixes IE6 Issue */
}
/* end wrappers - page or section containers*/

So the only change I made was

padding-right: 150px; /* Our right column width */

to 165 and

#navColumnTwo {
 float: right;
 margin-right: -150px;

to 165

Which other setting needs the added 15? I know this is simple for you, being the stylesheet expert and all, but give a guy a break, please. {BSG}
JOhn ><>