Support for CSS Flyout Menu

Lina, as the 'normal' Categories Menu generates the Categories in the same manor, I think you're going to find the same problem with it.

My suggestion would be to use the Categories Dressing Menu. It doesn't have the 'flyout', but I believe you can get the desired image results from it, as it uses Category ID's to style each category.

Now, IF you still wanted to keep and use the Flyout Menu, AND you know for sure what your future changes will be, then you could do as described above, making all your necessary background images that you know you will need. Then, create a separate stylesheet for each different background that you will be using. You could then put them in your css folder with names like French_stylesheet_categories_menu.txt. With them being a txt file, they would not be loaded. Then when you need to chagne, all you would have to do is rename the old on to something like English_stylesheet_categories_menu.txt, and the French one to stylesheet_categories_menu.css.
Just a though...........................

Hope this helps.

I am sure this has been answered, but I have yet to be able to find the fix. I simply want to change the font color of the categories. I am able to change the hover color and the color of the header but not the categories itself. I know it is tied to my regular style sheet but I haven't been able to find the correct part. I saw on the first page of this thread to change

a:link, #navEZPagesTOC ul li a {
color: #3300ff;
text-decoration: none;
}

This just changed the color of all my links on the page but did not change the color of my fly out categories font color.

disregard previous post. Thought it was in the default style sheet not the one included with the mod. I was mistaken.

atl2rva:

disregard previous post. Thought it was in the default style sheet not the one included with the mod. I was mistaken.

So, you got it worked out?

I did thank you. It kinda threw me off because I had used the search feature in notepad++ to look for "ffffff" to find what was making my text white, but did not realize it was only using the short version "fff". Thank You for your response.

It appears I may have put my questions regarding the disappearance of my headerWrapper and logoWrapper after installing CSS Flyout menu in the wrong thread. How can I get those back so that my images will show up in the header?

zc 1.3.7
http://www.monumentsplus.com

Thanks in advance.

GraniteMan44:

It appears I may have put my questions regarding the disappearance of my headerWrapper and logoWrapper after installing CSS Flyout menu in the wrong thread. How can I get those back so that my images will show up in the header?

zc 1.3.7
http://www.monumentsplus.com

Thanks in advance.

No, you had it in the right thread before..........wrong thread this time. This is for the CSS Flyout Menu.........not dropdown. It's a vertical Sidebox Menu.

But...............I do see your problem. In your includes/templates/CM_2/common/tpl_header.php find this section of code:

<!--<div id="logoWrapper">
    <div id="logo"><a href="http://monumentsplus.com/"><img src="includes/templates/CM_2/images/logo.gif" alt="Powered by Zen Cart :: The Art of E-Commerce [home link]" title=" Powered by Zen Cart :: The Art of E-Commerce [home link] " width="181" height="133" /></a></div>-->

and change that section to:

<div id="logoWrapper">
    <div id="logo"><a href="http://monumentsplus.com/"><img src="includes/templates/CM_2/images/logo.gif" alt="Powered by Zen Cart :: The Art of E-Commerce [home link]" title=" Powered by Zen Cart :: The Art of E-Commerce [home link] " width="181" height="133" /></a></div>

Notice the <!-- and the --> is what's 'killing' you. You cannot have your php code inside those.

Hope this helps.

No, you had it in the right thread before..........wrong thread this time. This is for the CSS Flyout Menu.........not dropdown. It's a vertical Sidebox Menu.

But...............I do see your problem. In your includes/templates/CM_2/common/tpl_header.php find this section of code:

Code:

<!--<div id="logoWrapper"> <div id="logo"><a href="http://monumentsplus.com/"><img src="includes/templates/CM_2/images/logo.gif" alt="Powered by Zen Cart :: The Art of E-Commerce [home link]" title=" Powered by Zen Cart :: The Art of E-Commerce [home link] " width="181" height="133" /></a></div>-->

and change that section to:

Code:

<div id="logoWrapper"> <div id="logo"><a href="http://monumentsplus.com/"><img src="includes/templates/CM_2/images/logo.gif" alt="Powered by Zen Cart :: The Art of E-Commerce [home link]" title=" Powered by Zen Cart :: The Art of E-Commerce [home link] " width="181" height="133" /></a></div>

Notice the <!-- and the --> is what's 'killing' you. You cannot have your php code inside those.

Hope this helps.

I couldn't find that code in my /includes/templates/CM_2/common/tpl_header.php file. Here is what my tpl.header.php file contains:

<?php /** * Common Template - tpl_header.php * * this file can be copied to /templates/your_template_dir/pagename<br /> * example: to override the privacy page<br /> * make a directory /templates/my_template/privacy<br /> * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br /> * to override the global settings and turn off the footer un-comment the following line:<br /> * <br /> * $flag_disable_header = true;<br /> * * @package templateSystem * @copyright Copyright 2003-2006 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license <http://www.zen-cart.com/license/2_0.txt> GNU Public License V2.0 * @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $ */ ?> <?php // Display all header alerts via messageStack: if ($messageStack->size('header') > 0) { echo $messageStack->output('header'); } if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) { echo htmlspecialchars(urldecode($_GET['error_message'])); } if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) { echo htmlspecialchars($_GET['info_message']); } else { } ?> <!--bof-header logo and navigation display--> <?php if (!isset($flag_disable_header) || !$flag_disable_header) { ?> <div id="headerWrapper"> <!--bof-navigation display--> <div id="navMainWrapper"> <div id="navMain"> <ul class="back"> <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li> <?php if ($_SESSION['customer_id']) { ?>

<li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>

<?php } else { if (STORE_STATUS == '0') { ?>

<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>

<?php } } ?> <?php if ($_SESSION['cart']->count_contents() != 0) { ?>

<li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>

<?php }?> </ul> </div> <div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div> <br class="clearBoth" /> </div> <!--eof-navigation display--> <!--bof-branding display--> <!--<div id="logoWrapper"> <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>--> <?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>

<div id="taglineWrapper">

<?php if (HEADER_SALES_TEXT != '') { ?>

  <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>

<?php } ?> <?php if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) { if ($banner->RecordCount() > 0) { ?>

  <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>

<?php } } ?>

</div>

<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?> </div> <br class="clearBoth" /> <!--eof-branding display--> <!--eof-header logo and navigation display--> <!--bof-header ezpage links--> <?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?> <?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?> <?php } ?> <!--eof-header ezpage links--> <!--bof-optional categories tabs navigation display--> <?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?> <!--eof-optional categories tabs navigation display--> <!--bof-drop down menu display--> <?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?> <!--eof-drop down menu display--> <div class="clearBoth"></div> <?php } ?>

I haven't read this thread in some time, and see that there are several requests for individualized category treatments of various kinds, and suggestions that Categories Dressing can do them at the cost of losing flyouts.
It's true that flyout styling is not built into CD, but I believe that it could be applied (using the chcategories option). CD has a correct ul/li structure underneath the individualized tags.

<!--<div id="logoWrapper">

These are the HTML comment tags that are causing your problem.

Just tested some flyout code on Categories Dressing, and it does work without impeding any other mod styling or function.
Something like this (adjusted to #chcategories):```
#categories ul ul {display: none;}
#categories li:hover {position: relative;}
#categories li:hover>ul {display: block; position:absolute; left:130px; top:0; z-index:100; width:140px;}
#categories ul ul ul {display: none;}
#categories li li:hover>ul {display: block; position:absolute; left:130px; top:0; z-index:200; width:140px;}
#categories ul ul ul ul {display: none;}
#categories li li li:hover>ul {display: block; position:absolute; left:130px; top:0; z-index:300; width:140px;}

We now return you to your regularly scheduled mod... :)

Just missed the edit window... it can be simplified to

#categories ul ul {display: none;}
#categories li:hover {position: relative;}
#categories li:hover>ul {display: block; position:absolute; left:130px; top:0; z-index:100; width:140px;}

Ya' know, Glen, I've been meaning for quite some time to see if maybe these two could be merged. That would make an absolute great menu..............add a couple lines of jquery to go with it (I've actually got the Horizontal CSS Dropdown Menu working very nicely with jquery, and am about to add a jquery version of it AND this one)........hmmmm........
But, oh...........I've just been sooooooo busy, lately. Not that I'm complaining, or anything...............

I was pleasantly surprised to see how simple it was to get the flyout functionality on Cat Dressing. I haven't looked at all of the CSS Flyout Menu code, but I think they have fundamentally different base coding to arrive at some of the same output. I'm not sure how much difference there is in the styling that makes the flyout action, though... probably not much. How much does jquery need to be woven into the PHP to work on something like this? Any at all? Or does it just modify the output once it gets to the user's screen? I may try some CSS3 transitions or something to see if I can get slick effects for modern browsers without adding jquery to the mix.

Yea, I kind of wish I had a little more time right now to mess with it, but as of the moment, I'm pretty swamped.

You know, I haven't even tried the jquery with this menu, yet, but almost everything about this menu and the CSS Dropdown Menu is the same except for the css, so I'm almost sure it would just be a simple matter of dropping the javascript in the tpl_header.php.

Well, actually.............I just very quickly took a minute to do a test run with it, and it worked just fine. All you have to do is add jquery to your jscript folder, rename it to jscript_jquery.js then drop this in the tpl_header.php:

<script type="text/javascript">
//script copyright Get Em Fast Web Designs
$(function () {
        $('#nav-cat .level1 .submenu.submenu').hover(function() {
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000);
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000);
}, function() {
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000);
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000);
});});
</script>

You can change it to FadIn and FadeOut also, but I think the hide and show looks better.

i'm new to the zen cart store, and would appreicate it if anyone would share how to remove Important Links Sidebox, iv'e tried to remove it from Admin/tools/Layoutboxescontroler but it doesn't show up there.

My site is here: BudgetA/C online store

This question has nothing to do with the thread topic, and you should post new questions in a new thread (go to the appropriate forum and click "new thread").
The Important Links sidebox is named ez-pages in the layout controller.

How can I hide this sidebox during the checkout phase?

mretzloff:

How can I hide this sidebox during the checkout phase?

JUST this one, or all of them on left and/or right columns, during checkout (which is what I'm assuming, as that would seem more feasible)?

Get Em Fast:

JUST this one, or all of them on left and/or right columns, during checkout (which is what I'm assuming, as that would seem more feasible)?

I already got all of the left column to hide during checkout by adding a conditional statement to column_left.php, but this sideboxes keeps showing up. Is there something I missed?

Thank you!