Cherry Zen Template Support Thread

[jettrue]

i thought there was a way the site could display good on all browsers

Yes, use a smaller logo. Decrease it to 800 pixels wide, then in the css, change this section:

#logoWrapper {
float:left;
	width:auto;

	}
	
#logo {
	float:left;
	
	text-align:center;
	}

to this:

#logoWrapper {
	}
	
#logo {
	text-align:center;
	}

Then your logo will be centered, and no matter the width of the site, it will look nice.

[jettrue]

Hello,

I have installed this template on my demo site where I am trying to get it set the way I like for my main site. I have changed the column width for left and right to 225px and I have adjusted the necessary images for the template so it looks good. I would like to change a few other things but I can’t seem to figure them out.

1. I would like the site to expand automatically to almost 100%. Say about 97% so that the background image still shows on the left and right side. About the same amount shows on each side as shows at the top (about ½”).
2. When viewing the demo site with a screen set at 800 x 600 the right side product column bleeds into the right sidebox column. I can’t seem to find the place to add padding or whatever is needed to keep it out of that right sidebox column. When viewing with a larger screen size I was able to set the .float-wrap width from 97% to 90%. I am not sure that was the right thing to do but it seemed to work. If there is a correct way to set this I would love to find out.
3. Lastly, the background image extends just a fraction above the left and right column sidebox header. You can see it in the picture just below the Cherry Zen logo.

I have drawn arrows to all three items in the picture below. Any help would be greatly appreciated.

The demo site I am working on is: http://www.swiker.com/demo

Thank you

Please post smaller images in the future, thanks!

1. Change the width in the stylesheet.css to the percentage you'd like:

#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 */
	}

2. Add this to your css:

* html #navColumnTwo {
    margin-right: -170px !important; /* Fixes IE6 Issue */
    }

This is specifically for IE6, and it may not address your issue, but it will fix an issue in IE6.

You  might want to also change .contentWrap to this:
.contentWrap{
	padding: 5px;
	}

3. You can add this to your css:

h3.leftBoxHeading, h3.rightBoxHeading {margin:0!important;}

[CnTGifts]

That didnt work http://www.reynoldsgiftshop.com/

Its , it's floated to the left, but only goes to the center. i nFirefox but IE the whole thing is centered

I want the Text in the logo to show up Against the left side and have the ribbon on the right side of it

[jettrue]

That didnt work http://www.reynoldsgiftshop.com/

Its , it's floated to the left, but only goes to the center. i nFirefox but IE the whole thing is centered

I want the Text in the logo to show up Against the left side and have the ribbon on the right side of it

Hmm, you don't want it centered, and in IE it is centered? Try changing float:left to text-align:left:

#logo {
	text-align:left;
	}

[CnTGifts]

basically what im tryign to do is use the whole header area for my logo, taking up the entire space from left to right

But when i do that it needs to be bigger than 800px which makes it display bad for some people

[jettrue]

basically what im tryign to do is use the whole header area for my logo, taking up the entire space from left to right

But when i do that it needs to be bigger than 800px which makes it display bad for some people

Well, without splitting the logo into two images, then doing a complicated float left, float right layout, the only option is to make the logo 800px wide, then center the logo, so that no matter how narrow or wide your users view, it "seems" like the logo goes all the way across, because the background color is purple for that area, so it looks consistent. If you make a logo 1200px, it won't look good for people with 800x600 resolution, or even 1024x768.

[CnTGifts]

what id like to have it is the Reynolds Gif t Shop text touching the Left side like it is now and the Ribbon almost touching the Right side

Thats isnt possible?

[jettrue]

what id like to have it is the Reynolds Gif t Shop text touching the Left side like it is now and the Ribbon almost touching the Right side

Thats isnt possible?

I'm understanding what you'd like. You could split the images into TWO images (text by itself, and ribbon by itself), then set up a left/right float with those two images. However, I don't have quick instructions on doing that, its a fairly complicated css layout, other than that, no, it isn't possible with one image. If its wide, its going to stay wide, no matter the resolution.

[jettrue]

what id like to have it is the Reynolds Gif t Shop text touching the Left side like it is now and the Ribbon almost touching the Right side

Thats isnt possible?

You know what, I wasn't thinking outside the box.

First, make your logo without the ribbon. Make it no wider than it needs to be (I mean crop out everything but the text/subtext/hummingbird). Then make an image with just the ribbon.

Upload the new logo and then upload the ribbon image into the same folder as your logo, and tell me what you've saved it as, then I'll tell you how to make it a background image for that section, and we can float it to the right. So then, the ribbon will be one the right, and the logo on the left.

[CnTGifts]

Something like this you mean

I'll make the ribbon 800 in length. The logo, I'll make just a little over the width it actually is. It will never be shorter than that. Then when it needs to move, the right one (ribbon) "slides" to the right, the left one (logo) "slides" to the left, they will be overlapping, so when they slide, nobody will ever see anything in the middle!