Apple Zen Support Thread

[MeltDown]

The grey background is an...


and then remove #logo from this section:

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float:left;
	}

Hi Jade - This response spoke to my question as well. I was able to implement these suggestions successfully. However, the edges of the font within my logo seem jagged. Any idea why that would be?

Here's a link, if that helps:
PittiVintage

Thanks.

[MeltDown]

Hmmm... I just noticed that it also seems to have removed my background image:

body {
	background:#FFDFFF url(../images/site-bg-blue.gif) 0 9em repeat; 
	}

[jettrue]

Hmmm... I just noticed that it also seems to have removed my background image:

body {
	background:#FFDFFF url(../images/site-bg-blue.gif) 0 9em repeat; 
	}

No, its not any css that is making your background image go away. It's because you are mising a closing </div> in your site.

open up your tpl_header.php, and add back a closing </div> right before this:

<div class="clearBoth"></div>
<!--eof-navigation display-->

[MeltDown]

No, its not any css that is making your background image go away. It's because you are mising a closing </div> in your site.

open up your tpl_header.php, and add back a closing </div> right before this:

<div class="clearBoth"></div>
<!--eof-navigation display-->

That did bring back my background image. However, originally my striped background image began part way down the page, as yours did. Now the background image is riding from the top on down. Previously I had a headerwrapper background color that is now under the background image. The code that generated that color seems to have been over-ridden.

#headerWrapper {
	width:100%;
	text-align:center;
	margin:0 auto;
	background:#FFDFFF;
	}

Any suggestions on how to bring that backround color back?

Sorry to be such a pain. I'm a bit out of my league here. If I can just get the main construction of the page under control I can move forward.

Thanks again - Tim

[MeltDown]

Concerning the ragged edges of the text on my logo: If I look at the properties of the logo.gif online in IE & FF the stated dimentions of the logo are larger than the logo actually is. IE says 817x84 while FF says 821x84. The logo iteself is actually 750x84.
I assume this stretching would distort the text. In my header.php the dimentions are correct. In the stylesheet the dimentions are now correct. (px instead of em, as suggested) Even if I comment out the #logo it is still listed as larger then it should be.

Sigh... Any suggestions anyone?

[jettrue]

That did bring back my background image. However, originally my striped background image began part way down the page, as yours did. Now the background image is riding from the top on down. Previously I had a headerwrapper background color that is now under the background image. The code that generated that color seems to have been over-ridden.

#headerWrapper {
	width:100%;
	text-align:center;
	margin:0 auto;
	background:#FFDFFF;
	}

Any suggestions on how to bring that backround color back?

Sorry to be such a pain. I'm a bit out of my league here. If I can just get the main construction of the page under control I can move forward.

Thanks again - Tim

Hi Tim,

Okeedokee,

I see that it seems that you wanted your stripey background image to go all the way down the page, so you changed the repeat-x to repeat. (background:#FFDFFF url(../images/site-bg-blue.gif) 0 9em repeat;)

That is what is causing the background image to go all the way to the top. But the good news is, there is a solution.

If you want to keep your stripey background image going all the way down the page, but want a color behind your logo, you'll need to add the #ffDfff to #logoWrapperOuter instead.

You'll find that you also need to change the padding on #navMainWrapper from 2.25em to about 2.7em or else the blue of that section won't meet up with the logo.

Concerning your logo, you've got some messed up css there... change your logo section to this:
#logo {
width:750px;
margin:0 auto;
text-align:center;
}

[MeltDown]

Hi Tim,

Concerning your logo, you've got some messed up css there... change your logo section to this:
#logo {
width:750px;
margin:0 auto;
text-align:center;
}

Beautiful - Jade, I can't thank you enough.

Tim

[jettrue]

Hi Jade - This response spoke to my question as well. I was able to implement these suggestions successfully. However, the edges of the font within my logo seem jagged. Any idea why that would be?

Here's a link, if that helps:
PittiVintage

Thanks.

In your css, you have your #logo's width as 750em. Em's are different than px's. Change that to 750px. :-)