Jump to content

Linking Logo...

Guest AdamnSmith

By Guest AdamnSmith
in Customising Look & Feel

 Share

Recommended Posts

Guest AdamnSmith

Guest AdamnSmith

Posted
Posted

Okay, i have been working on this off and on for 2 months... I have tried every thread related to this and it seems when ever someone posts the same problem as me at the bottom of the thread - no one comes back and helps... So [l Please help to the end.

#topHeader {

	text-align: right;

	height: 75px;

	background-image: url(../styleImages/backgrounds/topHeader.gif);

	background-repeat: no-repeat;

}

#sessionBox {

	text-align: left;

	width: 236px;

	height: 96px;

	float: right;

}






and





<body>

<div id="pageSurround">



	

		<div id="topHeader">



			<div id="sessionBox">

				<div style="padding: 15px 8px 15px 15px; margin: 0px;">

				{SEARCH_FORM}

				{SESSION}

				</div>

			</div>

		</div>

			 <div class="topCats">

		   </div>

Please dont refer me to another thread. I have done those and they simply do not work.

the closest I got it was linking the logo HOWEVER the entire SESSION BOX falls down below the topCats bar.

Link to comment
Share on other sites

Robsta Newbie

Robsta

Posted
Posted

You can't do it through using a CSS image. You need to insert the image into the template...

Add the image...

<img src="path_to_image.jpg"/>




Add the link around the image...



<a href="url_path.html"><img src="path_to_image.jpg"/></a>




Then ensure the image doesn't show a border, add border="0":



<a href="url_path.html"><img src="path_to_image.jpg" style="border:0;"/></a>

To find this information, just google for 'HTML image link', it's not unique to CubeCart.

Link to comment
Share on other sites
bsmither Mentor

bsmither

Posted
Posted

Try this:

layout.css:

#topHeader {

	text-align: right;

	height: 110px; /* Probably should make this taller or equal to sessionBox height */

	background-image: url(../styleImages/backgrounds/topHeader.gif);

	background-repeat: no-repeat;

}

#topLinkerBox {

	width: 236px;

	height: 110px;

	border: solid black 1px;

	float: left;

}

#sessionBox {

	text-align: left;

	background-image: url(../styleImages/backgrounds/sessionBg.gif);

	width: 236px;

	height: 96px;

	float: right;

}




index.tpl:



<div id="topHeader">

<a href="http://www.cubecart.com"><div id="topLinkerBox"></div></a>

<div id="sessionBox">

The width and height of the topLinkerBox should match the width and height of the background image "topHeader.gif". If it works, comment out the border line by wrapping it within /**/.

Link to comment
Share on other sites
Guest AdamnSmith

Guest AdamnSmith

Posted
Posted

Awesome. Thank you. This worked out perfectly. I REAAALLLY appreciate it. I have been struggling for a long time. I had done the steps from the other threads about 50 times.. heh.. THANKSSSS!!!!!

Link to comment
Share on other sites
  • 2 weeks later...
Guest

Guest

Posted
Posted

Try this:

layout.css:

#topHeader {

	text-align: right;

	height: 110px; /* Probably should make this taller or equal to sessionBox height */

	background-image: url(../styleImages/backgrounds/topHeader.gif);

	background-repeat: no-repeat;

}

#topLinkerBox {

	width: 236px;

	height: 110px;

	border: solid black 1px;

	float: left;

}

#sessionBox {

	text-align: left;

	background-image: url(../styleImages/backgrounds/sessionBg.gif);

	width: 236px;

	height: 96px;

	float: right;

}




index.tpl:



<div id="topHeader">

<a href="http://www.cubecart.com"><div id="topLinkerBox"></div></a>

<div id="sessionBox">




The width and height of the topLinkerBox should match the width and height of the background image "topHeader.gif". If it works, comment out the border line by wrapping it within /**/.
Try this: layout.css:

The width and height of the topLinkerBox should match the width and height of the background image "topHeader.gif". If it works, comment out the border line by wrapping it within /**/.

#topHeader {

	text-align: right;

	height: 110px; /* Probably should make this taller or equal to sessionBox height */

	background-image: url(../styleImages/backgrounds/topHeader.gif);

	background-repeat: no-repeat;

}

#topLinkerBox {

	width: 236px;

	height: 110px;

	border: solid black 1px;

	float: left;

}

#sessionBox {

	text-align: left;

	background-image: url(../styleImages/backgrounds/sessionBg.gif);

	width: 236px;

	height: 96px;

	float: right;

}




index.tpl:



<div id="topHeader">

<a href="http://www.cubecart.com"><div id="topLinkerBox"></div></a>

<div id="sessionBox">

Cool Thanks....

What specifically do I need to wrap to get rid of the border?

Link to comment
Share on other sites
  • 4 months later...
  • 7 months later...
Guest

Guest

Posted
Posted

I've been trying to figure this out! This worked like charm! (sigh of relief...) Thanks!!! :yeahhh:

Sorry to bump an old thread folks.

I've just followed through this, and it works - to a point. My logo is centered on my site, so I replaced the "float: left;" in the layout.css for "margin: auto;" which worked a treat for lining the box up with the topHeader.gif image. However it seems that the link is the full width of the screen, not the width of the box. This was the case even before I made the change. Anyone have any ideas why this might be happening? I'm a n00b when it comes to CSS btw.

