Apple Zen Support Thread

[jettrue]

Hi There

I am manipulating your wonderful template and I'm having trouble removing one of the frames, furthermore locating where and what it is. Please can you visit my site www.giftsofwonder.co.uk and identify the white section beneath the tabs and tell me how i can remove this, or at least change the colour?

I hope you can help

Many Thanks :)

I'm not at my usual computer, where I can figure things out easily, but I think I know what will fix that issue. That section below the tabs is where the little stripey background image was on my original template. I see you removed that image, but you did not remove the height for that div:

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

Try removing the "height:1.15em". Also remove the margin.

[Sunabac]

What is the name of the top green strip? I would like to increase it as I have the notification of items left in the shopping cart going over the "Home" and "Login". Also any suggestion on the width of the drop down for attributes??
Thanks (http://test.pridepak.com/ZenLevel3)

[jettrue]

What is the name of the top green strip? I would like to increase it as I have the notification of items left in the shopping cart going over the "Home" and "Login". Also any suggestion on the width of the drop down for attributes??
Thanks (http://test.pridepak.com/ZenLevel3)

To get any of the css names for any section of the site, just view the source of the site. You can see around that top green strip, you'll see this:

  <div id="navMainWrapper">
    <div id="navMain">
      <div id="navMainLinks">
        <ul class="back">
          <li><a href="http://www.zencart137.jadetrue.com/">Home</a></li>
                    <li><a href="http://www.zencart137.jadetrue.com/login.html">Log In</a></li>
                            </ul>
      </div>

      <div id="navMainSearch">
        <form name="quick_find_header" action="http://www.zencart137.jadetrue.com/advanced_search_result.html" method="get"><input type="hidden" name="main_page" value="advanced_search_result" /><input type="hidden" name="search_in_description" value="1" /><input type="text" name="keyword" size="6" maxlength="30" class="topSearch" style="width: 100px" value="Enter search keywords here" onfocus="if (this.value == 'Enter search keywords here') this.value = '';" onblur="if (this.value == '') this.value = 'Enter search keywords here';" />&nbsp;<input type="image" src="includes/templates/apple_zen/buttons/english/button_search.gif" alt="Search" title=" Search " /></form>      </div>
    </div>
  </div>

Then by looking in the css, you'll see that navMainWrapper just defines the color, but #navMain has the width defined:

#navMain {
width:70em;
text-align:center;
margin:0 auto;
position:relative;
}

But I'm wondering why you get notifications about the cart way up there? What kind of notification?

[Sunabac]

To get any of the css names for any section of the site, just view the source of the site.
But I'm wondering why you get notifications about the cart way up there? What kind of notification?

I put in warning about items left in the shopping cart, so now I have this (if there were items left):

<div id="mainWrapper">
  <div class="messageStackCaution larger"><img src="includes/templates/template_default/images/icons/warning.gif" alt="Warning" title=" Warning " width="20" height="20" />  Following items were left in your shopping cart after your last visit. If you do not wish to include them today, please remove them from you cart. Glad to have you back. Happy shopping!</div>
<!--bof-header logo and navigation display-->
<div id="headerWrapper">
  <!--bof-navigation display-->
  <div id="navMainWrapper">
    <div id="navMain">
      <div id="navMainLinks">
        <ul class="back">
          <li><a href="http://test.pridepak.com/ZenLevel3/">Home</a></li>
                    <li><a href="http://test.pridepak.com/ZenLevel3/index.php?main_page=logoff">Log Out</a></li>
          <li><a href="http://test.pridepak.com/ZenLevel3/index.php?main_page=account">My Account</a></li>
                            </ul>
      </div>

and it overlaps the heading in there.

[jettrue]

I put in warning about items left in the shopping cart, so now I have this (if there were items left):

<div id="mainWrapper">
  <div class="messageStackCaution larger"><img src="includes/templates/template_default/images/icons/warning.gif" alt="Warning" title=" Warning " width="20" height="20" />  Following items were left in your shopping cart after your last visit. If you do not wish to include them today, please remove them from you cart. Glad to have you back. Happy shopping!</div>
<!--bof-header logo and navigation display-->
<div id="headerWrapper">
  <!--bof-navigation display-->
  <div id="navMainWrapper">
    <div id="navMain">
      <div id="navMainLinks">
        <ul class="back">
          <li><a href="http://test.pridepak.com/ZenLevel3/">Home</a></li>
                    <li><a href="http://test.pridepak.com/ZenLevel3/index.php?main_page=logoff">Log Out</a></li>
          <li><a href="http://test.pridepak.com/ZenLevel3/index.php?main_page=account">My Account</a></li>
                            </ul>
      </div>

and it overlaps the heading in there.

Hi! Change the warnings section of the css (~line 340-ish) to this:

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height:1.8em;
	padding:0.2em;
	}

.messageStackWarning, .messageStackError {
	background:#990000;
	color:#ffffff;
	}

.messageStackSuccess {
	background:#929292;
	}

.messageStackCaution {
	background:#FFFF99;
	}

I'll update the download with this fix.

[duxfield]

Hi. I've got a bit further on my site customisations. A while ago I asked how to put an image in the main page (I think you call it CentreColumn) and you suggested that I do the following:

