Navigation main changes

[fusionsp]

I have searched for a while and im trying to change the navigation main bar.

To use just images/buttons instead of the standard block its made with.

http://wallandmural-stencils.com/shop/

this site has it going across the top. that is what i would like to create for my navmain. Where/how do i create this part?

[niccol]

well. the menu is produced with unordered list.

So, the styling is done in the <ul> and <li> tags.

One way of approaching it is to set a background image for the <li> tags in the list.

There are plenty of tutorial on the internet about how to create a navigation menu like this from an unordered list.

http://www.alistapart.com/articles/slidingdoors/
http://odyniec.net/articles/css-based-tabbed-menu/

These are actually for navigation tabs but the theory is the same. If you need more help just get in touch.

[fusionsp]

well. the menu is produced with unordered list.

So, the styling is done in the <ul> and <li> tags.

One way of approaching it is to set a background image for the <li> tags in the list.

There are plenty of tutorial on the internet about how to create a navigation menu like this from an unordered list.

http://www.alistapart.com/articles/slidingdoors/
http://odyniec.net/articles/css-based-tabbed-menu/

These are actually for navigation tabs but the theory is the same. If you need more help just get in touch.

hmmm, well i tried for the better part of today to make it work from a few sites. But it looks like with the template im using that im going to have a bit of work to get it right. Oh well, guess I have to start somewhere right. Thanks for the help though.

[niccol]

OK. Well I have had a closer look.

The unordered list is completely broken.

    <ul>

    <li><a href="http://www.fusionspiritualemporium.com//">Home</a>&nbsp;::&nbsp;
    <a href="https://secure.hostmonster.com/~fusionsp//index.php?main_page=login&amp;zenid=24d4453603aef1b1052519b8a3c0e4cf">Log In</a>
&nbsp;::&nbsp;

<li><a href="http://www.fusionspiritualemporium.com//index.php?main_page=shopping_cart&amp;zenid=24d4453603aef1b1052519b8a3c0e4cf">Shopping Cart</a></li>




<!--bof-header ezpage links-->

&nbsp;::&nbsp;  <a href="http://www.fusionspiritualemporium.com//index.php?main_page=privacy&amp;zenid=24d4453603aef1b1052519b8a3c0e4cf">Privacy Notice</a>
<!--eof-header ezpage links-->
</li>
</ul>

A whole load of closing </li> tags are missing. Without a proper structure to the list the display is just not going to play the game. Each list element needs to be enclosed in a pair of <li></li> tags to get the styling to work correctly.

So, to start you need to sort out this unordered list. SOme of the problems may be the template, others may be your own editing. Let's go back to a clean slate.

Find the file: tpl_header.php (templates/yourtemplate/common/)

Find the code section where the div #navMain is built.

In the default file this looks like:

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

You can find the pairs of <li></li> tags quite clearly. If your version of the file doesn't look like this then we have found an area of 'interest'. I would replace the section in your file with the code above.

If you want to add extra items to the menu this is fine. You just need to make sure that they are part of the unordered list.

So, it might look like:

<!--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 }?>
<li>NEW ITEM HERE</li>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>



<br class="clearBoth" />
</div>
<!--eof-navigation display-->

That will mean that the list is built in a well formed way and then the styling has a bit of chance of working.

The styling you have in the stylesheet doesn't look too far of the mark. Once you have sorted out the list we will be able to see the effect of the styling clearly and tweak it to get that perfect effect.

Let me know how you get on. I am in meetings for the next few hours but after that am at my desk and will help all I can. It looks like you've worked out how to get image backgrounds into the sideboxes and this is just as simple as that so we should have no problem!

Nik

[niccol]

Oh, and it might be helpful to have a unaltered, default version of tpl_header.php handy so you can compare the code.

Attached is one

[fusionsp]

Oh, and it might be helpful to have a unaltered, default version of tpl_header.php handy so you can compare the code.

Attached is one

thank you very much for all of your help. I have been pretty busy lately and havent had a chance to attempt any of the changes but im sure this will make a big difference.

When i first started using this template I noticed a lot of issues. So, it has been a work in progress to fix everything.

So, when I actually can get a chance to work on it I will let you know how it comes out.

Thanks again.

[fusionsp]

ok i think i fixed all the list issues. Upon looking thru it all, it didnt really look broken. It was just not in a good layout.

The unordered list wasnt a separate deal for every item like it should be.

it opened it at the beginning and closed the whole thing at the end. one great big UL?? but i changed and separated it all out. Maybe you could look at it again and tell me if i got it right this time?

If so, i found a few places that may work for my nav bar.

thanks again,

chris

[niccol]

Well, it is a lot better than it was.

The privacy notice is still not contained in <li> tags and I am not sure about the nbsp outside <li> tags.

If you can post your tpl_header.php file I'll have a look at it. Something is a bit odd at the moment.

[fusionsp]

ok here is the tpl_header file. I have added some extra things that i found to make the header. i have also changed the css file to work with it. it added the images, but it is still not right.

<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">

 <ul>
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><span></span><?php echo  HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><span></span><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><span></span><?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'); ?>"><span></span><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><span></span><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><span></span><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>




<!--bof-header ezpage links-->
<li><a <?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php echo '';
      require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?><span></span></li></a>
<!--eof-header ezpage links-->
</ul>


<!--eof-navigation display-->
</div></div>
 
<!--eof-header logo and navigation display-->

[niccol]

OK well you're getting there.

You need to change the tpl_header file slightly.

<!--bof-header ezpage links-->
<li><a <?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php echo '';
      require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?><span></span></li></a>
<!--eof-header ezpage links-->

This is a bit messed up. On the page it produces:

<!--bof-header ezpage links-->
<li><a   <a href="http://www.fusionspiritualemporium.com//index.php?main_page=privacy&amp;zenid=cd049bfce0c41ee44547aa93f78ceca6">Privacy Notice</a>
<span></span></li></a>
<!--eof-header ezpage links-->

The <li> tags and <a> tags are not inside one another so it is incorrect. As it happen you have an extra set of <a> tags anyway which is what is producing the extra 'button' on the screen. The php require produces the entire link including the <a> tags. So change the tpl file to:

<!--bof-header ezpage links-->
<li><?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php echo '';
      require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?><span></span></li>
<!--eof-header ezpage links-->

That should see you straight for the time being. I would get rid of the separators as they only confuse the issue now. This is done from the admin section.

This will work fine as long as you only have that one EZ page. If you add more then all of the easy pages will be enclosed in one set of <li> tags.
Personally, I think it might be better to link directly to the Privacy Notice rather than use the php require for EZpages. It would make the code easier to follow and would not break with more additions.