48 replies to this topic

[JulieCSM]

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

[burt]

Make them shorter, and wider ?

[JulieCSM]

OK, I redesigned the buttons and have now installed the nav bar on my store proper.

Thoughts?

www.cheapsheetmusic.co.uk

Edited by JulieCSM, 03 November 2003, 14:01.

[tbgo]

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.

[kymation]

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

[jaavi]

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.

[kymation]

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

[JulieCSM]

kymation, on Nov 4 2003, 03:30 AM, said:

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.

[crash3903]

Hi Julie

I like the design

However when i go to look at the url http://www.cheapsheetmusic.co.uk the page is not loading i guess it may be due to you doing some work on the server??

Just so you know

but nice looking site

regards

mark

[JulieCSM]

^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.

Edited by JulieCSM, 04 November 2003, 10:08.

[crash3903]

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

Their website/email/servers all gone!!

They are frantically trying to resolve it as we speak!

Thats that sorted then

mark

[JulieCSM]

^Yikes - so we can't take any payments???

That's just great!

[crash3903]

yes tell me about it!

[JulieCSM]

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!

[JulieCSM]

tbgo, on Nov 3 2003, 04:59 PM, said:

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.

[JulieCSM]

jaavi, on Nov 4 2003, 01:49 AM, said:

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) &amp;&amp; (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.

[kymation]

Quote

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

[JulieCSM]

kymation, on Nov 4 2003, 04:38 PM, said:

Quote

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.

[jaavi]

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.

[jaavi]

Also a very big thanks to Matt aka iiinetworks

Joey.