Cherry Zen Template Support Thread

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

Quote:

---

Originally Posted by 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:

Code:

---

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

---

Quote:

---

Originally Posted by 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]

---

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. :-(

Quote:

---

Originally Posted by 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.

Quote:

---

Originally Posted by 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):

Code:

---

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

---

Quote:

---

Originally Posted by 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:

Code:

---

$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! :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!

Quote:

---

Originally Posted by 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:

Code:

---

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

---

Code:

---

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;