Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

New nav bar for my store


Guest

Recommended Posts

My store proper has been up and running for a couple of months now

 

cheapsheetmusic.co.uk

 

But for the last couple of days I have been working on a new nav bar. I have got it working but I am not sure about the tabs images. They need to be red and white to work with the store colours but they still don't look streamlined and professional to me.

 

Any thoughts on how I could improve them but still keep it in line with the colour scheme?

 

Ignore the mess here - this is my testing ground:

 

http://cheapsheetmusic.co.uk/test/default.php

Link to comment
Share on other sites

MUCH nicer than the old buttons :)

 

Have you considered putting the whole site in a table to restrict the width to the same size as your header logo thingy?... Looks a little funny at higher resolutions, though I'm in a minority at 1600x1200.

Link to comment
Share on other sites

Go look at your site in Mozilla/Firebird -- it's not reading your stylesheet at all. IE and Opera still work. How did you manage that?

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

Greetings to the forum.

 

Hi,

 

Nice job with your site, and I love your nav bar, is there any chance of sharing the code and a how to implement description.

 

 

Thanks in advance,

 

Joe.

Link to comment
Share on other sites

To answer my own question: The link to your stylesheet in default.php is incorrect. Internet Explorer and Opera are somehow managing to find the stylesheet anyway (and I'd certainly like to know how.) Mozilla is just giving up. Interesting.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

To answer my own question: The link to your stylesheet in default.php is incorrect. Internet Explorer and Opera are somehow managing to find the stylesheet anyway (and I'd certainly like to know how.) Mozilla is just giving up. Interesting.

 

Regards

Jim

Hmm. It was working fine in Mozilla before I put the nav bar in so obviously it's something to do with that.

 

When you say the link is incorrect, what specifically is incorrect about it? I didn't change anything in default.php - all the additional code is in the header.

Link to comment
Share on other sites

^it was actually something to do with the Worldpay images, I assume there is something wrong at the WorldPay end. They were not coming through and so were causing the whole page not to load. I have removed the code and now it loads fine.

 

I was wetting my britches for a while though, trying to work out what it was.

 

I have put back the old nav bar temporarily while I try and work out what the issues are with the new one.

Link to comment
Share on other sites

Oh right that is the problem

 

I had the same issue and i phoned them this morning b4 i posted

 

They have done an upgrade last thursday and all their servers have gone down :angry:

 

Their website/email/servers all gone!!

 

They are frantically trying to resolve it as we speak!

 

Thats that sorted then

 

mark

Regards

 

Mark A Reynolds

Link to comment
Share on other sites

Got the stylesheet problem sorted out!!!

 

There was an extra blank line in the stylesheet which IE could deal with but Mozilla and Netscape spat the dummy over!!

 

All sorted now ;)

 

Will go and have lunch and then reinstall the new nav bar this afternoon!

Link to comment
Share on other sites

MUCH nicer than the old buttons :)

 

Have you considered putting the whole site in a table to restrict the width to the same size as your header logo thingy?... Looks a little funny at higher resolutions, though I'm in a minority at 1600x1200.

Thought of it, but I don't like the idea of great big white stripes down each side.

Link to comment
Share on other sites

Greetings to the forum.

 

Hi,

 

Nice job with your site, and I love your nav bar, is there any chance of sharing the code and a how to implement description.

 

 

Thanks in advance,

 

Joe.

Gladly, although you will need to tweak it a bit.

 

Create a new file called something like extraheader.php and put it in your catalog/includes folder.

 

My code in this file goes as follows:

 

<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr class="headerNavigation">
   <td class="headerNavigation"></td>
<td align="right" height="4" class="headerNavigation"></td>
 </tr>
 <tr>
 <td height ="3"></td>
</tr>
 </table>
<CENTER>
               <TABLE ID="NavigationBar3" BORDER=0 CELLSPACING=0 CELLPADDING=0 NOF=NB_FYHP WIDTH=700>
                   <TR VALIGN=BOTTOM ALIGN=CENTER>
<td><a href="<?php echo tep_href_link(FILENAME_DEFAULT); ?>"><?php echo ((($current_category_id == 0) && (basename($PHP_SELF) == FILENAME_DEFAULT)) ? tep_image(DIR_WS_IMAGES . 'home-on.gif', 'Home') : tep_image(DIR_WS_IMAGES . 'home-off.gif', 'Home')); ?></a></td>

<td><a href="<?php echo tep_href_link(FILENAME_DEFAULT, 'cPath=56'); ?>"><?php echo ((($current_category_id == 56) && (basename($PHP_SELF) == FILENAME_DEFAULT)) ? tep_image(DIR_WS_IMAGES . 'freemusic-on.gif', 'FREE sheet music') : tep_image(DIR_WS_IMAGES . 'freemusic-off.gif', 'FREE sheet music')); ?></a></td>

