Cherry Zen Template Support Thread

Hi Great template.

I just started to customize it. I am trying to figure out the proper alignment of the css categories flyout with this template. The flyout menu "backspace" is shifted too far left and so are the buttons. How/where do I shift them back to the right?

And the blue menu backspace shows above the red categories header. How do I move that down?

I am asking here because I don't know if this needs to be "fixed" via the flyout menu css or via the cherry zen template css... :-(

site for reference: http://www.agilitydogsupplies.com/

Thanks.

Fireflyz:

Hi Jettrue,
Thank you very vey much for this wonderful template! I think it's one of the best out there, free or paid.. and I'm donating once I'm done with twicking the template.
I have an issue I'm hoping you can guide me how to resolve it. I don't remember doing anything to cause this but here is the problem: on product and category listing the Model, Manufacturer name and image are bunched up together (only on some items). You can see it here: hxxp://www.arearugsclub.com/rugs/index.php?main_page=index&cPath=1

thank you very much!

PS: I sent a pm while ago, did you get it?
You're going to have to open up includes/modules/product_listing.php and add some <br />'s.

Add one before and after the manufacturer:

$lc_text = '[B]<br />[/B]<a href="' . zen_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing->fields['manufacturers_id']) . '">' . $listing->fields['manufacturers_name'] . '</a>[B]<br />[/B]';

gsdcypher:

Hi Great template.

I just started to customize it. I am trying to figure out the proper alignment of the css categories flyout with this template. The flyout menu "backspace" is shifted too far left and so are the buttons. How/where do I shift them back to the right?

And the blue menu backspace shows above the red categories header. How do I move that down?

I am asking here because I don't know if this needs to be "fixed" via the flyout menu css or via the cherry zen template css... :-(

site for reference: http://www.agilitydogsupplies.com/

Thanks.

1. in stylesheet_categories_menu.css change this:

div#nav-cat {width: 150px; margin: -1px 0 0 -1px;

to this:

div#nav-cat {width: 150px; margin: -1px 0 0 0;

2. If you're talking about that tiny little space of grey above "Categories" in the sidebox, change this:
   h1, h2, h3, h4, h5, h6 {
   margin:.3em 0;
   }

to this:

h1, h2, h3, h4, h5, h6 {
margin: 0;
}

thanks jettrue. :-)

That fixed the gray area above the categories header.

But the buttons still stick out to the left. :-(

gsdcypher:

thanks jettrue. :-)

That fixed the gray area above the categories header.

But the buttons still stick out to the left. :-(

Hmmm, lets see....

Try changing it to this:
div#nav-cat {width: 150px; margin: -1px 0 0 3px;

Hi Jettrue,

Thanks! This setting seemed to do the trick and far as getting the menu lined up. And I changed the border to 0 solid to keep the lines from sticking out. :-)

div#nav-cat {width: 150px; margin: -1px 0 0 2px;
background-color: transparent; font-weight:bold;
text-align: center;
line-height: 23px;

}
div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: transparent;
border: 0 solid #EBE9ED;
background-repeat: no-repeat;
}

BUT.... here is a small gap between the 1 cat and the 2nd sub cat menu that flys out. And when you move your mouse over than gap the menu cuts out...

How do I close that gap to make it a smooth transition without the menu cutting out?

Thanks.

gsdcypher:

Hi Jettrue,

Thanks! This setting seemed to do the trick and far as getting the menu lined up. And I changed the border to 0 solid to keep the lines from sticking out. :-)

div#nav-cat {width: 150px; margin: -1px 0 0 2px;
background-color: transparent; font-weight:bold;
text-align: center;
line-height: 23px;

}
div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: transparent;
border: 0 solid #EBE9ED;
background-repeat: no-repeat;
}

BUT.... here is a small gap between the 1 cat and the 2nd sub cat menu that flys out. And when you move your mouse over than gap the menu cuts out...

How do I close that gap to make it a smooth transition without the menu cutting out?

Thanks.

Try this chunk of css (replaces the entire css file):

