CSS Dropdown menu for the header- With Categories!

[Edm]

Hi am new to Zen, php, etc etc. Really enjoying it. Have installed Mostly Grey template changed all colors to aqua, blue & green. Installed drop down menu, "great" . Have managed to change color on non hover & background but + text cant seem to get drop downs to change color. Site is running on example.com.

Have added black border to left but would like to but black border top & bottom . Will this interfere with drop down? do I just add
border bottom 1px 00000
border top 1px 000000

Also when i placed my logo into Mostly grey the nav breadcrumb auto floated down to accommodate. Turned off breadcrumb however logo is small & distorted i cant find where to increase this spacing. Logo 980x186 px.

Finally would like to float side box with a small space from static drop down menu bar have been trying but not much success. Any help greatly appreciated.
Regards
EDM

[jettrue]

Hi am new to Zen, php, etc etc. Really enjoying it. Have installed Mostly Grey template changed all colors to aqua, blue & green. Installed drop down menu, "great" . Have managed to change color on non hover & background but + text cant seem to get drop downs to change color. Site is running on example.com.

Have added black border to left but would like to but black border top & bottom . Will this interfere with drop down? do I just add
border bottom 1px 00000
border top 1px 000000

Also when i placed my logo into Mostly grey the nav breadcrumb auto floated down to accommodate. Turned off breadcrumb however logo is small & distorted i cant find where to increase this spacing. Logo 980x186 px.

Finally would like to float side box with a small space from static drop down menu bar have been trying but not much success. Any help greatly appreciated.
Regards
EDM

Link to the site? Have you searched for the mostly grey thread?

To change the drop down color, that is the very top portion of the stylesheet_header_menu.css:

/*green*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}

To add a border to the drop menu, you'd add it to:

div#dropMenu ul.level1

and the correct formatting would be:

border-top:1px solid #000000;
border-bottom:1px solid #000000;

[Baller#23]

Hi,
Im totally new to Zen Cart, I know a little bit about webdesign though. I thought this Dropdown is perfect and tried to install it.
Here is my result: www.psqinone.com


I bought a template from www.templatemonster.com
--> http://www.templatemonster.com/zen-c...tes/14595.html

I put "additions_to_.htaccess" in "public_html"
"csshover.htc" in "public_html/includes"
"categories_ul_generator.php" in "public/includes/classes/categories_ul_generator.php"
"headermenu.php" in"/includes/languages/english/extra_definitions/headermenu.php"
"ezpages_drop_menu.php" in "/includes/modules/sideboxes/ezpages_drop_menu.php"
"tpl_drop_menu.php" and tpl_header.php" in "/includes/templates/MYTEMPLATE/common/tpl_header.php and tpl_drop_menu.php"
"stylesheet_header_menu.css" in /includes/templates/css/stylesheet_header_menu.css
"tpl_ezpages_drop_menu.php" in "/includes/templates/sideboxes/tpl_ezpages_drop_menu.php"

I hope this configuration is correct...
I deleted stylesheets out of the folder "/includes/templates/css" which belong to the template I bought. Deleting them didnt make any difference....


My tpl_header.php :
<?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 3392 2006-04-08 15:17:37Z birdbrain $
*/
?>
<?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">
<div id="navMainLinks">
<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>
</div>
</div>
<div class="clearBoth"></div>
<!--eof-navigation display-->
<!--bof-branding display-->
<div id="logoWrapperOuter">
<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, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT) . '</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>
</div>
</div>
<div class="clearBoth"></div>
<!--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 dont have the language/currency modul on my website anymore. I deleted it.


Any ideas?

That would be amazing!

Baller#23

[jettrue]

Hi,
Im totally new to Zen Cart, I know a little bit about webdesign though. I thought this Dropdown is perfect and tried to install it.
Here is my result: www.psqinone.com

<!--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 } ?>


Baller#23

Your issue is the above section. You put this code:

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

WITHIN the code for categories tab display:

<!--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-->
<?php } ?>

You have the categories tab menu turned off, THEREFORE, you do not see the drop down menu. Move the code for the drop menu, AFTER the end of the category tabs:

<!--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-->
<?php } ?>
<!--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>

[Baller#23]

Thanks a lot! everything´s working now! Is there a way to round the edges of the dropdown? so that every section ( home,categories...) is by itself with round edges?

[jettrue]

Thanks a lot! everything´s working now! Is there a way to round the edges of the dropdown? so that every section ( home,categories...) is by itself with round edges?

You'd have to make images to do that.

[Baller#23]

You'd have to make images to do that.

I could create some in PS. Where would I insert the pictures? Does you Dropdown with round corners work for 1.3.8?