Link to comment
Share on other sites
  • 2 weeks later...
Guest

Guest

Posted
Posted

What is your complete #topLinkerBox selector?

Make sure

width: 200px; /* or whatever you need */

is still there.

Thanks for the reply.

Where are you suggesting to put that? There is already a width set in the layout.css #topLinkerBox

Link to comment
Share on other sites
Guest

Guest

Posted
Posted

OK, so width is still an element of the #topLinkerBox selector. I had asked what is the complete selector, that is, what else, including width, do you have for #topLinkerBox?

Sorry, I must have missed the 'still' ;)

#topLinkerBox {

width: 500px;

height: 80px;

/* border: solid black 1px; */

margin: auto

}

The site is www.legionenterprises.co.nz

When the border was on it outlined the header image nicely.

Link to comment
Share on other sites
bsmither Mentor

bsmither

Posted
Posted

OK, we need to constrain #topHeader...

#topHeader {

background-image:url(../styleImages/backgrounds/topHeader.gif);

background-position:center;

background-repeat:no-repeat;

height:100px;

margin-left:auto;

margin-right:auto;

width:500px; /*make same as topLinkerBox width or wider */

}

Link to comment
Share on other sites
Guest

Guest

Posted
Posted

OK, we need to constrain #topHeader...

#topHeader {

background-image:url(../styleImages/backgrounds/topHeader.gif);

background-position:center;

background-repeat:no-repeat;

height:100px;

margin-left:auto;

margin-right:auto;

width:500px; /*make same as topLinkerBox width or wider */

}

Good work, that has done the trick perfectly. Thanks for your help, it's much appreciated!

Link to comment
Share on other sites
  • 6 months later...
Guest Planet28

Guest Planet28

Posted
Posted

This has been really helpful--but I have added an image with linked hotspots--but now there is a missing image box over the active image. Can someone help me find this error in my code?

Here's the page: http://www.planetsoulinc.com/planetstore/index.php

(nevermind that the rest of the page is a disaster...one thing at a time)

Here's my code in Index.tpl:

<div id="topHeader">

<img name="topnavhot" src="topnavhot.jpg" width="900" height="150" border="0" usemap="#m_topnavhot" alt=""><map name="m_topnavhot">

<area shape="rect" coords="40,13,140,136" href="http://www.planetsoulinc.com/main.html" target="_parent" title="Planet Soul Inc" alt="Planet Soul Inc" >

<area shape="rect" coords="805,91,894,127" href="http://www.planetsoulinc.com/offering.html" target="_parent" title="Our Offering" alt="Our Offering" >

<area shape="rect" coords="648,96,755,120" href="http://www.planetsoulinc.com/contact.html" target="_parent" title="Contact Us" alt="Contact Us" >

<area shape="rect" coords="344,95,590,128" href="http://www.planetsoulinc.com/events.html" target="_parent" title="Planet Soul Events" alt="Planet Soul Events" >

<area shape="rect" coords="151,95,288,131" href="http://www.planetsoulinc.com/inspiration.html" target="_parent" title="Be Inspired" alt="Be Inspired" >

</map>

<div id="topLinkerBox"></div></a>

<div id="sessionBox">

<div style="padding: 15px 8px 15px 15px; margin: 0px;">

{SEARCH_FORM}

{SESSION}

</div>

and in layout css:

#topHeader {

text-align: center;

height: 150px;

background-image: url(../styleImages/backgrounds/topnavhot.jpg);

background-repeat: no-repeat;

}

}

#topLinkerBox {

width: 900px;

height: 150px;

border: 0px;

float: left;

Link to comment
Share on other sites
Guest degsey69

Guest degsey69

Posted
Posted 

<img name="topnavhot" src="topnavhot.jpg" width="900" height="150" border="0" usemap="#m_topnavhot" alt=""><map name="m_topnavhot">




Should read





<img name="topnavhot" src="http://www.yourdomamain/imagefolder/topnavhot.jpg" width="900" height="150" border="0" usemap="#m_topnavhot" alt=""><map name="m_topnavhot">

Replace yourdomamain/imagefolder/ with what ever it is.

Link to comment
Share on other sites
Guest Planet28

Guest Planet28

Posted
Posted 

<img name="topnavhot" src="topnavhot.jpg" width="900" height="150" border="0" usemap="#m_topnavhot" alt=""><map name="m_topnavhot">




Should read





<img name="topnavhot" src="http://www.yourdomamain/imagefolder/topnavhot.jpg" width="900" height="150" border="0" usemap="#m_topnavhot" alt=""><map name="m_topnavhot">

Replace yourdomamain/imagefolder/ with what ever it is.

Degsey--Im drawing hearts around your name.

Thank you so much!

Link to comment
Share on other sites
  • 2 years later...
Guest Lovasimedve

Guest Lovasimedve

Posted
Posted

Thank you!

Here the Code for:

layout.css in cubecartskinsKillerstyleSheets

#topHeader {

text-align: right;

height: 100px;

background-image: url(../styleImages/backgrounds/topHeader.gif);

background-repeat: no-repeat;

}

#topLinkerBox {

width: 170px;

height: 87px;

border: solid blue 2px;

cursor: pointer;

float: left;

}

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...