Apple Zen Support Thread

MeltDown:

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. :yes: 

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;
	}

tobicky:

Hi Jade

I'm still having problems removing a white space from my site www.giftsofwonder.co.uk

The space appeared when I removed navigation display from the tpl_header.

Is there any way of fixing this issue or removing the navigation display.

Many Thanks

Toby :dontgetit

Hi Toby.

Change:
#centerColumnOuter {
margin:-.1em .5em 0 .5em;
width:70em;
height:1.15em;
position:relative;
}

TO:

#centerColumnOuter {
margin:-.1em .5em 0 .5em;
width:70em;
position:relative;
clear:both;
}

jettrue:

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:

Did you use the about us mod...

Nope, but I have now ;)

Thanks

jettrue:

Hi duxfield,

in tpl_main_page.php, remove the </div> in this section:

</div>

 
Hi Jade - Success!!! I removed that </div> and it moved the lower border graphic back down to the bottom of the page. Thank you.  To try remove the white space padding around the center image I increased the width and height of the image by 3 pixels in the html code in the define_main_page.php in Define Pages. This removed the padding between the left hand side of the image and the left hand border, but no matter how much I increased the height it wouldn't remove the padding between the breadcrumb bar and image, and between the image and the lower border graphic.  Did I do the right thing?
 
Also how the heck did you know that was the offending </div>? I counted all the <divs> in that file and there was an even number and I assume you need one to open the div and one to close it. 
 
Anyways I'm left with just a few issues now:

- White space gap between the top of the main image and the breadcrumb bar. This happens in Firefox as well as IE.
- Little bits of border sticking up on both sides of the top of the breadcrumb bar. This only happens in IE.
- Fine white line showing just under the portion of the page that the Search box is displayed in (Is that called the EZ-Pages area?). This only happens in Firefox.

I also have an error when I get to the select payment step in the shopping process but we'll get to that later I think :) 
 
Thank you for helping.

Concerning the main text area: Could you tell me how to change the background color of this area?

Thanks.

How and where can you change the background of the entire layout? I found where I can change the BG of just the middle/main section, but I want it to extend from the top to the bottom of the browswer. Many thanks and a great product!!!:yes:

jdickson:

How and where can you change the background of the entire layout? I found where I can change the BG of just the middle/main section, but I want it to extend from the top to the bottom of the browswer. Many thanks and a great product!!!:yes:

Please disreguard, found solution!

Hi Jade

Re: removing white space from giftsofwonder.co.uk

I tried to remove the white line by changing the following...

Change:
#centerColumnOuter {
margin:-.1em .5em 0 .5em;
width:70em;
height:1.15em;
position:relative;
}

TO:

#centerColumnOuter {
margin:-.1em .5em 0 .5em;
width:70em;
position:relative;
clear:both;
}

However, the white space still appears to be there......can you suggest anything else?

Kind regards

Toby :ohmy:

duxfield:

To try remove the white space padding around the center image I increased the width and height of the image by 3 pixels in the html code in the define_main_page.php in Define Pages. This removed the padding between the left hand side of the image and the left hand border, but no matter how much I increased the height it wouldn't remove the padding between the breadcrumb bar and image, and between the image and the lower border graphic. Did I do the right thing?
I don't know if that was the right thing to do, LOL, but if it worked. :-) As for the top space, the issue is this code:

You can remove that from includes/templates/YOUR_TEMPLATE/templates/tpl_index_default.php

duxfield:

Also how the heck did you know that was the offending </div>? I counted all the <divs> in that file and there was an even number and I assume you need one to open the div and one to close it.

It was the only one it could be. :cool:

duxfield:

Anyways I'm left with just a few issues now:

• Little bits of border sticking up on both sides of the top of the breadcrumb bar. This only happens in IE.

I'm not too sure about this, but first lets try this. Remove:

duxfield:

• Fine white line showing just under the portion of the page that the Search box is displayed in (Is that called the EZ-Pages area?). This only happens in Firefox.

Add your background color to #headerWrapper.

duxfield:

I also have an error when I get to the select payment step in the shopping process but we'll get to that later I think :)

What is the error? Are you using 1.3.7.

tobicky:

Hi Jade

Re: removing white space from giftsofwonder.co.uk

I tried to remove the white line by changing the following...

Change:
#centerColumnOuter {
margin:-.1em .5em 0 .5em;
width:70em;
height:1.15em;
position:relative;
}

TO:

#centerColumnOuter {
margin:-.1em .5em 0 .5em;
width:70em;
position:relative;
clear:both;
}

However, the white space still appears to be there......can you suggest anything else?

Kind regards

Toby :ohmy:

Every time I look at your site, in your css, I still see the old css there:

#centerColumnOuter {
margin:-.1em .5em 0 .5em;
width:70em;
height:1.15em;
position:relative;
}

I was hoping that you'd change it and leave it the corrected way, so I could further investigate.

However, since you're not using that section anyway, and changing it doesn't seem to be working for you, go ahead and open up includes/templates/YOUR_TEMPLATE/common/tpl_main_page.php and remove this:

EVEN IF that does not fix your problem, please leave it that way, and I'll further investigate.

Thanks!

hmmm, this is strange...my latest version of stylesheet.css appears to be showing the amended changes with clear:both;

