Results 1 to 10 of 10
  1. 11 Mar 2010, 12:55 PM #1
    papaiya
    papaiya is offline New Zenner
    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. 11 Mar 2010, 01:32 PM #2
    schoolboy's Avatar
    schoolboy
    schoolboy is offline Totally Zenned
    Join Date
    Jun 2005
    Location
    Hertfordshire, UK
    Posts
    9,915
    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.
    Did my post help you fix something? You can show your gratitude by buying the the dev team coffee.
  3. 11 Mar 2010, 02:18 PM #3
    papaiya
    papaiya is offline New Zenner
    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. 11 Mar 2010, 03:10 PM #4
    papaiya
    papaiya is offline New Zenner
    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. 11 Mar 2010, 03:11 PM #5
    papaiya
    papaiya is offline New Zenner
    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. 11 Mar 2010, 03:18 PM #6
    Twaddle
    Twaddle is offline Banned
    Join Date
    Jul 2009
    Location
    Prague, Czech Republic
    Posts
    567
    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. 11 Mar 2010, 03:22 PM #7
    papaiya
    papaiya is offline New Zenner
    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. 11 Mar 2010, 04:06 PM #8
    papaiya
    papaiya is offline New Zenner
    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. 11 Mar 2010, 04:36 PM #9
    Twaddle
    Twaddle is offline Banned
    Join Date
    Jul 2009
    Location
    Prague, Czech Republic
    Posts
    567
    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. 11 Mar 2010, 06:37 PM #10
    papaiya
    papaiya is offline New Zenner
    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.
 

 
« Previous Thread | Next Thread »

Similar Threads

  1. Make header clickable
    By iwantone in forum General Questions
    Replies: 0
    Last Post: 25 Feb 2010, 06:57 PM
  2. Making the header clickable
    By Elverdugo0 in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 26 Jun 2009, 09:08 AM
  3. Header image with clickable links in it...possible?
    By shelbydesignshoppe in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 13 Sep 2007, 08:24 PM
  4. Buttons in header not clickable
    By canemasters in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 12 Apr 2007, 06:45 AM
  5. Buy now acts funny when used
    By graper in forum Bug Reports
    Replies: 12
    Last Post: 17 Oct 2006, 08:00 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
  •  

Forum Rules

Content and Graphics Copyright (c) 2003 - 2013 Zen Ventures, LLC - all rights reserved
Zen Cart® is a Registered Trademark of Zen Ventures, LLC