Jump to content

OOPS! Help with creating a Clickable Logo

Guest JeannieM

By Guest JeannieM
in Customising Look & Feel

 Share

Recommended Posts

Guest JeannieM

Guest JeannieM

Posted
Posted

I've been trying to follow the directions given elsewhere in this forum to create a Clickable Logo and now I have TWO Logos, and neither one is Clickable! So rather than make this worse, I thought I'd come here for some expert advice. (Actually, I did have the clickable part done at one point, but it wasn't positioned correctly over the Logo.)

This is what I've got.

****** /skins/KitaBlue/styleTemplates/global/index.tpl

<body onload="initialiseMenu();{EXTRA_EVENTS}">

<div id="topHeader">

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

<div>{SEARCH_FORM}</div>

</div> <div>{SITE_DOCS}</div>

<div id="pageSurround">

<div id="topHeader">

****** In /skins/KitaBlue/styleTemplates/global/cart.tpl

<body onload="initialiseMenu();">

<div id="topHeader">

<div>{SEARCH_FORM}</div>

</div>

<div>{SITE_DOCS}</div>

<div id="pageSurround">

<div>

****** In /skins/KitaBlue/styleSheets/layout.css

.topHeaderImg {

float: center;

margin-top: -68px;

width: 756px;

height: 116px;

outline: none;

}

Can you help me please? Thanks so much. Jeannie

Oh yeah, my URL is http://RedSunJewelry.com

:whistle:

Link to comment
Share on other sites

leeofaccy Newbie

leeofaccy

Posted
Posted

Hi Jeannie

The reason the logo is showing twice is because you have got 2 <div id="topHeader"> in your code. You need to remove the second one (Inside pageSurround), but the closing div (</div>), for it is after the closing table tag (</table>).

If your logo was still to the left, a float:left style added to the topHeaderImg class style would have worked to make the logo clickable. Beacuse your logo is now centred, you would need to create a div that 'floats' with the logo, if the page is made smaller. i.e putting a margin-left would always keep the 'clickable' bit xx amount of pixels away from the left, where as the logo would always be in the centre.

Lee

Link to comment
Share on other sites
Guest JeannieM

Guest JeannieM

Posted
Posted

Hi Jeannie

The reason the logo is showing twice is because you have got 2 <div id="topHeader"> in your code. You need to remove the second one (Inside pageSurround), but the closing div (</div>), for it is after the closing table tag (</table>).

If your logo was still to the left, a float:left style added to the topHeaderImg class style would have worked to make the logo clickable. Beacuse your logo is now centred, you would need to create a div that 'floats' with the logo, if the page is made smaller. i.e putting a margin-left would always keep the 'clickable' bit xx amount of pixels away from the left, where as the logo would always be in the centre.

Lee

Lee,

Great advice! I managed to remove the extra logo.

Now, I understand what you are saying about creating a div that 'floats', but I don't know exactly how do do that. Can you help?:innocent:

Anyone?

Thanks so much,

Jeannie

Link to comment
Share on other sites
Guest JeannieM

Guest JeannieM

Posted
Posted

Here is an update on what I've got now. My logo is still centered, but there is still no sign of it being clickable.

in /styleSheets/layout.css

.topHeaderImg {

float:center;

margin-top: 125px;

width: 756px;

height: 116px;

outline: none;

}

in /styleTemplates/global/cart.tpl

<body onload="initialiseMenu();">

<div>{SEARCH_FORM}</div>

</div>

<div>{SITE_DOCS}</div>

<div id="pageSurround">

<div id="topHeader">

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

<div>

in /styleTemplates/global/index/tpl

<body onload="initialiseMenu();">

<div>{SEARCH_FORM}</div>

</div>

<div>{SITE_DOCS}</div>

<div id="pageSurround">

<div id="topHeader">

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

<div>

This was all from following advice on this forum, but something is missing I guess. Not clickable.

Thanks

Link to comment
Share on other sites
  • 1 month later...
Guest

Guest

Posted
Posted

Here is an update on what I've got now. My logo is still centered, but there is still no sign of it being clickable.

in /styleSheets/layout.css

.topHeaderImg {

float:center;

margin-top: 125px;

width: 756px;

height: 116px;

outline: none;

}

in /styleTemplates/global/cart.tpl

<body onload="initialiseMenu();">

<div>{SEARCH_FORM}</div>

</div>

<div>{SITE_DOCS}</div>

<div id="pageSurround">

<div id="topHeader">

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

<div>

in /styleTemplates/global/index/tpl

<body onload="initialiseMenu();">

<div>{SEARCH_FORM}</div>

</div>

<div>{SITE_DOCS}</div>

<div id="pageSurround">

<div id="topHeader">

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

<div>

This was all from following advice on this forum, but something is missing I guess. Not clickable.

Thanks

Jeannie, try this:


<div id="topHeader">

    <div class="logo"><br />

<a href="/index.php"><img src="skins/{VAL_SKIN}/YOURSKIN/logo/logo.jpg" alt="YOUR STORE NAME" /></a>

</div><!--end logo-->

</div><!--endTopHeader-->

Where: YOURSKIN is replaced by your skin name, assuming that is the location of your logo. and the bits inbetween <!-- --> are comments to help you with the code.

Just to add, in your stylesheet:

'float:center' is not a valid CSS control. Floats are either left, or right.

I suspect your image is centered because pageSurround has something like:

width:990px;

margin:0px auto;

in the stylesheet, and that is what is centering the whole site to the centre.

Link to comment
Share on other sites
Guest JeannieM

Guest JeannieM

Posted
Posted

Here is an update on what I've got now. My logo is still centered, but there is still no sign of it being clickable.

in /styleSheets/layout.css

.topHeaderImg {

float:center;

margin-top: 125px;

width: 756px;

height: 116px;

outline: none;

}

in /styleTemplates/global/cart.tpl

<body onload="initialiseMenu();">

<div>{SEARCH_FORM}</div>

</div>

<div>{SITE_DOCS}</div>

<div id="pageSurround">

<div id="topHeader">

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

<div>

in /styleTemplates/global/index/tpl

<body onload="initialiseMenu();">

<div>{SEARCH_FORM}</div>

</div>

<div>{SITE_DOCS}</div>

<div id="pageSurround">

<div id="topHeader">

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

<div>

This was all from following advice on this forum, but something is missing I guess. Not clickable.

Thanks

Jeannie, try this:


<div id="topHeader">

    <div class="logo"><br />

<a href="/index.php"><img src="skins/{VAL_SKIN}/YOURSKIN/logo/logo.jpg" alt="YOUR STORE NAME" /></a>

</div><!--end logo-->

</div><!--endTopHeader-->

Where: YOURSKIN is replaced by your skin name, assuming that is the location of your logo. and the bits inbetween <!-- --> are comments to help you with the code.

Just to add, in your stylesheet:

'float:center' is not a valid CSS control. Floats are either left, or right.

I suspect your image is centered because pageSurround has something like:

width:990px;

margin:0px auto;

in the stylesheet, and that is what is centering the whole site to the centre.

Hi, thanks for your help, but that didn't help. I think I'm just going to live with it as it is, because I've spent way to much time on this detail.

CubeCart really could make a bunch more money if they'd only write a manual for us. A lot of wasted time for a great many of us. I'd pay!

Anyway, could you tell me now how I could get my SEARCH box back to the right side?

Thanks

Link to comment
Share on other sites
Guest JeannieM

Guest JeannieM

Posted
Posted

Here is an update on what I've got now. My logo is still centered, but there is still no sign of it being clickable.

in /styleSheets/layout.css

.topHeaderImg {

float:center;

margin-top: 125px;

width: 756px;

height: 116px;

outline: none;

}

in /styleTemplates/global/cart.tpl

<body onload="initialiseMenu();">

<div>{SEARCH_FORM}</div>

</div>

<div>{SITE_DOCS}</div>

<div id="pageSurround">

<div id="topHeader">

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

<div>

in /styleTemplates/global/index/tpl

<body onload="initialiseMenu();">

<div>{SEARCH_FORM}</div>

</div>

<div>{SITE_DOCS}</div>

<div id="pageSurround">

<div id="topHeader">

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

<div>

This was all from following advice on this forum, but something is missing I guess. Not clickable.

Thanks

Jeannie, try this:


<div id="topHeader">

    <div class="logo"><br />

<a href="/index.php"><img src="skins/{VAL_SKIN}/YOURSKIN/logo/logo.jpg" alt="YOUR STORE NAME" /></a>

</div><!--end logo-->

</div><!--endTopHeader-->

Where: YOURSKIN is replaced by your skin name, assuming that is the location of your logo. and the bits inbetween <!-- --> are comments to help you with the code.

Just to add, in your stylesheet:

'float:center' is not a valid CSS control. Floats are either left, or right.

I suspect your image is centered because pageSurround has something like:

width:990px;

margin:0px auto;

in the stylesheet, and that is what is centering the whole site to the centre.

Hi, thanks for your help, but that didn't help. I think I'm just going to live with it as it is, because I've spent way to much time on this detail.

CubeCart really could make a bunch more money if they'd only write a manual for us. A lot of wasted time for a great many of us. I'd pay!

Anyway, could you tell me now how I could get my SEARCH box back to the right side?

Thanks

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...