Cherry Zen Template Support Thread

[gsdcypher]

[FONT=Arial]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.
[/FONT]

[jettrue]

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 = '<br /><a href="' . zen_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing->fields['manufacturers_id']) . '">' . $listing->fields['manufacturers_name'] . '</a><br />';

[jettrue]

[FONT=Arial]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.
[/FONT]

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;
}

[gsdcypher]

thanks jettrue. :-)

That fixed the gray area above the categories header.

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

[jettrue]

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;

[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.

[jettrue]

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;}

[Fireflyz]

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 = '<br /><a href="' . zen_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing->fields['manufacturers_id']) . '">' . $listing->fields['manufacturers_name'] . '</a><br />';

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

[gsdcypher]

Beautiful Jettrue!

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!

[jettrue]

Beautiful Jettrue!

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;