<td> <a href="<?php echo tep_href_link(FILENAME_DEFAULT, 'cPath=21'); ?>">  <?php echo ((($current_category_id == 21) && (basename($PHP_SELF) == FILENAME_DEFAULT)) ? tep_image(DIR_WS_IMAGES . 'sheetmusic-on.gif', 'Sheet music') : tep_image(DIR_WS_IMAGES . 'sheetmusic-off.gif', 'Sheet music')); ?></a></td>

<td> <a href="<?php echo tep_href_link(FILENAME_DEFAULT, 'cPath=22'); ?>"> <?php echo ((($current_category_id == 22) && (basename($PHP_SELF) == FILENAME_DEFAULT)) ? tep_image(DIR_WS_IMAGES . 'gifts-on.gif', 'Gifts') : tep_image(DIR_WS_IMAGES . 'gifts-off.gif', 'Gifts')); ?></a></td>

<td> <a href="<?php echo tep_href_link(FILENAME_DEFAULT, 'cPath=23'); ?>"> <?php echo ((($current_category_id == 23) && (basename($PHP_SELF) == FILENAME_DEFAULT)) ? tep_image(DIR_WS_IMAGES . 'cards-on.gif', 'Cards') : tep_image(DIR_WS_IMAGES . 'cards-off.gif', 'Cards')); ?></a></td>

<td> <a href="<?php echo tep_href_link(FILENAME_DEFAULT, 'cPath=22'); ?>"> <?php echo ((($current_category_id == 22) && (basename($PHP_SELF) == FILENAME_DEFAULT)) ? tep_image(DIR_WS_IMAGES . 'cds-on.gif', 'CDs') : tep_image(DIR_WS_IMAGES . 'cds-off.gif', 'CDs')); ?></a></td>

<td><a href="<?php echo tep_href_link(FILENAME_SPECIALS); ?>"><?php echo (((basename($PHP_SELF) == FILENAME_SPECIALS)) ? tep_image(DIR_WS_IMAGES . 'special-on.gif', 'Special offers') : tep_image(DIR_WS_IMAGES . 'special-off.gif', 'Special offers')); ?></a></td>

<td><a href="<?php echo tep_href_link(FILENAME_ADVANCED_SEARCH); ?>"><?php echo (((basename($PHP_SELF) == FILENAME_ADVANCED_SEARCH)) ? tep_image(DIR_WS_IMAGES . 'search-on.gif', 'Search') : tep_image(DIR_WS_IMAGES . 'search-off.gif', 'Search')); ?></a></td>

<td><?php echo '<a href="http://cheapsheetmusic.co.uk/thepit" target="blank">' . tep_image(DIR_WS_IMAGES . 'thepit-off.gif', 'The Pit forum') . '</a>'; ?></td>
                   </TR>
               </TABLE>
</CENTER>

 

Some of it you can miss out and some will need to be changed, depending on what you want to do.

 

You will need to create two images for each button, an 'on' one (my red one) and an 'off' one (my white one).

 

Upload these images to your images folder.

 

The code in the above files works as follows. At the top we have

 

<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr class="headerNavigation">
   <td class="headerNavigation"></td>
<td align="right" height="4" class="headerNavigation"></td>
 </tr>
 <tr>
 <td height ="3"></td>
</tr>
 </table>

 

Which creates a table above the nav bar, inserts a maroon bar below my header banner and some white space above the buttons. You can delete this if you don't want it.

 

This code

<TABLE ID="NavigationBar3" BORDER=0 CELLSPACING=0 CELLPADDING=0 NOF=NB_FYHP WIDTH=700>

among other things, sets the nav bar width to 700 pixels, which is the width of all my buttons added up together. You will need to set this to the width of your own nav bar, or just set it to 100% if you want it to stretch the width of the screen.

 

For the welcome button (home page) the code is:

<td><a href="<?php echo tep_href_link(FILENAME_DEFAULT); ?>"><?php echo ((($current_category_id == 0) && (basename($PHP_SELF) == FILENAME_DEFAULT)) ? tep_image(DIR_WS_IMAGES . 'home-on.gif', 'Home') : tep_image(DIR_WS_IMAGES . 'home-off.gif', 'Home')); ?></a></td>

 

All you will need to change in that is the images and the alt text if you want.

 

for the other category buttons, which look like this:

<td><a href="<?php echo tep_href_link(FILENAME_DEFAULT, 'cPath=56'); ?>"><?php echo ((($current_category_id == 56) && (basename($PHP_SELF) == FILENAME_DEFAULT)) ? tep_image(DIR_WS_IMAGES . 'freemusic-on.gif', 'FREE sheet music') : tep_image(DIR_WS_IMAGES . 'freemusic-off.gif', 'FREE sheet music')); ?></a></td>

 

You will need to change the category number (56 in this case) to whatever the category number is you are linking to, as well as the images.

 

For the other buttons, the specials etc, the code is this:

<td><a href="<?php echo tep_href_link(FILENAME_SPECIALS); ?>"><?php echo (((basename($PHP_SELF) == FILENAME_SPECIALS)) ? tep_image(DIR_WS_IMAGES . 'special-on.gif', 'Special offers') : tep_image(DIR_WS_IMAGES . 'special-off.gif', 'Special offers')); ?></a></td>

 

Depending on which page you are linking to, you just change the name of the page eg FILENAME_SPECIALS, and the images again.

 

Hope you can use this; you can thank Matt aka iiinetworks for this code, as he wrote it for me.

 

When you have created your file, open header.php and find this piece of code:

 

<table border="0" width="100%" cellspacing="0" cellpadding="1">
 <tr class="headerNavigation">
   <td class="headerNavigation"><?php echo $breadcrumb->trail(' ? '); ?></td>
   <td align="right" class="headerNavigation">

 

Immediately before it, add:

 

<!-- additional header bit //-->
<?php require(DIR_WS_INCLUDES . 'extraheader.php'); ?>
<!-- additional header bit_eof //-->

 

Remember to back up and I recommend using a test store before implementing into a live store.

Link to comment
Share on other sites

When you say the link is incorrect, what specifically is incorrect about it?

Your link is to http://www.cheapsheetmusic.co.uk/_files/stylesheet.css, but the stylesheet is at http://www.cheapsheetmusic.co.uk/stylesheet.css. I presume that is some confusion over filesystem vs. Web path.

 

I would still like to know how two of the browsers manage to find it despite the bad path. Default settings maybe?

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

When you say the link is incorrect, what specifically is incorrect about it?

Your link is to http://www.cheapsheetmusic.co.uk/_files/stylesheet.css, but the stylesheet is at http://www.cheapsheetmusic.co.uk/stylesheet.css. I presume that is some confusion over filesystem vs. Web path.

 

I would still like to know how two of the browsers manage to find it despite the bad path. Default settings maybe?

 

Regards

Jim

I'd like to know how you can tell that. When I use 'View source' all I see for the stylesheet is:

 

<base href="http://cheapsheetmusic.co.uk/store/">
<link rel="stylesheet" type="text/css" href="stylesheet.css">

 

Which is correct, as the store is located in cheapsheetmusic.co.uk/store and the stylesheet is cheapsheetmusic.co.uk/store/stylesheet.css

 

Anyway, as I said, the problem was that I had managed to get an extra blank line in the stylesheet which IE ignored but Mozilla and Netscape couldn't cope with.

Link to comment
Share on other sites

Hi, Julie.

 

Thanks for the quick response and the time you spend sharing the hack, it must have taken you a while to sort and organize it before posting. I have created all my files and looking forward to start on it early in the morning.

 

Joe.

Link to comment
Share on other sites

Hi, Julie.

 

Thanks for the quick response and the time you spend sharing the hack, it must have taken you a while to sort and organize it before posting. I have created all my files and looking forward to start on it early in the morning.

 

Joe.

Great! Let me know when you've done it and I'll come and have a nosey.

 

It's always good to get new ideas - I thought I'd finished my store when I went live back in September but it seems every day I'm tweaking something.

Link to comment
Share on other sites

Hey Julie...

Ive started this thread: http://www.oscommerce.com/forums/index.php?showtopic=64467

and i'm looking for something similar to what you have already, but to sortof take it to the next step, by only having the sub categories in the left nav when you click on one of the main category tabs up top...

 

Let me know what you think....

and did you release this mod to the contributions section?

thanks

Link to comment
Share on other sites

I haven't released it as a contrib. There is already a tabs contrib which automatically puts in the name of each category, but I don't think you can do other pages also.

 

This is more work in that you have to create each image separately, but it also gives you more control.

 

It could certainly use some community development - it would be nice for the 'on' tab to work in sub categories as well as top level categories.

 

I might.

 

Haven't had chance to look at your thread yet.

Link to comment
Share on other sites

I'd like to know how you can tell that.

Well, that was extremely stupid of me. I had saved a copy of your page so that I could look at it in my code editor, and I completely forgot that I wasn't looking at the real page anymore. D'oh! Where's that embarassed smiley when I need one?

 

Anyway, you found the problem, so all is well despite my lack of intelligence. Nice job on the tabs, by the way.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

Julie,

 

Just as you said I made a file called it extraheader.php which contained the whole script and put it in the 'catalog/includes' folder and I inserted the call in the header.php and I put the pics(which I borrowed from you) in the images folder.

 

I have not a thing from the new navbar showing in the store, I deleted the whole store and reinstalled the whole store and redid the navbar again, still no joy, I am perl person and do not have much experience with .php, but following the code it seems that all is perfect and logical, maybe I am missing something , did you encounter this kind of problem at first!? there is no error, nothing, it's just like nothing has been done on the cart.

 

At the moment I am building a cart http://4xact.com/ for a lingerie shop which is based on clickcartPro and it's a very nice and versatile cart to work with and it's written in perl with open source.

You can check it out but be warned! some of it's pages may have necked women which maybe offending to some people.

 

Regards,

 

Joey.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...