Apple Zen Support Thread

cartguin:

Hey, jade, what is controlling the border color for #navMainSearch input.topSearch, the search input box containing "Enter search keyword"? I would really like to make this search input box identical to my search button with the exception of the background color.

At your demo page, the border color is #A5ACB2 yet that color is not specified in either the Apple Zen or Zen Cart source code. When I add border-color:#00F; to #navMainSearch input.topSearch{ then the bottom and right borders become #B2B2FF while the top and left borders become #00008D. This seems extremely strange to me.

Is this something dependent upon operating system and browser? And if so, do you know of a good CSS tutorial on how to best control the look and override OS/browser settings?

Thanks.

Inputs are hard to style. I have no border set, therefore it's the browser doing it. What browser are you looking at? In Firefox, I see no border color, its the standard beveled edge input box, where the left and top are darker, and the right and bottom are light. If you're using say the firefox tool to get the exact color of the input box, you can't really equate that with an exact color to find somewhere in the css... I think if you used the select tool one millimeter over, it might show as a different color, know what I mean?

I don't know of a good css input tutorial, I don't usually mess with them, try a google search. Have you tried using !important in your css to force the change?

I've made my website wider than the default setup on this template, but I can't seem to find where to change the width of the different levels. If I click on level one categories, the level 2 isn't the same width as level 1.

Where do I change this?

Thanks, jade. I'll give !important a go. Always wondered what that was for and when to use it.

Yeah, I know what you mean. I use "print screen", paste into a Photoshop doc, and select the color. Only on text will the color change slightly from pixel to pixel and not match something in CSS. At least in my experience. Even then to get uniform text coloring, I can turn off Clear Text (or anti-aliasing whatever the Windows setting is called that causes text "to smooth").

And, yeah, I've Googled for tutorials but so far I've only read those that are written for others with the same skill set as the author. Not exactly helpful when my CSS skills can only be described as rudimentary.

Ok, I've done this once before, but I am stumped now. My logo.gif file is 1000px wide, but it's all crammed to 224px wide. The height is ok, just not the width. I have edited the header.php file in language.

Here is the content of the header.php file.

<?php
/**
 * @package languageDefines
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: header.php 2940 2006-02-02 04:29:05Z drbyte $
 */

// header text in includes/header.php
  define('HEADER_TITLE_CREATE_ACCOUNT', 'Create Account');
  define('HEADER_TITLE_MY_ACCOUNT', 'My Account');
  define('HEADER_TITLE_CART_CONTENTS', 'Shopping Cart');
  define('HEADER_TITLE_CHECKOUT', 'Checkout');
  define('HEADER_TITLE_TOP', 'Top');
  define('HEADER_TITLE_CATALOG', 'Home');
  define('HEADER_TITLE_LOGOFF', 'Log Out');
  define('HEADER_TITLE_LOGIN', 'Log In');

// added defines for header alt and text
  define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
  define('HEADER_SALES_TEXT', '');
  define('HEADER_LOGO_WIDTH', '1000');
  define('HEADER_LOGO_HEIGHT', '230');
  define('HEADER_LOGO_IMAGE', 'logo.gif');

// header Search Button/Box Search Button
  define('HEADER_SEARCH_BUTTON','Search');
  define('HEADER_SEARCH_DEFAULT_TEXT', 'Enter search keywords here');

?>

Jimbofoxman:

Ok, I've done this once before, but I am stumped now. My logo.gif file is 1000px wide, but it's all crammed to 224px wide. The height is ok, just not the width. I have edited the header.php file in language.

Here is the content of the header.php file.

Check the stylesheet.css.

Thank-you, forgot we had to go in there! :oops:

Jimbofoxman:

I've made my website wider than the default setup on this template, but I can't seem to find where to change the width of the different levels. If I click on level one categories, the level 2 isn't the same width as level 1.

Where do I change this?

That's in stylesheet_header_menu.css :smile:

Hi folks...

This thread is HUGE. This template is hip and popular, and I like it.

I've spent about two late night hours trying to figure out how to get rid of the copy "To change any of the site colors, open up includes/templates/apple_zen/css/stylesheet.css. To overwrite your own logo, upload your logo.gif to includes/templates/apple_zen/images/" beside the logo, but to no avail... I cannot find it anywhere!

Jade, please tell me where this is to get rid of it...?

Hello jettrue,

I am trying to do is use the narrow header. I am able to get a narrow header following the instructions in the stylesheet file but I can get it to center.

My site's url is

http://vbshaircaresupply.com

Thank you
vd5283 is online now Forward Message

