Results 1 to 10 of 10
  1. #1
    Join Date
    Mar 2010
    Posts
    7
    Plugin Contributions
    0

    Default How do I create a clickable header that acts as a navigation bar too?

    Hi,

    I'm really new to Zen Cart. I found some Zen Cart stores that has a header which also acts as a navigation bar. One example: http://www.tamsinmcateestudios.com/store/

    I think it's done using Dreamweaver (slicing etc), but Zen Cart uses PHP..any idea how it's done?


    Just some info:
    I'm currently using Zen Cart 1.3.8. The shop I'm trying to create the above effect is here: http://www.helpmefindagift.net/testing/

  2. #2
    Join Date
    Jun 2005
    Location
    Cumbria, UK
    Posts
    10,262
    Plugin Contributions
    3

    Default Re: How do I create a clickable header that acts as a navigation bar too?

    The site you reference uses a customised header, where some additional DIVS have been added into tpl_header.php .

    The CORE FILE is located in:

    includes/templates/template_default/common/tpl_header.php

    You can make a COPY of this file, and make appropriate additions/edits to the headerWrapper and/or navMainWrapper divisions.

    Your edited version then needs to be saved to your CUSTOM template system, in your case:

    includes/templates/freetamplate1/common/tpl_header.php

    You may consider creating an image MAP (hotspots) for your header, to cater for your desired "links". Search for "image hotspots" in the forum for the techniques.
    19 years a Zencart User

  3. #3
    Join Date
    Mar 2010
    Posts
    7
    Plugin Contributions
    0

    Default Re: How do I create a clickable header that acts as a navigation bar too?

    Thank you so much, I'll try and post my outcomes here.

  4. #4
    Join Date
    Mar 2010
    Posts
    7
    Plugin Contributions
    0

    Default Re: How do I create a clickable header that acts as a navigation bar too?

    Hi,

    I sliced my header & created hotspots using Fireworks, and then opened the HTML file in Dreamweaver. I'm at loss as to which code to copy & paste to my tpl_header.php file.. Here's the HTML from Dreamweaver:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!-- saved from url=(0014)about:internet -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>header.jpg</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">td img {display: block;}</style>
    <!--Fireworks CS3 Dreamweaver CS3 target.  Created Thu Mar 11 22:01:34 GMT+0800 (MYT) 2010-->
    </head>
    <body bgcolor="#ffffff">
    <table border="0" cellpadding="0" cellspacing="0" width="900">
    <!-- fwtable fwsrc="header.png" fwpage="Page 1" fwbase="header.jpg" fwstyle="Dreamweaver" fwdocid = "1026498856" fwnested="0" -->
      <tr>
       <td><img src="images/spacer.gif" width="164" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="76" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="14" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="92" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="17" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="100" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="15" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="63" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="17" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="73" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="66" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="203" height="1" border="0" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
      </tr>
    
      <tr>
       <td colspan="12"><img name="header_r1_c1" src="images/header_r1_c1.jpg" width="900" height="16" border="0" id="header_r1_c1" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="16" border="0" alt="" /></td>
      </tr>
      <tr>
       <td rowspan="2" colspan="2"><img name="header_r2_c1" src="images/header_r2_c1.jpg" width="240" height="108" border="0" id="header_r2_c1" alt="" /></td>
       <td colspan="8"><img name="header_r2_c3" src="images/header_r2_c3.jpg" width="391" height="77" border="0" id="header_r2_c3" usemap="#m_header_r2_c3" alt="" /></td>
       <td rowspan="2" colspan="2"><img name="header_r2_c11" src="images/header_r2_c11.jpg" width="269" height="108" border="0" id="header_r2_c11" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="77" border="0" alt="" /></td>
      </tr>
      <tr>
       <td colspan="8"><img name="header_r3_c3" src="images/header_r3_c3.jpg" width="391" height="31" border="0" id="header_r3_c3" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="31" border="0" alt="" /></td>
      </tr>
      <tr>
       <td rowspan="2"><img name="header_r4_c1" src="images/header_r4_c1.jpg" width="164" height="62" border="0" id="header_r4_c1" alt="" /></td>
       <td><img name="header_r4_c2" src="images/header_r4_c2.jpg" width="76" height="32" border="0" id="header_r4_c2" usemap="#m_header_r4_c2" alt="" /></td>
       <td rowspan="2"><img name="header_r4_c3" src="images/header_r4_c3.jpg" width="14" height="62" border="0" id="header_r4_c3" alt="" /></td>
       <td><img name="header_r4_c4" src="images/header_r4_c4.jpg" width="92" height="32" border="0" id="header_r4_c4" usemap="#m_header_r4_c4" alt="" /></td>
       <td rowspan="2"><img name="header_r4_c5" src="images/header_r4_c5.jpg" width="17" height="62" border="0" id="header_r4_c5" alt="" /></td>
       <td><img name="header_r4_c6" src="images/header_r4_c6.jpg" width="100" height="32" border="0" id="header_r4_c6" usemap="#m_header_r4_c6" alt="" /></td>
       <td rowspan="2"><img name="header_r4_c7" src="images/header_r4_c7.jpg" width="15" height="62" border="0" id="header_r4_c7" alt="" /></td>
       <td><img name="header_r4_c8" src="images/header_r4_c8.jpg" width="63" height="32" border="0" id="header_r4_c8" usemap="#m_header_r4_c8" alt="" /></td>
       <td rowspan="2"><img name="header_r4_c9" src="images/header_r4_c9.jpg" width="17" height="62" border="0" id="header_r4_c9" alt="" /></td>
       <td colspan="2"><img name="header_r4_c10" src="images/header_r4_c10.jpg" width="139" height="32" border="0" id="header_r4_c10" usemap="#m_header_r4_c10" alt="" /></td>
       <td rowspan="2"><img name="header_r4_c12" src="images/header_r4_c12.jpg" width="203" height="62" border="0" id="header_r4_c12" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="32" border="0" alt="" /></td>
      </tr>
      <tr>
       <td><img name="header_r5_c2" src="images/header_r5_c2.jpg" width="76" height="30" border="0" id="header_r5_c2" alt="" /></td>
       <td><img name="header_r5_c4" src="images/header_r5_c4.jpg" width="92" height="30" border="0" id="header_r5_c4" alt="" /></td>
       <td><img name="header_r5_c6" src="images/header_r5_c6.jpg" width="100" height="30" border="0" id="header_r5_c6" alt="" /></td>
       <td><img name="header_r5_c8" src="images/header_r5_c8.jpg" width="63" height="30" border="0" id="header_r5_c8" alt="" /></td>
       <td colspan="2"><img name="header_r5_c10" src="images/header_r5_c10.jpg" width="139" height="30" border="0" id="header_r5_c10" alt="" /></td>
       <td><img src="images/spacer.gif" width="1" height="30" border="0" alt="" /></td>
      </tr>
    </table>
    <map name="m_header_r2_c3" id="m_header_r2_c3">
    <area shape="rect" coords="0,0,391,77" href="#" title="Shoppe" alt="Shoppe" />
    </map>
    <map name="m_header_r4_c2" id="m_header_r4_c2">
    <area shape="rect" coords="0,0,76,32" href="#" title="Home" alt="Home" />
    </map>
    <map name="m_header_r4_c4" id="m_header_r4_c4">
    <area shape="rect" coords="0,0,92,32" href="#" title="Shoppe" alt="Shoppe" />
    </map>
    <map name="m_header_r4_c6" id="m_header_r4_c6">
    <area shape="rect" coords="0,0,100,32" href="#" title="Gallery" alt="Gallery" />
    </map>
    <map name="m_header_r4_c8" id="m_header_r4_c8">
    <area shape="rect" coords="0,0,63,32" href="#" title="Blog" alt="Blog" />
    </map>
    <map name="m_header_r4_c10" id="m_header_r4_c10">
    <area shape="rect" coords="0,0,139,32" href="#" title="Newsletter" alt="Newsletter" />
    </map>
    </body>
    </html>
    I just added "#" in Fireworks for the URL coz the site isn't completed yet.

  5. #5
    Join Date
    Mar 2010
    Posts
    7
    Plugin Contributions
    0

    Default Re: How do I create a clickable header that acts as a navigation bar too?

    Sorry, I'm a real newbie..

  6. #6
    Join Date
    Jul 2009
    Location
    Prague, Czech Republic
    Posts
    530
    Plugin Contributions
    0

    Default Re: How do I create a clickable header that acts as a navigation bar too?

    Quote Originally Posted by papaiya View Post
    Hi,

    I'm really new to Zen Cart. I found some Zen Cart stores that has a header which also acts as a navigation bar. One example: http://www.tamsinmcateestudios.com/store/

    I think it's done using Dreamweaver (slicing etc), but Zen Cart uses PHP..any idea how it's done?


    Just some info:
    I'm currently using Zen Cart 1.3.8. The shop I'm trying to create the above effect is here: http://www.helpmefindagift.net/testing/
    I used image mapping for this site I am doing and the links on the washing line - if you go through the history of my posts (about two weeks ago) I posted where to put the code you would get from http://www.image-maps.com/

    I'll save you the trouble searching, posts #6 and #7 in this thread - http://www.zen-cart.com/forum/showthread.php?t=149092

  7. #7
    Join Date
    Mar 2010
    Posts
    7
    Plugin Contributions
    0

    Default Re: How do I create a clickable header that acts as a navigation bar too?

    Thank you so much Twaddle. I'll take a look at your post & the link.

  8. #8
    Join Date
    Mar 2010
    Posts
    7
    Plugin Contributions
    0

    Default Re: How do I create a clickable header that acts as a navigation bar too?

    Twaddle, thank you so much for your help. My image map now works, whohoo!

    http://www.helpmefindagift.net/testing/

  9. #9
    Join Date
    Jul 2009
    Location
    Prague, Czech Republic
    Posts
    530
    Plugin Contributions
    0

    Default Re: How do I create a clickable header that acts as a navigation bar too?

    No problem, glad I can finally be of help instead of annoying other people with my requests for help

  10. #10
    Join Date
    Mar 2010
    Posts
    7
    Plugin Contributions
    0

    Default Re: How do I create a clickable header that acts as a navigation bar too?

    Hehe. Hopefully I'll advance to your level too one day.

 

 

Similar Threads

  1. v151 How can I change header navigation bar?
    By fingermart in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 6 Jul 2013, 08:15 PM
  2. How to move navigation bar in header?
    By discguy in forum Templates, Stylesheets, Page Layout
    Replies: 18
    Last Post: 27 Jul 2010, 01:42 AM
  3. How to move navigation bar to under banner (header)?
    By hoang in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 14 Mar 2010, 06:09 PM
  4. How to create New Link in Top Navigation Bar
    By layoyo in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 21 Oct 2008, 08:56 PM
  5. How to change header bar so that....
    By sacotechnology in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 26 Jun 2008, 04:42 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR