Apple Zen Support Thread

[tobicky]

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 :)

[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 :)

[Sunabac]

I'll update the download with this fix.

Thanks. Any Suggestion for the drop down width for attibutes??

[tobicky]

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.

Hi Thanks for your response
I tried removing the above height and margin however, the white line is still there, please could you suggest an alternative?

Many Thanks

[jettrue]

Hi Thanks for your response
I tried removing the above height and margin however, the white line is still there, please could you suggest an alternative?

Many Thanks

Link again please?