body  {
behavior: url(./csshover.htc);
/* WinIE behavior call */}

div#nav-cat {width: 150px; margin: -1px 0 0 2px;
	background-color: transparent; font-weight:bold;
	text-align: center;
	line-height: 23px;
	}
	
div#nav-cat ul {
	margin: 0; 
	padding: 0; 
	padding-top: 0; 
	width: 150px; 
	background-color: transparent;
	border: 0;
	background-repeat: no-repeat;
	}

div#nav-cat ul.level2 {
	margin: 0 0 0 -2px; 
	padding: 0; 
	width: 150px; 
	border: none;
	}
	
div#nav-cat ul.level2, div#nav-cat ul.level3, div#nav-cat ul.level4, div#nav-cat ul.level5, div#nav-cat ul.level6, div#nav-cat li.submenu, div#nav-cat li.submenu:hover, div#nav-cat ul {
	background-color: transparent; 
	}
	
div#nav-cat li {
	background-image: url(../images/b1.gif); 
	position: relative;
	list-style: none; 
	margin: 0px;
	margin-top: 6px;
	z-index: 20; 
	height: 23px;
	width: 150px;
   /* change it to whatever space you want to put space between buttons*/
   }

div#nav-cat li li {
	margin: 0px; /* this overrides the margin-top in the declaration above */
	} 
	
div#nav-cat li:hover {
	background-image: url(../images/b1_over.gif); 
	}

div#nav-cat li a {
	display: block; 
	padding: 0.25em 0 0.25em 0.5em;
	text-decoration: none; width: 150px;
	/*border-left: 0.5em solid #BBB;
	div#nav li a:hover {border-left-color: red;*/
	}

div#nav li a:hover {
	border: none;
	}
	
div#nav-cat>ul a {
	width: 150px;
	}
	
div#nav-cat ul ul {
	position: absolute; 
	top: 0; left: 152px;
	display: none;
	}
	
div#nav-cat ul.level1 li.submenu:hover ul.level2, 
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {display:block;}

jettrue:

You're going to have to open up includes/modules/product_listing.php and add some <br />'s.

Add one before and after the manufacturer:

$lc_text = '[B]<br />[/B]<a href="' . zen_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing->fields['manufacturers_id']) . '">' . $listing->fields['manufacturers_name'] . '</a>[B]<br />[/B]';

Thank you for the quick and accurate reply, Jade! worked like a charm! :clap:

Beautiful Jettrue! :clap:

After replacing the entire css, I did move this setting back to: div#nav-cat {width: 150px; margin: -1px 0 0 0;

Level 1 to Level 2 to works much better now.

What did you change? Because we need to make the same changes to the Level 2 to Level 3 and Level 3 to Level 4 (see Menu Test Level) because they have the same gap that was making the menu cut out...

Thanks!

gsdcypher:

Beautiful Jettrue! :clap:

After replacing the entire css, I did move this setting back to: div#nav-cat {width: 150px; margin: -1px 0 0 0;

Level 1 to Level 2 to works much better now.

What did you change? Because we need to make the same changes to the Level 2 to Level 3 and Level 3 to Level 4 (see Menu Test Level) because they have the same gap that was making the menu cut out...

Thanks!
Replace these two sections of that code I previously sent with this:

div#nav-cat ul.level2 {
	padding: 0; 
	width: 150px; 
	border: none;
	}

div#nav-cat ul.level1 li.submenu:hover ul.level2, 
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {display:block;margin: 0 0 0 -2px; }

This is what did it:
margin: 0 0 0 -2px;

Awesome. :clap:

That works great. Thanks Jettrue.

One thing I noticed and I don't know if it is a big deal or not because the menu works fine... is that when you click on one of the menu buttons, the "transparent outline" that shows as you push/hold the mouse button down is larger than the buttons...

The transparent outline shows a few px below the button and a few px to the right of the button.

Thank you. :smile:

