Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / adding image rollover navbar to my ZenCart site

adding image rollover navbar to my ZenCart site

Locked

Views: 2,722

Results 1 to 12 of 12
This thread is locked. New replies are disabled.
31 Jul 2008, 3:12 AM
#1
cirque avatar

cirque

New Zenner

Join Date:
May 2007
Location:
Toronto
Posts:
13
Plugin Contributions:
0

adding image rollover navbar to my ZenCart site

Hello.

I am running a website for a Concert Presenter (www.smallworldmusic.com) which also sells Tickets and Merchandise via a ZenCart (http://www.smallworldmusic.com/catalog/). I need to create complete consistency between the two so that moving from the Concert Presentation site to the ZenCart is seamless. To do so I need to add the navbar that exists on the Concert website to the top of the ZenCart. This navbar is made up of classic image roll-overs. This image rollover navbar would sit below the header/logo, and above the ZenCart default nav (Home : LogOut : My Account, etc.). How do I add the code for the Concert Presentation navbar so that this navbar shows up at the top of the ZenCart header?

Many thanks.

Nik Beeson


Master of Ceremonies Cirque-Samsara
www.cirque-samsara.com

31 Jul 2008, 3:46 AM
#2
cirque avatar

cirque

New Zenner

Join Date:
May 2007
Location:
Toronto
Posts:
13
Plugin Contributions:
0

Re: adding image rollover navbar to my ZenCart site

I've done it.
Added the code to the tpl_header.php.
Seems to work dandy.
Anyone have any ideas why this might cause probs??
Wanted to add an include (hence, if I needed to change the navbar would only have to change it in the include) but that decidedly didn't work.

Gracias

NIk

31 Jul 2008, 3:46 AM
#3
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: adding image rollover navbar to my ZenCart site

I am running a website for a Concert Presenter...
How do I add the code for the Concert Presentation navbar
Make management easier and move towards having all of this inside of Zen Cart,

Reviews, about us, community(links manager), Sponsors(ezpage), Archives(maybe ezpages), Contact, Join(News Letter Subscribe)

Copy tpl_header.php to your includes/templates/smallworld/common - folder

Edit this file to include the menu code in the correct order of appearance

31 Jul 2008, 3:52 AM
#4
cirque avatar

cirque

New Zenner

Join Date:
May 2007
Location:
Toronto
Posts:
13
Plugin Contributions:
0

Re: adding image rollover navbar to my ZenCart site

Thanks Cobra.

Glad to see the advice matched my eventual action.

Re. moving into ZenCart: right now we're heading toward Drupal or some such CMS.

All the best

NIk

7 Aug 2008, 8:37 PM
#5
athena avatar

athena

Totally Zenned

Join Date:
Jan 2006
Location:
NM
Posts:
740
Plugin Contributions:
0

Re: adding image rollover navbar to my ZenCart site

I've done it.
Added the code to the tpl_header.php.

How did you do this? Where in tpl_header did you place the code and what tags did you use to get it to center where you wanted? I've been working on this for weeks with no success except to get my finished menu to display outside the main wrapper.

Kobra, the problem with ezpages for us is that Google has been really good to us indexing our html pages. We'd have to be more code savvy to completely rework hundreds of pages into zen and can't find the time for that yet.

11 Aug 2008, 12:31 PM
#6
cirque avatar

cirque

New Zenner

Join Date:
May 2007
Location:
Toronto
Posts:
13
Plugin Contributions:
0

Re: adding image rollover navbar to my ZenCart site

HI.

Sorry for the delay.
Was taking a couple of days off.

I dropped my navbar code (which included the rollover script, the table containing the rollovers, and the rollover images) into the 'tpl_header.php' page immediately beneath the <div id="navMain"> opening tag.

Hope that helps.

Nik

11 Aug 2008, 12:50 PM
#7
athena avatar

athena

Totally Zenned

Join Date:
Jan 2006
Location:
NM
Posts:
740
Plugin Contributions:
0

Re: adding image rollover navbar to my ZenCart site

Thanks cirque for the reply, I guess there really is someone out there.

I've worked this weekend on a new way of accomplishing our goal. I did get it to work with a table inserted but I'm trying to move away from that sort of code.

What I've tried to get answers on with several postings in the forum over the past month or so, is how to insert my css dropdown menu into tpl_header without it floating up and over to the right of my page. I took down the code that was doing that and am working on other solutions since on one has responded.

11 Aug 2008, 3:01 PM
#8
cirque avatar

cirque

New Zenner

Join Date:
May 2007
Location:
Toronto
Posts:
13
Plugin Contributions:
0

Re: adding image rollover navbar to my ZenCart site

It's the only table on the whole site.
I expect I might be able to get rid of it, but other priorities are pressing.
Only suggestions are:

  • are you certain the width of your navbar fits within the frame?
  • have you tried centering the navbar?
  • adding a css id as a container for the navbar?

That's all I can think of right now, sorry to not have a quick answer.
CSS can be such a pain in the #@*& sometimes.
The amount of time I've spent trying to get a robust cross-platform system for getting three-columns to have the same length (when it would take 30 seconds using bad old tables) is just criminal!
Turns out the javascript I painstakingly incorporated on the small world site doesn't work in some versions of Safari. The javascript developers had no answers to fixing it. Told me to try another method.

Good luck.

Nik

12 Aug 2008, 2:30 AM
#9
website_rob avatar

website_rob

Inactive

Join Date:
Oct 2006
Location:
Alberta, Canada
Posts:
4,572
Plugin Contributions:
0

Re: adding image rollover navbar to my ZenCart site

Although it is true that CSS takes a bit more thought to work out some Display methods, it is the same as when first learning TABLE layout; including Embedded TABLES which can take a lot of thought. :smile:

Anyone familiar with a Jig, such as a Carpenter, Metal Smith, etc., knows that certain Forms will be used over 'n over. It helps to fast track in getting a new project started. This also applies to Web Developers. Here are two sites where I have used such a Jig, for a Horizontal Navigation Menu within Zen Cart.

http://janetbates.com/store/ & http://www.reelstackle.com/

As somewhat complicated or involved CSS code is required for the type of coding used in the Horizontal Navigation, I created a Jig which I can customize for any site.

The first site mentioned is also using the easyEmbed Module to incorporate Zen Cart into an existing site. This makes the coding somewhat different than the second site.

The second site is based on the default Classic Template in Zen Cart 1.3.5. Coding follows pretty much, as used in the default Template files.

As this is Custom coding done for Clients but using basic HTML & CSS code, I cannot go into details and explanations of what was done and why. What I can tell you is where I got the original (Open Source) code, which is Ruthsarian Layouts. A fascinating site with excellent code examples that not only have been worked out and proven, but also done by a person who likes to do things well!

BTW, for the three-column pages problem mentioned by cirque, various heights for Content but all using the same height for layout, is explained at the Ruthsarian Layouts site. Just a matter of putting the 3 DIV's for Columns into 2 Wrappers.

12 Aug 2008, 1:05 PM
#10
athena avatar

athena

Totally Zenned

Join Date:
Jan 2006
Location:
NM
Posts:
740
Plugin Contributions:
0

Re: adding image rollover navbar to my ZenCart site

Website Rob, thank you for a thoughtful response. I appreciate your mention of doing things well. Despite my "hack" approach to zencart..that is just a time thing...I love to perfect and perfect again and my ultimate goal is to keep up with the zen team's standards so that one day my site will really flow. This site began with aol press in 98 and has grown to hundreds of pages over ten years. Once in a great while I come across a "made with aol press" tag. :(
Of course I graduated to Dreamweaver a few years ago, but even that is feeling old now.

I magically accomplished my goal of integrating the drop down css menu of my liking to navigate to the rest of my site and just need to work today on finding the extra space showing up under my logo.gif and a few other little things.

By not getting much response along the way I was left to my own devices and realize there is no point to advising someone to go in a path that will take them away from zen's standards. I've learned a lot but for now just need the site up and will revisit the drop down mod by Jade some other time.

http://topkayaker.com - if anyone wants help with doing this "my way" I'll try and find the time to assist here in the forum.

12 Aug 2008, 5:30 PM
#11
website_rob avatar

website_rob

Inactive

Join Date:
Oct 2006
Location:
Alberta, Canada
Posts:
4,572
Plugin Contributions:
0

Re: adding image rollover navbar to my ZenCart site

athena, you are welcome for any help I was able to provide -- and for the kind words about my posting. :smile:

If I may, since you mentioned you were going to be working on your site, I found two curiosities.

With IE 6 it tells me; Access denied to http://www.topkayaker.com/TopKayakerShop/csshover.htc. Indeed, if I try to view it with another Browser it starts a download. This also means all your Header Navigation drop-down links do not work and the Parent links all lead to the Home page of your site.

With FF 2.x and JS turned OFF, http://topkayaker**.com**/TopKayakerShop/ shows only text. I presume that is because of your coding being setup to use the '.net' Domain name instead of the '.com', as you posted. Probably related to the use of the 'csshover.htc' file as well.

HTH

12 Aug 2008, 8:22 PM
#12
athena avatar

athena

Totally Zenned

Join Date:
Jan 2006
Location:
NM
Posts:
740
Plugin Contributions:
0

Re: adding image rollover navbar to my ZenCart site

I'm not getting that message and the parent links are working...but you are right, not the drop down on the index.php page....the drop downs do work on the product pages. Why might that be, I wonder....a new quest...