How to customize the Header Navigation Bar

[alex123]

Hi everyone,

 

I would be grateful, if someone could give me some pointer as to how I could customize my header navigation to look like the one on this (zen-cart) template: http://www.cherryzen.jadetrue.com/

 

This is my site (similar template) http://74.54.252.194/~aktis/ how can I make my buttons on the header navigation bar look like the ones on the zencart template ?

 

Thank you

Alex

[alex123]

Anyone Please :(?

 

I think it has to do with CSS but I not sure wher to start.. I am sure there are many people in this forum that know ecxactly how to do this.

[dmnalven]

You could start by reviewing the template code. This is what FOSS is all about.

[tapuahk]

Hi everyone,

 

I would be grateful, if someone could give me some pointer as to how I could customize my header navigation to look like the one on this (zen-cart) template: http://www.cherryzen.jadetrue.com/

 

This is my site (similar template) http://74.54.252.194/~aktis/ how can I make my buttons on the header navigation bar look like the ones on the zencart template ?

 

Thank you

Alex

 

Alex,

 

The includes/header.php file will need to be edited, as well as changes in the stylesheet:

 

from your example I listed code that displays the header bar:

 

<div id="navMainSearch">
         <form name="quick_find_header" action="http://www.cherryzen.jadetrue.com/index.php?main_page=advanced_search_result" method="get"><input name="main_page" value="advanced_search_result" type="hidden"><input name="search_in_description" value="1" type="hidden"><input name="keyword" id="searchTop" size="20" maxlength="30" value="Search" onfocus="if (this.value == 'Search') this.value = '';" onblur="if (this.value == '') this.value = 'Search';" type="search"></form>        </div>
       <div id="navMain">
         <ul>
           <li><a href="http://www.cherryzen.jadetrue.com/"><span>Home</span></a></li>
                       <li><a href="http://www.cherryzen.jadetrue.com/index.php?main_page=login"><span>Log In</span></a></li>

           <li><a href="http://www.cherryzen.jadetrue.com/index.php?main_page=account"><span>My Account</span></a></li>
                       <li><a href="http://www.cherryzen.jadetrue.com/index.php?main_page=shopping_cart"><span>Shopping Cart</span></a></li>
           <li><a href="http://www.cherryzen.jadetrue.com/index.php?main_page=checkout_shipping"><span class="last">Checkout</span></a></li>
         </ul>
       </div>
     </div>

 

As you can see yourself you will need to change your image links to just text.

 

if you change

 

A.headerNavigation {

color: #000000;

background: #ffffff url("images/normal_button.gif");

}

 

A.headerNavigation:hover {

color: #009900;

background: #ffffff url("images/hover_button.gif");

}

 

in your stylesheet.css

 

you should be able to duplicate the same results.

 

 

~~~Tapuahk

[alex123]

Thank you guys for your suggestions. I am going to go through the code and try to make the appropriate changes.