Linking My Logo Banner To My Home Page

[alexwoolfson]

I've been searching around for the answer to this for a little while, but I'm having no luck on specifics. I want to make my Logo Banner clickable so that it links to the Home Page.

I understand that because it's a "background image" that this isn't straight-forward. I've read in threads here on this forum that there might be a way to do it with a transparent gif or perhaps with some CSS trickery, but I haven't been able to find specific instructions. (I'm not sure how to set up and use a transparent gif for example.)

I just want the whole banner to link to the home page -- no hot spots required. Can anyone point me to the specific steps I'd need to do to make this happen?

Any help would be greatly appreciated. Thanks!

Alex

[-Steve-]

link to view the problem (and image) might help

[alexwoolfson]

Oh, OK. My store really isn't ready for Prime Time -- still working on it -- and some might find it Not Safe For Work, but the link is

https://store.yaoi911.com/

You can see my Logo Banner at the top. I want it to link to my Home Page.

Thank you for your reply,

Alex

[alexwoolfson]

I've searched the web and google and have found a lot of different possible ways to fix this problem like

Better yet, for proper, semantic markup, don't put the background image on the header div - have an anchor inside with the header text, set it to display block, and put the background image to -that- instead.

but I'm afraid that so far, it's a bit over my head. Surely, other people here have made their banner-logo clickable.

Would it be possible for someone to walk me through the process?

Thanks!

Alex

[alexwoolfson]

OK. After a bit more Google research, I got this to work. For the benefit of others, here is the step by step.

1) Copy tpl_header.php which is located under includes > templates > template_default > common to includes > templates > your_template_name > common

2) In that file find

<div id="logoWrapper">

and add this line after it (changing the URL and name to what you'd like to link to, of course)

<a href="http://www.example.com"><span>The Example.com Store Logo</span></a>

3) Save the file to your server. On your store web page, you should now see the text link you created over your logo banner as a hyperlink.

4) Open your stylesheet.css folder where you added your logo.jpg (which should be living in the includes > templates > your_template_name > css folder)

5) Add "position: relative;" to #logoWrapper like so

 #logoWrapper {
 width:790px; /* the width and height of YOUR logo here */
 height:100px;
background-image:url(http://www.example.com/images/Store-BannerLogo.jpg);
 background-repeat:no-repeat;
 position: relative; /* Add this line which will make the absolute position of the next bit of CSS based off of the edge of your logo, not the entire page */
 }

6) Add these next two sections of CSS undeneath it

 #logoWrapper a {
    position: absolute;
    top: 0;
    left: 0;
    width: 790px;  /* the same width and height as your logo here! */
    height: 100px;
}

#logoWrapper a span {
    display: none;   /*this makes the link text invisible, but it will be visible if the viewer's browser ignores CSS.  Good for accessibility. */
}

7) Save the edited CSS file to your server and you're DONE!

Now your logo will be a clickable link that degrades well if CSS is disabled in the shopper's browser. Since clickable logos that link to the home page are becoming more and more common and expected, this is a good thing.

So -- this worked for me. Any problems with it that anyone sees?

[alexwoolfson]

I noticed that while the CSS method I outlined above worked well in Firefox (and I think even IE7), that in Safari, it showed an annoying little missing-image-question-mark over my logo. So I set out to try the transparent GIF method.

Here is how you use a transparent GIF to create a clickable logo that links to your home page.

STEP 1:

In Photoshop, create a new file with a transparent background that is the exact size of your logo. Use Save For Web & Devices under the file menu to save it as a GIF file. (I named my file Transparent_Logo_GIF.gif.)

STEP 2:

Upload that file to your FTP server. Create a new folder for it if you like. I uploaded mine to /images/homepage

STEP 3:

1) Copy tpl_header.php which is located under /includes/templates/template_default/common to includes/templates/your_template_name/common

2) In that file find (around line 71)

<!--bof-branding display-->
<div id="logoWrapper">

and add right after it

<a href="/"><img src="/images/homepage/Transparent_Logo_GIF.gif" alt="Your Store's Name Logo" /></a>

(changing the GIF's filename and filepath to whatever you used, of course...)

You'll notice in the very next line there's this line

<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'

which would seem to promise a clickable link to your homepage. But in my install it didn't work like that and in fact, again just showed up as a stray link that cluttered my logo. So I removed it via CSS like this:

STEP 4:

Open /includes/templates/your_template_name/css/stylesheet.css and add this line which will make that link invisible.

 #logo a {
 display:none;
 }

(I suppose I could have just deleted it from tpl_header.php, but I wasn't sure if it might serve other purposes and removing it via CSS was fast and easy.)

Anyway, while both ways work, using this transparent GIF is the method I wound up going with as it seems to work and look good in all the browsers I've tested.

Hopefully this will be helpful for someone else.

[justyl]

I tried this, and it worked great. However, it compromised my SSL certificate in Internet Explorer. The site was not showing locked when ordering from that browser. However, it did show when using Firefox. Is there any way around this, because I couldn't get the first way to work at all? Thanks.

[alexwoolfson]

justyl,

When you say "it compromised my SSL certificate in Internet Explorer. The site was not showing locked", are you saying you got a "some items on this page are insecure" warning pop-up? Is this happening on all pages or just your secure checkout?

Are all the links you created -- both to the image and to your home page -- using https: and not http?

Try changing this line:

<a href="/"><img src="/images/homepage/Transparent_Logo_GIF.gif" alt="Your Store's Name Logo" /></a>

to this line

<a href="https://www.example.com/"><img src="https:/www.example.com/images/homepage/Transparent_Logo_GIF.gif" alt="Your Store's Name Logo" /></a>

Substituting your own site name and image location, of course...

Let me know if that fixes it.

[justyl]

It worked! Thanks so much. I added the S only to the transparent gif though. Thanks, again.

[alexwoolfson]

That's great news. Thanks for letting me know it worked.