"An easy way to do this is re-open that same file (includes/languages/english/YOUR_TEMPLATE/header.php), and where you removed that tagline text, add your image code (with the correct width and height of course):

<img src="includes/templates/YOUR_TEMPLATE/images/YOUR_IMAGE.jpg alt="YOUR ALT TEXT HERE" title="YOUR IMAGE TITLE HERE" height="100" width="500" />

And be sure to upload the image to the correct folder."

The way I have tried it last night (before I found your reply) was by putting some html in the Define_Main_Page.php of the Admin control panel. But that makes the image a bit out of sync with the centre column. Refer to my site to see what I mean:

www.sixvolts.co.nz/shop

So...I will undo that and make the changes to header.php and see how that looks.

Two other questions if I can:

- I've changed the background colour of my site to an off-white but just can't seem to find where I change the colour of the bits that are on the left and right hand side of the logo. Can you help on that one?

- As I've turned off the header graphic that sits on top of the Breadcrumb bar it has left a tiny bit of the border showing on the left and right hand sides. do you know how I can remove that please?

- Is there a way to change the font size of the 'Home' Login' and the default text in the search field and on the Search button itself? I just want to make it slightly smaller.

Thanks alot. I really appreciate how you support your template and am really thankful that you've made it available.

Your opinion on my site would be welcome too :)

[jettrue]

Hi. I've got a bit further on my site customisations. A while ago I asked how to put an image in the main page (I think you call it CentreColumn) and you suggested that I do the following:

"An easy way to do this is re-open that same file (includes/languages/english/YOUR_TEMPLATE/header.php), and where you removed that tagline text, add your image code (with the correct width and height of course):

<img src="includes/templates/YOUR_TEMPLATE/images/YOUR_IMAGE.jpg alt="YOUR ALT TEXT HERE" title="YOUR IMAGE TITLE HERE" height="100" width="500" />

And be sure to upload the image to the correct folder."

Actually, you said you wanted an image in the header file... the instructions I gave you were for putting an image in the header, NOT for in the main page centerColumn.

The way I have tried it last night (before I found your reply) was by putting some html in the Define_Main_Page.php of the Admin control panel. But that makes the image a bit out of sync with the centre column. Refer to my site to see what I mean:

www.sixvolts.co.nz/shop

So...I will undo that and make the changes to header.php and see how that looks.

So, where do you want the image? In the header? If so you will of course need a much smaller image. If you actually want it in the middle, then DON'T follow my previous instructions, because I was giving you instructions for putting an image in the header. If you want it in the middle there, it looks to me like you just need a smaller image.

Two other questions if I can:

- I've changed the background colour of my site to an off-white but just can't seem to find where I change the colour of the bits that are on the left and right hand side of the logo. Can you help on that one?

There is no color defined for that, you have to add the color to it. its the #logoWrapperOuter.

- As I've turned off the header graphic that sits on top of the Breadcrumb bar it has left a tiny bit of the border showing on the left and right hand sides. do you know how I can remove that please?

You removed the image for that section, but did not remove its height. Change #centerColumnOuter to this:

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

- Is there a way to change the font size of the 'Home' Login' and the default text in the search field and on the Search button itself? I just want to make it slightly smaller.

You can do this:

#navMainSearch {
	margin:0 auto;
	text-align:right;
	padding:1px 2px;
	}
	
#navMainSearch input {
	margin:0 auto;
	text-align:right;
        font-size:1em;
	}

Thanks alot. I really appreciate how you support your template and am really thankful that you've made it available.

Your opinion on my site would be welcome too :)

You are welcome!

[duxfield]

thanks alot for all those answers :)

Yeah - I actually wanted the image in the middle of the page...like I have it now...but so that it doesn't sit outside the borders like it is at the moment. Just renaming my header image (the bit with Six Volts Clothing in it) to logo.giff displayed that fine so I'm happy with the header as it is.

So to correct the alignment of the main image so that it nice nicely within the borders do you think I'll just need to leave it a line of html code in the Define Pagers (in Define_main_page.php) editor but make it a bit smaller? Cause at the moment I have not set any height or width dimensions on the image. Thanks

[duxfield]

Further to my last post - it looks to me like the image size is correct its just that because I've used html (src image) its always going to place the image slightly down and across to the right slightly. Is there a way of placing an image in the code that defines that main box in the middle of the page?

[jettrue]

thanks alot for all those answers :)

Yeah - I actually wanted the image in the middle of the page...like I have it now...but so that it doesn't sit outside the borders like it is at the moment. Just renaming my header image (the bit with Six Volts Clothing in it) to logo.giff displayed that fine so I'm happy with the header as it is.

So to correct the alignment of the main image so that it nice nicely within the borders do you think I'll just need to leave it a line of html code in the Define Pagers (in Define_main_page.php) editor but make it a bit smaller? Cause at the moment I have not set any height or width dimensions on the image. Thanks

Hi duxfield,

So now I'm understanding that you'd like that middle image to fill the entire home page?

Turn off the right box totally in your admin, under "Configuration", "Layout Settings"... there's a Column Right Status - Global, change it to 0.

Then in your css add this:

#indexHomeBody .centerColumn {padding:0; margin:0}

this removes the padding on .centerColumn for the home page only.