Apple Zen Support Thread

[DeFluxx]

Hi Jettrue, I'm back with more questions!

My test site again is at: http://www.enchantingdream.com/enchanting_dream/

I'd like to know how I can remove the search from the main header but keep the blue background bar across the top. I'm not 100% decided on removing the search, so if you could also let me know how to make the search button itself a graphic of my own instead of the generic search button graphic that it is. Actually, I would like to make my own graphic for both the search button on the top bar, and along the right menu if possible.

Also, I'm still unable to center the text headings vertically within the now blue bars on the menus along the right: Bestsellers, Search, etc..

Thanks again for all your help!

[jettrue]

Hi Jettrue, I'm back with more questions!

My test site again is at: http://www.enchantingdream.com/enchanting_dream/

I'd like to know how I can remove the search from the main header but keep the blue background bar across the top. I'm not 100% decided on removing the search, so if you could also let me know how to make the search button itself a graphic of my own instead of the generic search button graphic that it is. Actually, I would like to make my own graphic for both the search button on the top bar, and along the right menu if possible.

Also, I'm still unable to center the text headings vertically within the now blue bars on the menus along the right: Bestsellers, Search, etc..

Thanks again for all your help!

Centering the text heading vertically:

h3.leftBoxHeading, h3.rightBoxHeading { font-size:1em; color:#fff; text-transform:uppercase; font-weight:bold; height:1.5em; padding:.5em 0 0 0;
}

I notice you're changing a lot of the em's to px's or font em's to pt's. Which is totally up to you, but changing padding and such to px's kind of messes with the way the template is designed to adjust when someone changes their font size. If you set the padding to pixels, then that will be fixed padding, and it will not adjust when someone adjusts their font size setting. Just a little fyi.


Turn off the top search header in your admin, then in the css add:

height:2.5em;

to the #navMainWrapper, and that should allow your background image to show correctly.

[jettrue]

I am getting warnings on following 2 lines:

in includes/templates/apple_zen/css/stylesheet_header_menu.css
unknown property "behavior'. Declaration dropped
behavior: url(includes/csshover.htc);and

in includes/templates/apple_zen/css/stylesheet.css
error in parsing value for property 'font'. Declaration dropped

font-weight:bold;

Those are just warnings in error console, and they can be ignored. The behavior one is because firefox isn't supposed to recognize that, that is an IE tag to make the drop down menu work correctly.

The font one, if you want to get rid of it, go to this section:

#navSupp ul li a, #navCatTabs ul li a {
	text-decoration:none;
	margin:0;
	white-space:nowrap;
	display:inline;
	font:12px;
	font-weight:bold;
	width:0;
	}

and change it to :

#navSupp ul li a, #navCatTabs ul li a {
	text-decoration:none;
	margin:0;
	white-space:nowrap;
	display:inline;
	font-weight:bold;
	width:0;
	}

[jettrue]

Hi,

Very nice template. In our store we have MANY categories. When I click on our categories it shows about half of them in the dropdown but there is no way to scroll down to see the rest. Is there a solution for this?

Well, one thing you could do is open up includes/templates/apple_zen/css/stylesheet_
header_menu.css and change the padding for the drop down menu so more can fit in a smaller space:

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 */

to:

div#dropMenu ul.level2 a {padding: 0.2em 0 0.2em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */

Other than that, I would suggest you get a taller monitor or combine some categories or make some more subcategories. If none of those will work, you can remove the categories from the top menu, and just use sideboxes for the categories. By the way, if your mouse has a scroll button (or use the arrow keys on your keyboard), you can scroll down to see all of the categories.

I'm curious, how many categories are we talking here?

[jettrue]

Actually, I would like to make my own graphic for both the search button on the top bar, and along the right menu if possible.

Sorry, forgot to answer this one. Open up includes/templates/enchanting_dream/sideboxes/tpl_search_header.php and change line 19 to:

$content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" class="topSearch" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . ' ' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);

Then upload the image you want to use:

/includes/templates/enchanting_dream/buttons/english/button_search.gif

[disciple]

Well, one thing you could do is open up includes/templates/apple_zen/css/stylesheet_
header_menu.css and change the padding for the drop down menu so more can fit in a smaller space:

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 */

to:

div#dropMenu ul.level2 a {padding: 0.2em 0 0.2em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */

Other than that, I would suggest you get a taller monitor or combine some categories or make some more subcategories. If none of those will work, you can remove the categories from the top menu, and just use sideboxes for the categories. By the way, if your mouse has a scroll button (or use the arrow keys on your keyboard), you can scroll down to see all of the categories.

I'm curious, how many categories are we talking here?

Thanks I will try playing with the padding and also the font size but I am not sure that will solve the issue. We have 36 categories. When the dropdown menu appears the scroll bars come up on the browser but you can't move over to scroll without losing the menu. Is there a way to focus the menu until you actually make a selection?

Thanks

Rick

[jettrue]

Thanks I will try playing with the padding and also the font size but I am not sure that will solve the issue. We have 36 categories. When the dropdown menu appears the scroll bars come up on the browser but you can't move over to scroll without losing the menu. Is there a way to focus the menu until you actually make a selection?

Thanks

Rick

I'm not positive what you mean by "focus the menu until you actually make a selection". But other than what I suggested above, I can't think of any other ways to do this. Have you tried using the arrow keys on your keyboard, or your mouse scroll button to scroll the browser page?

This will be an inherent issue to have a horizontal drop down menu no matter where you go. Browser windows and monitors are only so tall, so people will have to realize that they can use their scroll button on their mouse, or their keyboard arrows to see all of your categories. If you're worried about the people who won't realize that, then I suggest you not use the categories in a horizontal drop down menu. OR, perhaps have the categories in the drop down menu, and also in a sidebox.

ETA: The only other thing to do would be to move that menu to the very top of the site, let me know if you want to do that and I can give instructions.

[jettrue]

our posts must have "missed each other.." I just put
background-repeat: repeat;
but I did notice the bit of that stripe as you mentioned, but it did not go away after I inserted background:#ffffff; in the #headerWrapper

I can live with that...
Thanks!

*NOTE this change is for people who want to have the stripe background all the way down the page like Sunabec requested on page one of this thread*

I finally figured out how to fix this, if you're interested. Open up includes/templates/apple_zen/common/tpl_header.php and change this:

    <?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
	<div class="clearBoth"></div>

to this:

 <?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>

Then open up includes/templates/apple_zen/css/stylesheet.css and change this:

#logoWrapperOuter {
	margin:0 auto;
	width:100%;
	}

to this:

#logoWrapperOuter {
	margin:0 auto;
	width:100%;
	overflow:auto;
	}

[DeFluxx]

Jettrue

Thanks for the help, I think I am almost there! I thought I wouldn't have a problem with the following, but I do. I'd like to make the "Home and Login"
links in the main header a color other than blue since they're in the blue bar. However, I have links set to blue, so I am not sure how to change just the ones at the top to white.

[jettrue]

Jettrue

Thanks for the help, I think I am almost there! I thought I wouldn't have a problem with the following, but I do. I'd like to make the "Home and Login"
links in the main header a color other than blue since they're in the blue bar. However, I have links set to blue, so I am not sure how to change just the ones at the top to white.

#navMainLinks a {color:white;}