Hello -

I love this template and am in the process of customizing it for my web store and I love the horizontal drop down menu, but was wondering how do I remove the horizontal links which appear above that list? Would you be able to help me find that?

Thanks!
Teri

Vermyndax:

Hi folks...

This thread is HUGE. This template is hip and popular, and I like it.

I've spent about two late night hours trying to figure out how to get rid of the copy "To change any of the site colors, open up includes/templates/apple_zen/css/stylesheet.css. To overwrite your own logo, upload your logo.gif to includes/templates/apple_zen/images/" beside the logo, but to no avail... I cannot find it anywhere!

Jade, please tell me where this is to get rid of it...?

Whenever you are searching for text to change, use the "tools", "developers tool kit" in your admin... it is your friend. :smile: No need to stay up late hours searching. Search for a portion of the text above, and it will tell you exactly where it lies (hint, it's in a language file).

theladebug:

Hello -

I love this template and am in the process of customizing it for my web store and I love the horizontal drop down menu, but was wondering how do I remove the horizontal links which appear above that list? Would you be able to help me find that?

Thanks!
Teri

That section is the category tabs menu, turn it off via "configuration", "layout settings"

Thank you! Found it :)

I'm not sure if this issue is for this template, or for a lot of templates. When you hover over an image, it's suppose to do a smaller pop-up window. But mine is NOT popping up........it's forcing the page down and appearing in the top left of the webpage.

Any thoughts as to why this is happening?

Jimbofoxman:

I'm not sure if this issue is for this template, or for a lot of templates. When you hover over an image, it's suppose to do a smaller pop-up window. But mine is NOT popping up........it's forcing the page down and appearing in the top left of the webpage.

Any thoughts as to why this is happening?

That issue is related to the IH2 mod you must have added to your site, the default zen cart doesn't do the image popup hover trick. You didn't upload either the stylesheet or the javascript file that comes with that mod into your template folder. Make sure all files are uploaded and in their happy correct spots.

how can I :

1. picture beside the logo
2. remove whole line over the menu

pls refer attachment for clear understanding.

regards.

--
sumri
**https://www.gmbizspot.com --> come and shop here. **

No, it does not happen on http://www.zencart137.jadetrue.com

Here is my CSS, must be something wrong with it?

body {
behavior: url(includes/csshover.htc);
}

/green/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#ffc708;}

/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/

/*red
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
*/

/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
#buttonmenu {
width: 815px;
height: 25px;
margin-bottom: -6px;
margin-left: auto;
margin-right: auto;
position: relative;
top: -100px;
}

div#dropMenu {
width:70em;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin:0;
padding:0;
}

div#dropMenu li {
position:relative;
list-style:none;
margin:0;
float:left;
line-height:1em;
}

div#dropMenu ul.level1 {
width:70em;
margin:0 auto;
text-align:center;
font-weight: bold;
background:#2b2c89;
z-index:1000;
float:left;
}

div#dropMenu li:hover {font-weight: bold; color: #2b2c89;}
/div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;}**/
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 2em .6em 2em;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffc708; border-left:1px solid #ffc708;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 12em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;}
div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 98% 50% no-repeat;}
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {display:block;z-index:1000;}
div#dropMenu ul.level2 {background:#848484;z-index:1000;position:absolute;font-weight:normal;}
div#dropMenu ul.level3,
div#dropMenu ul.level4,
div#dropMenu ul.level5,
div#dropMenu ul.level6,
div#dropMenu ul.level7,
div#dropMenu ul.level8{top: 0; left: 12em; background:#848484}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;} / this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#3986BF;}

Between the country pull down selector and the alert asterisk, there is an extra space or extra something. I cannot find the cause anywhere and it does not show up in the obvious spot when viewing the source code. Highlight from "Country" through the asterisk and you'll see this extra character space right before the "*". I suspect it may not be a space as it is extends below the baseline of the asterisk.

Jade, it looks like you've taken the time to fix the spacing between forms and alerts on your demo compared to an unedited install, so perhaps you have also tried to remove this extra space that is troubling me. Can it not be removed or do you have an idea where I should check? I've looked at both the language file and tpl_modules_create_account.php and have come up empty.

Argh, my CSS is weaker than I'd like it to be and I used an intermediate div ID. I'm always doing that! And I wasn't aware that margins (?) show up when highlighted.

Anyway, inserting this into stylesheet.css fixed the problem:

#createAcctDefault select {
	margin:0;
	float:left;
	text-align:left;
	}

never mind, I figured it out. I was missing a few lines from the original CSS. Works like a charm now.