Hi I am using the Cherry Zen template and am having an issue specifically with IE 6. I know that making the site appear exactly the same in every browser is a daunting task however since it is still widely used I'd like to try to tackle the issue. On the main page of my site I used HTML to create my layout and add various items. When viewing my main page in IE 6 the bread crumbs and all of my content shift to the left. This does not happen in any other browser so I am assuming it is something specific in either with my code or in the CSS file that could be causing this issue. On all of the other product pages I am not having this issue so it's something specific to the main page that is causing it. Does anyone know what might be causing this issue and what I might be able to do to resolve it.

You can check it out by visiting:

lotzofgifts.com

Your insight is definitely appreciated.

Thanks

Hey great work on this theme :) One thing that bothers me is that the theme isn't valide because of the searchbox in the header. Any idea how to fix that? I couldn't find the right file I guess :(

Line 31, Column 375: value of attribute "type" cannot be "search"; must be one of "text", "password", "checkbox", "radio", "submit", "reset", "file", "hidden", "image", "button".

…h05n25fg2lcmg5" /><input type="search" name="keyword" id="searchTop" size="20

Any idea how to fix that since its the only error :)

Hi,

I'm trying to re-style the login page to make it more compact. At the moment people have to scroll to complete the form and it makes it feel long-winded.

So I've been trying to get the fields to look like this:

First Name: *******************
Second Name: ****************

with the boxes for the answers aligned on the left, rather than the default:

First Name:

Second Name:

I've been playing around with various settings of the following css, but with no luck.

LABEL.inputLabel {
width:85%;
float:left;
margin:0.3em;
}

Thanks in advance for your thoughts on how I can do this.

Possum.

possum:

Hi,

I'm trying to re-style the login page to make it more compact. At the moment people have to scroll to complete the form and it makes it feel long-winded.

So I've been trying to get the fields to look like this:

First Name: *******************
Second Name: ****************

with the boxes for the answers aligned on the left, rather than the default:

First Name:

---

Second Name:

---

I've been playing around with various settings of the following css, but with no luck.

LABEL.inputLabel {
width:85%;
float:left;
margin:0.3em;
}

> 
> Thanks in advance for your thoughts on how I can do this.
> 
> Possum.
Did you try changing the width above? Make it 15%.

Anyone have problems getting the option name manager to alter the number of rows and images per row displayed?

It does not work when I'm using cherry zen. Any ideas how to fix it?

matt123:

Anyone have problems getting the option name manager to alter the number of rows and images per row displayed?

It does not work when I'm using cherry zen. Any ideas how to fix it?

It works on my test site. Be sure you're changing it for the correct option name, and make sure you're changing the "Attributes Per Row", not the "rows" option. Reupload the original includes/templates/cherry_zen/templates/tpl_modules_attributes.php that I told you to change in my PM.

Hello,

I am new to the forums and Zen Cart. I have read the tutorials and searched the forums quite a bit but cannot seem to find the answer. Under checkout Step 2 of 3 Payment Information, I can't figure out how to edit:

TEXT_ORDER_STEPS_1 ORDER_STEPS_IMAGE_ALT TEXT_ORDER_STEPS_3
TEXT_ORDER_STEPS_2

Sorry if this is an easy fix but I don't feel like shifting thru 60 pages to find the answer :blush:

Jettrue, I love your template and was enjoying it very much. However, I tried to upload Google Checkout and everything went haywire and I've not been able to figure out what to do. I tried to reload the template hoping it would fix whatever went wrong to no avail. There are so many problems now that I don't know where to start! I am somewhat of a beginner so if you could assist me I'd appreciate it. My site is at http://www.theperfectscents.com

Thanks

shimabuku:

Hello,

I am new to the forums and Zen Cart. I have read the tutorials and searched the forums quite a bit but cannot seem to find the answer. Under checkout Step 2 of 3 Payment Information, I can't figure out how to edit:

TEXT_ORDER_STEPS_1 ORDER_STEPS_IMAGE_ALT TEXT_ORDER_STEPS_3
TEXT_ORDER_STEPS_2

Sorry if this is an easy fix but I don't feel like shifting thru 60 pages to find the answer :blush:

All of the language files for this template are not uploaded in the correct spot.