Header Issue

[pap1723]

Hello,
I am a definite Zen Cart Newbie. I am trying to modify my template piece by piece and I have run into 2 problems.

http://www.greatgolfdepot.com

Right below the header and above the Top Category listing is extra white space. I used Firefox Dev Tools and looked through Stylesheet.css and I cannot find out how to remove it. Any help would be greatly appreciated.

Also, is there anyway to add characters in between the various Categories. I was hoping for something like this...

Clubs | Apparel | Golf Bags | Golf Balls

Thanks for all the help!

[gjh42]

Add to your stylesheet
#navCatTabs a.category-top {border-left: 1px solid #ffffff;}

This is a typical way to get the dividers. To eliminate the divider on the left end, you would need to add a tag (in the code) to the first item displayed and give it border: none; after the first declaration.

[gjh42]

For the white space, I can't see anything that could be causing it, either. This will patch it, although it won't correct the underlying cause:

Add to your #logoWrapper declaration

margin-bottom: -12px;

[pap1723]

Thank you very much for the help. Your recommendation for the header worked perfectly.

Add to your stylesheet
#navCatTabs a.category-top {border-left: 1px solid #ffffff;}

This is a typical way to get the dividers. To eliminate the divider on the left end, you would need to add a tag (in the code) to the first item displayed and give it border: none; after the first declaration.

I don't completely understand this. From what I gather I should add the following to the CSS:

#navCatTabs a.category-top
{
border-left: 1px solid #FFFFFF;
}

What I don't understand is the second part. Where in the code do I need to add the tag (and what tag) to the first item displayed?

Thanks again!

[pap1723]

Also, would it be possible to replace the categories that are there with images instead. I am thinking of a second Navigation Bar with all of the products on the left.



This is what I would like the area below the header image to look like. Is this possible, and if it is, is it out of the abilities of my programming skills?

[gjh42]

Definitely possible, and not requiring esoteric techniques.

You would move the header navbar ("navigation display") to below the logo ("branding display"), and make three sub-divs in it, one for each row of your example. With links moved to the desired groupings in the code, they could be styled easily in the stylesheet.

[pap1723]

Okay, I got the first part of that done. Now the Navigation Bar is below the Branding Display.

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

I have no idea how to change this code to what you said. Any more help would be greatly appreciated.

[pap1723]

This is in my header.php file. I am trying to change the information from text that says Home to an image file. What is wrong with my syntax?

define('HEADER_TITLE_CATALOG', '/images/logo.gif');

[gjh42]

This is an outline of the structure for your three-row navbar. You still need to get the other links (not already part of the navbar) and insert them, mostly as <li> list items.

<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
<div id="navTopRow">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<!--add about link here-->
<!--add products link here-->
<!--add specials link here-->
<?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 } } ?>
<!--add contact link here-->
    </ul>
</div> <!--navTopRow-->
<br class="clearBoth" />
<div id="navMidRow">
    <ul class="back">
<!--add support text/link here-->
<!--add order status link here-->
<!--add wish list link here-->
<?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> <!--navMidRow-->
<br class="clearBoth" />
<div id="navBotRow">
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<!--add mfr search link here-->
<!--add phone number text here-->
</div> <!--navBotRow-->
<br class="clearBoth" />
</div>
</div>
<!--eof-navigation display-->

[pap1723]

Thank you very much for all of your help. I have everything how I want it now!!

Take a look:
http://www.greatgolfdepot.com

Next up, adding all the products.

Is there an easy product import?