I have also removed the <div id="centerColumnOuter"></div> - has this registered? It still doesn't appear to be working.

Also, I'm not sure if this is related but it is another matter that I need some help with, when I enter the site I get the following error message

"access is denied to includes/csshover.htc

do you want to continue running scripts"

I am using internet explorer

Thanks for all your help so far :smile:

tobicky:

hmmm, this is strange...my latest version of stylesheet.css appears to be showing the amended changes with clear:both;

I have also removed the <div id="centerColumnOuter"></div> - has this registered? It still doesn't appear to be working.

Also, I'm not sure if this is related but it is another matter that I need some help with, when I enter the site I get the following error message

"access is denied to includes/csshover.htc

do you want to continue running scripts"

I am using internet explorer

Thanks for all your help so far :smile:

I see the changes now, thanks...

I don't really think this will help, but to make your site match my site, can you go into your admin, then go to "configuration", then "layout settings" and change "define breadcrumb status" to "2" (you are using 1.3.7, right?)

As for css hover, the permissions on that file should be 644... that may be the issue.

Two questions: Concerning the main text area: Could you tell me how to change the background color of this area?

Second: Is it possible to have an image where the center navagation bar is? (but still have the nav bar function)
Here's what I have so far, but it doesn't seem to have any effect:

#navEZPagesTop {
	background:#FFDFFF; url(../images/Lipstick.gif) repeat-y; 
	}

Thanks.

MeltDown:

Two questions: Concerning the main text area: Could you tell me how to change the background color of this area?

Second: Is it possible to have an image where the center navagation bar is? (but still have the nav bar function)
Here's what I have so far, but it doesn't seem to have any effect:

#navEZPagesTop {
background:#FFDFFF; url(../images/Lipstick.gif) repeat-y;
}

> 
> Thanks.

Hi there,

It seems you're currently having a symptom of an error I made on common/tpl_main_page.php. (we're talking about the pitti vintage site, right? Please post the link to the site in question whenever you post, thanks!)

Before we address the issues above, you'll need to replace includes/templates/apple_zen/common/tpl_main_page.php. I've attached the file as a txt file. I've updated Apple Zen with these changes (1.5).

Then you'll need to make these changes in your css.

Change:

#navColumnTwo, #navColumnOne {
float:right;
position:relative;
}

to:

#navColumnTwo, #navColumnOne {
float:right;
position:relative;
width:20%;
}

You can remove this section:

.columnRight, .columnLeft {
width:20%;
float:right;
}

duxfield, I'll PM you, but you'll need the same changes.

OK, for the questions you just asked... background color of the "main text area"... I think you're talking about the portion that is white behind the products, then grey behind the right column? That is controlled by an image. If you'd like the white and grey all to be the same color, then you can change this:
#centerColumnWrapper2{
	background:url(../images/content_bg.gif) repeat-y 80% 0;
	}

to:
#centerColumnWrapper2{
	background:#000000;
	}

BUT if you want to keep the grey, and just have the white different, you'll need to open up the includes/templates/apple_zen/images/content_bg.gif with an image program, and change the white to the color you would like.

The center navigation bar... are you talking about the blue bar with your categories? That is not #navEZPagesTop, that is #navCatTabs.

(Please see screenshot)

1. How do I remove the "padding" below the logo and the navigation?

2. How do I make the background go all the way to the bottom of the page. Right now I just use: filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ff2400', startColorstr='#ffd800', gradientType='0'); for the gradient. I know that's not the best way to do the gradient, so any suggestions I welcome very much.

Screenshot:
http://63.135.100.160/screenshot.png

Site:
http://63.135.100.160/store

Thanks!!

jettrue:

Hi there,

It seems you're currently having a symptom of an error I made on common/tpl_main_page.php. (we're talking about the pitti vintage site, right? Please post the link to the site in question whenever you post, thanks!)

Before we address the issues above, you'll need to replace includes/templates/apple_zen/common/tpl_main_page.php. I've attached the file as a txt file. I've updated Apple Zen with these changes (1.5)

PittiVintage

Hi Jade - Sorry but I don't see the attatched txt file... I went to downloads to get the tpl_main_page.php from version 1.5 but only 1.4 is available.

MeltDown:

PittiVintage

Hi Jade - Sorry but I don't see the attatched txt file... I went to downloads to get the tpl_main_page.php from version 1.5 but only 1.4 is available.

Oops, sorry! Here you go:

jettrue:

Oops, sorry! Here you go:

Hmmm... As you can see from this link, the alignment is all screwed up after I replaced the tpl_main_page.php:
PittiVintage

I am not sure what was the best way to convert that txt file to a php, however. I could have messed it up in transit. Basically all I did was copy the new text you provided, opened up tpl_main_page.php in my text editor, (Arachnophilia) selected all the text and then pasted the new text in it's place.

MeltDown:

Hmmm... As you can see from this link, the alignment is all screwed up after I replaced the tpl_main_page.php:
PittiVintage

I am not sure what was the best way to convert that txt file to a php, however. I could have messed it up in transit. Basically all I did was copy the new text you provided, opened up tpl_main_page.php in my text editor, (Arachnophilia) selected all the text and then pasted the new text in it's place.

You did that part right, but didn't make the css changes I mentioned in the original thread. :smile: