Guest ali_yk6 Posted November 9, 2010 Share Posted November 9, 2010 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 Quote Link to comment Share on other sites More sharing options...
leeofaccy Posted November 10, 2010 Share Posted November 10, 2010 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. Quote Link to comment Share on other sites More sharing options...
Guest Mithun Singh Posted December 14, 2010 Share Posted December 14, 2010 The post is an informative one.... This technique is good for SEO... Thanks Quote Link to comment Share on other sites More sharing options...
KylieJ Posted December 25, 2010 Share Posted December 25, 2010 ...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 Quote Link to comment Share on other sites More sharing options...
Guest rowlandsmusic Posted January 2, 2011 Share Posted January 2, 2011 This is a really good technique. Thanks very much Leeofaccy, works a treat! Quote Link to comment Share on other sites More sharing options...
Guest FoxtrotOscar Posted January 8, 2011 Share Posted January 8, 2011 ...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 Quote Link to comment Share on other sites More sharing options...
leeofaccy Posted January 9, 2011 Share Posted January 9, 2011 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 Quote Link to comment Share on other sites More sharing options...
Guest FoxtrotOscar Posted January 11, 2011 Share Posted January 11, 2011 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 Quote Link to comment Share on other sites More sharing options...
Guest ali_yk6 Posted January 17, 2011 Share Posted January 17, 2011 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... Quote Link to comment Share on other sites More sharing options...
Guest vpinc Posted August 1, 2011 Share Posted August 1, 2011 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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted August 1, 2011 Share Posted August 1, 2011 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> Quote Link to comment Share on other sites More sharing options...
leeofaccy Posted August 1, 2011 Share Posted August 1, 2011 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.