Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Changing the top header....

Changing the top header....

Locked

Views: 1,255

Results 1 to 19 of 19
This thread is locked. New replies are disabled.
18 Jun 2009, 7:57 PM
#1
chrisb1983 avatar

chrisb1983

New Zenner

Join Date:
Jun 2009
Posts:
14
Plugin Contributions:
0

Changing the top header....

Hi,

Looking for a little help from someone. I'm sort of new to this.

My website is https://www.buysmilighttubes.co.uk

On the very top bar I believe it is header.php I am wanting to do the following;

Add a button Contact Us... and for this to link onto osticket the link is

http://buysmilighttubes.co.uk/contact/

I no that EZ pages can add links however that seems to add the link below the logo and the colour of the bar does not really look right on the site.

Thanks in advance

Chris.

18 Jun 2009, 8:07 PM
#2
fairestcape avatar

fairestcape

Totally Zenned

Join Date:
Mar 2008
Location:
Cape Town & London (depends on the season)
Posts:
2,957
Plugin Contributions:
0

Re: Changing the top header....

I wouldn't call that "Contact Us", but rather call it "Open Support Ticket". Your contact us page is a default page in ZC.

Anyway, open the following file:

includes/templates/template_default/common/tpl_header.php

and around line 45 - 47:

    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>

Add this directly below it:

<li><a href="http://buysmilighttubes.co.uk/contact">Open Support Ticket</a></li>

SAVE the edited file to:

includes/templates/cherry_zen/common/tpl_header.php

18 Jun 2009, 8:09 PM
#3
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Changing the top header....

To add a link in the top nav bar you need to find a file called tpl_header.php.

includes - templates - YOUREMPLATE - common.

At the top of the file you will see:

Find the section that reads:

<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

Basically this creates a list which is then formatted into the top nav buttons.

So, you can add another <li></li> pair to the list. Like:

<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
<li>YOUR NEW LINK GOES IN HERE</li>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

You could replace "YOUR NEW LINK GOES HERE" with <a href="http://buysmilighttubes.co.uk/contact/">http://buysmilighttubes.co.uk/contact/</a>

18 Jun 2009, 8:13 PM
#4
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Changing the top header....

Sorry typo:

<a href="http://www.buysmilighttubes.co.uk">www.buysmilighttubes.co.uk</a>

18 Jun 2009, 8:15 PM
#5
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Changing the top header....

Having a bad hair day:

<a href="http://www.buysmilighttubes.co.uk">YOUR LINK TEXT</a>

18 Jun 2009, 8:18 PM
#6
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,808
Plugin Contributions:
15

Re: Changing the top header....

Some invaluable tools for you would be:

  • firefox with the firebug addon. - Let's you find that the info you want to add would go in the navMain id.

  • The developers tool kit in the tools menu of your admin will tell you that the navMain id is in the includes/templates/cherry_zen/tpl_header.php

18 Jun 2009, 8:22 PM
#7
chrisb1983 avatar

chrisb1983

New Zenner

Join Date:
Jun 2009
Posts:
14
Plugin Contributions:
0

Re: Changing the top header....

Thanks for all your help.. Ill take a look at that.

18 Jun 2009, 8:38 PM
#8
chrisb1983 avatar

chrisb1983

New Zenner

Join Date:
Jun 2009
Posts:
14
Plugin Contributions:
0

Re: Changing the top header....

Hi,

Just tried to do this... It works however the problem which I have is it shows the link in a smaller font and black so does'nt fit into my site. Can you advice how to correct this please?

Thanks

18 Jun 2009, 8:52 PM
#9
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Changing the top header....

see the post about firefox/firebug.

It will tell you exactly which css rule is creating that color.

In this case i am guessing that there are <span> tags that are styled around the other links.

The style for it is on line 127 of your stylesheet.

So you need to put <span> tags around your link but inside your <li> tags.

<li><span><a></a></span></li>
18 Jun 2009, 8:54 PM
#10
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Changing the top header....

I am sorry. I am having a bad day! I will stop posting after this and read a book.

The span tags are inside the <a> tags on the others.

<li><a><span></span></a></li>:blush:
18 Jun 2009, 10:04 PM
#11
chrisb1983 avatar

chrisb1983

New Zenner

Join Date:
Jun 2009
Posts:
14
Plugin Contributions:
0

Re: Changing the top header....

Sorry im probally a bit stupid but i tried this

<li><a href="http://buysmilighttubes.co.uk/contact">Contact Us</a></span></li>

It still shows as the same?

Can you give me a little idiots guide by any chance

Thanks

chris

18 Jun 2009, 10:10 PM
#12
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,808
Plugin Contributions:
15

Re: Changing the top header....

chrisb1983:

Sorry im probally a bit stupid but i tried this

<li><a href="http://buysmilighttubes.co.uk/contact">Contact Us</a></span></li>

It still shows as the same?

Can you give me a little idiots guide by any chance

Thanks

chris
Change to:

<li><a href="http://buysmilighttubes.co.uk/contact"><apan>Contact Us</span></a></li>
18 Jun 2009, 10:11 PM
#13
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Changing the top header....

You need

<li><a href="http://buysmilighttubes.co.uk/contact">span>Contact </span>Us</a></li>  

Rather than what you have at the moment which is missing the opening span tag:

<li><a href="http://buysmilighttubes.co.uk/contact">Contact Us</a></span></li>  

And the closing span tag should be inside the <a> tags.

18 Jun 2009, 10:12 PM
#14
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Changing the top header....

OK looking at it again you were editing while I was looking before so I am not sure what you actually had. But the desired code in the previous post is what you are aiming for.

18 Jun 2009, 10:14 PM
#15
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Changing the top header....

Without the deliberate typo of course. ( I must read that book and stop typing!)

<li><a href="http://buysmilighttubes.co.uk/contact"><span>Contact </span>Us</a></li>

I had left out a < before the opening span tag.

18 Jun 2009, 10:30 PM
#16
chrisb1983 avatar

chrisb1983

New Zenner

Join Date:
Jun 2009
Posts:
14
Plugin Contributions:
0

Re: Changing the top header....

Thanks guys for all your help it really is appreciated.

In Internet explorer it removes the checkout field and in firefox it displays all 6 buttons however the checkout button is shown under the rest.

Anyone no how to correct this.. I really need my bed now lol

Chris

18 Jun 2009, 10:38 PM
#17
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,808
Plugin Contributions:
15

Re: Changing the top header....

Line 536 of the stylesheet.css #navMain
The width call is the problem. Remove it and everything will move.

18 Jun 2009, 10:44 PM
#18
niccol avatar

niccol

Totally Zenned

Join Date:
Apr 2009
Posts:
2,138
Plugin Contributions:
1

Re: Changing the top header....

OK. Well I need to sleep soon too. I am looking on firefox at the moment and see the button under the other as you describe.

Your code looks like

<li><a href="http://buysmilighttubes.co.uk/contact">Contact Us</a></span></li>

You need it to look like

<li><a href="http://buysmilighttubes.co.uk/contact"><span>Contact Us</span></a></li>

Sorry for the typos previously. All fingers and thumbs today.

18 Jun 2009, 10:50 PM
#19
chrisb1983 avatar

chrisb1983

New Zenner

Join Date:
Jun 2009
Posts:
14
Plugin Contributions:
0

Re: Changing the top header....

All done, Thanks for your help...

One more days work and I should be able to get the site taking orders!

Thanks again :-)