Catagory Products Help

[Guest eavenue]

Hey Guys,

You've been SO much help to date. I was able to get our company site where it is now because of the help. So... THANKS!

But I have some problems: Where do I find the page/area to edit to change the look of the products box displayed when you open each catagory. Check my site on this exact page and you'll see.

http://www.eavenueonline.com/shopping/inde...at&catId=77

See where the "24" DVD's are listed? The heading box where is says "Image" "Description" "Price" is a kind of a grayish-green. I'd like to be able to change that to match the rest of the green title boxes. Looked everywhere but couldn't find it.

And... if you look at our company logo at the top you'll see it's kinda pushed too much to the left. I want it to be left-aligned, but not that much. I played with the header margin, padding, etc., but just got things out of whack.

Also... I know this has been covered a million times, but I couldn't find anything directly related to the Legend skin: I want the logo to be clickable. I followed some advice in the pinned posts and was able to add the code in there, but I still got the box with the purple border saying Store Home. I replaced the image code with our topHeader image, but it didn't look right. So how can I achieve this using the Legend skin and get rid of that purple border and box with the "X" in it meaning no image?

Thanks a lot. And sorry to be a pain with the logo problem. But I did search and just didn't see it for Legend. So if I missed it, then my apologizes (and embarrassment!)

Also, any recommendations to make it look better?

Thanks!!!

[burgensteen]

For the box color, open skins/legend/stylesheets/style.css

look for tdListTitle (line 177) and change background color.

You got some serious issues with the tophead image (check firefox)

Burgensteen

[Guest eavenue]

For the box color, open skins/legend/stylesheets/style.css

look for tdListTitle (line 177) and change background color.

You got some serious issues with the tophead image (check firefox)

Burgensteen

Thanks!

Got that part taken care of and am working on the Firefox issue in another post. Do you have any ideas on the clickable logo? I searched again and just couldn't find anything for the Legend skin. Sorry to be a pain.

Thanks!!

[Guest offthehook]

For the box color, open skins/legend/stylesheets/style.css

look for tdListTitle (line 177) and change background color.

You got some serious issues with the tophead image (check firefox)

Burgensteen

Thanks!

Got that part taken care of and am working on the Firefox issue in another post. Do you have any ideas on the clickable logo? I searched again and just couldn't find anything for the Legend skin. Sorry to be a pain.

Thanks!!

You've got your header as a background image in the css class of the topHeader div.

The easy way of getting a header image to be clickable is to remove the background image declaration from the stylesheet and add the image directly into the html code on the index.tpl and cart.tpl files.

Something along the lines of:

<a href="www.eavenue.com/shopping/index.php"><img src="/skins/YOURSKIN/styleImages/YOURIMAGE.gif" alt="Click to go home" style="float:left"  /></a>

Will suffice for that.



Next you will need to find the div that follows this header div (it contains the 3 columns below) and add the following to the html code:

style="clear:both"

So that the HTML reads:

<div style="clear:both">

What we have done is to add an image, a link for the image and float the image in the header to the left to allow the div which contains the form with the search box inside it to wrap to the right of it. We have then added a clear declaration to the following div so that it ignores the float and displays as we wish it to.

The code is a bit rough and ready, and hopefully once you understand what you are doing you can clean it up a little.

There is a way of making a background css image display a link as well as change on rollover and display an alt tag to comply with accessibility but thats a little complicated for you I think and the method above is pretty standard.

[Guest eavenue]

Thanks for the help.

I'm working on it; this is what my index.tpl looks like now (this is how it came loaded; haven't changed anything except when I added the code temporarily):

<!-- BEGIN: body -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset={VAL_ISO}" />

<title>{META_TITLE}</title>

<meta name="description" content="{META_DESC}" />

<meta name="keywords" content="{META_KEYWORDS}" />



<link href="skins/{VAL_SKIN}/styleSheets/layout.css" rel="stylesheet" type="text/css" />

<link href="skins/{VAL_SKIN}/styleSheets/style.css" rel="stylesheet" type="text/css" />

<script language="javascript" src="js/jslibrary.js" type="text/javascript"></script>

</head>



<body>

<div id="pageSurround">

	

	<div id="subSurround">

	

		<div id="topHeader">



			<div style="padding-top: 70px;">{SEARCH_FORM}</div>

			<div>{SESSION}</div>

		</div>

		

		<div>

		

		<div class="colLeft">

		{CATEGORIES}

		{RANDOM_PROD}		

		{INFORMATION}	

		{CURRENCY}

		{LANGUAGE}

		</div>

		

		<div class="colMid">

		{PAGE_CONTENT}

		</div>

		

		<div class="colRight">

			{SHOPPING_CART}

			{POPULAR_PRODUCTS}

			{SALE_ITEMS}

			{MAIL_LIST}

		</div>

	

	</div>

	

	<br clear="all" />

	

	{SITE_DOCS}

	

	</div>



</div>

</body>

</html>

<!-- END: body -->

I added your code under:  <div id="topHeader">

<a href="www.eavenueonline.com/shopping/index.php"><img src="/skins/legend/styleImages/topHeader.gif" alt="Home" style="float:left"  /></a>

There were some issues: I checked and it added the box, but not the logo, even though it directed to the correct location of the image. The other is that when I click what's there (the blank box surrounded by the blue border), it goes to a blank page. I checked the url redirection and it's doubled... looks like this: eavenueonline.com/shopping/index.php eavenueonline.com/shopping/index.php



Also, you said:

Next you will need to find the div that follows this header div (it contains the 3 columns below) and add the following to the html code, so that the HTML code reads:

I can understand HTML a little, and I understood what you meant... and it makes perfect sense to me. But I just didn't see where to add this. And I couldn't figure out why it wasn't directing back to the correct url.

Thanks for helping out, I appreciate it!

<div style="clear:both">

I didn't see exactly where to put this. I looked for the div that folows the header, but didn't see, unless it goes where the div is under

<div>{SESSION}</div>