Redirect Logo to Hompage (Link)

[Guest ali_yk6]

Hey,

I've seen many threads regarding this topic, but none of them actually worked when i tried them. my domain is http://www.wholesalecomputer.ca and i'm trying to make my Logo on the top left so that when someone clicks it, it takes them to Homepage rather than clicking the tiny word on top of the categories. I don't know why Cubecart doesn't give you that option even though it's pretty common throughout the websites. I don't know much PHP, i have some knowledge of HTML and have dreamweaver CS3 installed to edit my scripts.

Which file do i have to alter and what is to be done in order for this to work out.

Thanks

[leeofaccy]

Hi

It's pretty straight forward to do. I found the best way is to create a link, and style it using a new style (.topHeaderImg), to the same size as your logo. You could of course write the style straight into it.

Open skins / classic / styleTemplates / global and open both cart.tpl and index.tpl. Find this....

<div id="pageSurround">

	<div id="topHeader">

Edit the code, adding <a class="topHeaderImg" href="index.php"></a> like so ON THEM BOTH

<div id="pageSurround"><a class="topHeaderImg" href="index.php"></a>

	<div id="topHeader">

Open your layout.css stylesheet. Copy the following style and add it to your stylesheet.

.topHeaderImg {

	float: left;

	width: 200px;

	height: 60px;

	outline: none;

}

Your 'logo' should now link back to your homepage. You can change the width & height values on the stylesheet to 'accomodate' the size of your logo. These should be ok for your store ali_yk6.

Lee

Ps I have tested this on Firefox, Opera, Safari, Chrome & IE8 and it works, but not on IE7 (And probably 6, not tested), but then again when does IE ever do anything every other browser manages without any problem!?

Note: This post is for this particular website. Some small adjustments may be needed for it to work on your own. If you need any help, PM me.

[Guest Mithun Singh]

The post is an informative one.... This technique is good for SEO... Thanks

[KylieJ]

...Note: This post is for this particular website. Some small adjustments may be needed for it to work on your own. If you need any help, PM me.

Lee

Thanks for help in adjusting this for KitaBlue:) It is great

Kylie

[Guest rowlandsmusic]

This is a really good technique. Thanks very much Leeofaccy, works a treat!

[Guest FoxtrotOscar]

...Note: This post is for this particular website. Some small adjustments may be needed for it to work on your own. If you need any help, PM me.

Lee

Thanks for help in adjusting this for KitaBlue:) It is great

Kylie

Is there anychance you could post the adjustments you made for the Kita Blue skin?

I tried to modify the steps above myself but I couldn't get the clickable area into the right position over my logo.

Thanks

[leeofaccy]

Hi

Yes, no problem.....Try this. Add the 'a class' after the topHeader id, like so

<div id="topHeader">

<a class="topHeaderImg" href="index.php"></a>

Add the following style to your layout.css

.topHeaderImg {

        float: left;

        margin-top: -68px;

        width: 300px;

        height: 110px;

        outline: none;

}

You may need to adjust the height and/or width on the style to fit your logo if it is bigger/smaller than the default.

Lee

[Guest FoxtrotOscar]

Hi

Yes, no problem.....Try this. Add the 'a class' after the topHeader id, like so

<div id="topHeader">

<a class="topHeaderImg" href="index.php"></a>

Add the following style to your layout.css

.topHeaderImg {

        float: left;

        margin-top: -68px;

        width: 300px;

        height: 110px;

        outline: none;

}

You may need to adjust the height and/or width on the style to fit your logo if it is bigger/smaller than the default.

Lee

Thanks Lee, thats perfect.

Regards

T

[Guest ali_yk6]

Hi

It's pretty straight forward to do. I found the best way is to create a link, and style it using a new style (.topHeaderImg), to the same size as your logo. You could of course write the style straight into it.

Open skins / classic / styleTemplates / global and open both cart.tpl and index.tpl. Find this....

<div id="pageSurround">

	<div id="topHeader">

Edit the code, adding <a class="topHeaderImg" href="index.php"></a> like so ON THEM BOTH

<div id="pageSurround"><a class="topHeaderImg" href="index.php"></a>

	<div id="topHeader">

Open your layout.css stylesheet. Copy the following style and add it to your stylesheet.

.topHeaderImg {

	float: left;

	width: 200px;

	height: 60px;

	outline: none;

}

Your 'logo' should now link back to your homepage. You can change the width & height values on the stylesheet to 'accomodate' the size of your logo. These should be ok for your store ali_yk6.

Lee

Ps I have tested this on Firefox, Opera, Safari, Chrome & IE8 and it works, but not on IE7 (And probably 6, not tested), but then again when does IE ever do anything every other browser manages without any problem!?

Note: This post is for this particular website. Some small adjustments may be needed for it to work on your own. If you need any help, PM me.

Sorry for the late reply, but Thank You very much, this worked pretty good for me.

Appreciate it...

[Guest vpinc]

Hi, My site isn't accepting this code obviously because it is for a specific web site. How do I make it work on mine? www.violetpatch.com

Hi

It's pretty straight forward to do. I found the best way is to create a link, and style it using a new style (.topHeaderImg), to the same size as your logo. You could of course write the style straight into it.

Open skins / classic / styleTemplates / global and open both cart.tpl and index.tpl. Find this....

<div id="pageSurround">

	<div id="topHeader">

Edit the code, adding <a class="topHeaderImg" href="index.php"></a> like so ON THEM BOTH

<div id="pageSurround"><a class="topHeaderImg" href="index.php"></a>

	<div id="topHeader">

Open your layout.css stylesheet. Copy the following style and add it to your stylesheet.

.topHeaderImg {

	float: left;

	width: 200px;

	height: 60px;

	outline: none;

}

Your 'logo' should now link back to your homepage. You can change the width & height values on the stylesheet to 'accomodate' the size of your logo. These should be ok for your store ali_yk6.

Lee

Ps I have tested this on Firefox, Opera, Safari, Chrome & IE8 and it works, but not on IE7 (And probably 6, not tested), but then again when does IE ever do anything every other browser manages without any problem!?

Note: This post is for this particular website. Some small adjustments may be needed for it to work on your own. If you need any help, PM me.

[bsmither]

You've changed up your skin a bit by moving the topHeader block outside of the pageSurround block. So your solution is going to be a bit different.

After the statement:

<div id="topHeader">

Add:

<a href="store home address"><div style="position:absolute; top:10px; left:50px; width:325px; height:95px;"></div></a>

[leeofaccy]

Open skins / your_skin / styleTemplates / global and open both cart.tpl and index.tpl. Find this....

<div id="topHeader">

Paste the link after, like so....

<div id="topHeader"><a href="index.php" class="topHeaderImg"></a>

Add this style your layout.css stylesheet...

.topHeaderImg {

    float: left;

    height: 95px;

    margin: -60px 0 0 10px;

    width: 325px;

}

Lee