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]

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

[KADesign]

Has anyone been able to use the News Manager with this template?

I just downloaded the 1.3.8a and thought I would try the news manager...but it breaks the template. I have it here until I'm finished working on it.
http://www.sleeplessnightsonline.com/cart/
If you click on an article it throws the sideboxes out of whack.
Any help or solutions would be appreciated.
This site has adult content...lingerie, toys etc...

Thanks,
Kelly

[jettrue]

Has anyone been able to use the News Manager with this template?

I just downloaded the 1.3.8a and thought I would try the news manager...but it breaks the template. I have it here until I'm finished working on it.
http://www.sleeplessnightsonline.com/cart/
If you click on an article it throws the sideboxes out of whack.
Any help or solutions would be appreciated.
This site has adult content...lingerie, toys etc...

Thanks,
Kelly

Well, I don't see the issue in Firefox, perhaps you fixed it? Anyhoo, if the sideboxes get thrown out of whack, its probably because the newsmanager either has an extra </div> somewhere, or is missing a </div> somewhere.