Buttons as full images

[Guest jpmad4it]

Hey there,

I am trying to get the categories at the top of the Killer stylesheet as full ready-made images. At the moment they are as standard - one image for the left and right and the middle image which repeats along the x axis. What I am trying to achieve is a full image which already has the font included as part of the image. I experimented with the categories.tpl file but I couldn't get it right as the {DATA.cat_name} code caused me problems. I think that this code works out the categories and it just duplicates depending on how many categories you have, therefore whatever image you set for this will just be repeated too. This is a problem as whatever image I put there is duplicated, which I dont want. Does anyone know how I can do this? Or is it not possible due to the way the categories are produced / coded?

Any help would be greeeaaat

regards Jp

[Guest]

Moved to the correct section.

[markscarts]

Well, you have some code like this to create the hot-linked category name:

<a href="index.php?act=viewCat&amp;catId={DATA.cat_id}" class="txtCat">{DATA.cat_name}</a>

You need two major steps: 1) Remove any code that make the tab images in stock Killer skin, 2) replace the category names with images. I would suggest you remove the code for table cells that have the three background images set. If you wish to continue using a table to make the bar and tabs, create a new style class selector named "topCatsTab" (no right, left or middle) and you can set styles for size, padding, placement, etc. but do not set a background image. 



Then, make the replacement images, and name the images with the catId number, e.g., 1.gif, 2.gif, etc. Copy these images to skins/Killer/styleTemplates/boxes/ - note, you can put them anywhere and just code the correct path here, I am just giving you a very simple way to do this that will work regardless of whether you change the skin name, without causing an image pathway problem.



Once you have the images uploaded to your skin's styleTemplates/boxes/ directory, you can code them to show in this manner:

<a href="index.php?act=viewCat&amp;catId={DATA.cat_id}">

<img src="{DATA.cat_id}.gif" alt="{DATA.cat_name}" title={DATA.cat_name}" border="0" /> </a>

This is a simple hack, and will get the job done nicely. If you are proficient in coding, you will see there are several variations as to ways to go about doing this. I would refrain from using that category name as image name, since you may have more than one word with spaces in category name, and this may cause validation errors with the image URI's.

[Guest jpmad4it]

Well, you have some code like this to create the hot-linked category name:

<a href="index.php?act=viewCat&amp;catId={DATA.cat_id}" class="txtCat">{DATA.cat_name}</a>

You need two major steps: 1) Remove any code that make the tab images in stock Killer skin, 2) replace the category names with images. I would suggest you remove the code for table cells that have the three background images set. If you wish to continue using a table to make the bar and tabs, create a new style class selector named "topCatsTab" (no right, left or middle) and you can set styles for size, padding, placement, etc. but do not set a background image. 



Then, make the replacement images, and name the images with the catId number, e.g., 1.gif, 2.gif, etc. Copy these images to skins/Killer/styleTemplates/boxes/ - note, you can put them anywhere and just code the correct path here, I am just giving you a very simple way to do this that will work regardless of whether you change the skin name, without causing an image pathway problem.



Once you have the images uploaded to your skin's styleTemplates/boxes/ directory, you can code them to show in this manner:

<a href="index.php?act=viewCat&amp;catId={DATA.cat_id}">

<img src="{DATA.cat_id}.gif" alt="{DATA.cat_name}" title={DATA.cat_name}" border="0" /> </a>

This is a simple hack, and will get the job done nicely. If you are proficient in coding, you will see there are several variations as to ways to go about doing this. I would refrain from using that category name as image name, since you may have more than one word with spaces in category name, and this may cause validation errors with the image URI's.

hey thats wicked thanks so much

I will have a go at that tomorrow and if I have any problems I will report back here.

Thanks again!!!

[Guest]

Hi I wanted to be able to do this too, but i've had problems as I've been doing a different way by having a graphic menu, but in CSS like what Cribonline has done.

Here's my code from categories.tpl:

<!-- BEGIN: categories -->

			<ul id="main-navigation">

				<li class="home"><a href="index.php" class="{PAGE_INDEX}">Home</a></li>

				<li class="gadgets"><a href="index.php?act=viewCat&catId=1" class="{DATA.gadgets}">Gadgets</a></li>

				<li class="boys-toys"><a href="index.php?act=viewCat&catId=2" class="{DATA.boys-toys}">Boys Toys</a></li>

<!-- END: categories -->

Here's my CSS code for one of the categories:

#main-navigation li.gadgets a {

	width:71px;

	background:url(../styleImages/gadgets.gif) no-repeat 0 0;

	}

Please help as i'm very stuck and none of the images are appearing!

Thanks :)

[Guest jpmad4it]

Ok I am struggling this one markscarts.

My categories.tpl code looks like this at the moment:

<!-- BEGIN: categories -->

<div class="topCats">

		<div class="topCatsBgRight">

		<span class="topCatsBgLeft">&nbsp;</span>

			<table border="0" cellspacing="0" align="center" cellpadding="0">

				  <tr>				

					<td class="topCatsTabLeft">&nbsp;</td>

					<td class="topCatsTabMid"><a href="http://www.test.com" class="txtCat">TEST.COM </a></td>

					<td class="topCatsTabRight">&nbsp;</td>

					

					<td class="topCatsTabLeft">&nbsp;</td>

					<td class="topCatsTabMid"><a href="index.php" class="txtCat">{LANG_HOME}</a></td>

					<td class="topCatsTabRight">&nbsp;</td>

 

					<!-- BEGIN: li -->

					

					<td><a href="index.php?act=viewCat&amp;catId={DATA.cat_id}">

					<img src="{DATA.cat_id}.gif" alt="{DATA.cat_name}" title="{DATA.cat_name}" border="0" /> </a></td>

					

					<!-- END: li -->

					<!-- BEGIN: sale -->

					<td class="topCatsTabLeft">&nbsp;</td>

					<td class="topCatsTabMid"><a href="index.php?act=viewCat&amp;catId=saleItems" class="txtCat">{LANG_SALE_ITEMS}	</a></td>

					<td class="topCatsTabRight">&nbsp;</td>

				<!-- END: sale -->

				</tr>

			</table>

	

		</div>

</div>

<!-- END: categories -->

As you can see your code that I have used is in there, around the middle of the code chunk. I am not very proficient at coding, so please excuse my newbiness! Have I used to code correctly? I tested the site and the categories are being displayed correctly, but the images are not. I tried 2 ways of naming the GIF files as I was not 100% sure what you meant. I named the gif files 1.gif, 2.gif etc and placed them in same folder as the catagories.tpl file, but that didnt work. Then I tried naming the gif files depending on the category number. For example, my music category has an ID of 4, so I tried naming the gif file for that 4.gif - but this didnt work either. Can you spot what I am doing wrong? :)

[Guest jpmad4it]

I manged to fix it, somehow my image links were not correct - once I fixed that the job was done :-)

Thank you so much ;-)

[Guest jpmad4it]

Hmmmmmm how could I put a javascript image rollover effect on the buttons? I've tried all morning but I keep getting the 'object expected' error?

[markscarts]

I manged to fix it, somehow my image links were not correct - once I fixed that the job was done :-)

Thank you so much ;-)

You are welcome

Hmmmmmm how could I put a javascript image rollover effect on the buttons? I've tried all morning but I keep getting the 'object expected' error?

You just have to find what's wrong withy your code. A js rollover effect will work fine if you code it properly.

[Guest jpmad4it]

I manged to fix it, somehow my image links were not correct - once I fixed that the job was done :-)

Thank you so much ;-)

You are welcome

Hmmmmmm how could I put a javascript image rollover effect on the buttons? I've tried all morning but I keep getting the 'object expected' error?

You just have to find what's wrong withy your code. A js rollover effect will work fine if you code it properly.

Well I found out that placing the <!-- BEGIN: categories --> tag and <!-- END: categories --> tag right at the beginning and end of the document got rid of the javascript errors, but the image did not swap on the rollover. I do not know why moving these comments makes a difference.......can anyone explain?

I will post my code here as I cannot find anything wrong with it, maybe someone else can spot something. At first I thought that the problem would be the links to my images, so in the end I just placed a direct link to the images for testing purposes, but still the rollover did not work. Here is my code:

<!-- BEGIN: categories -->

<!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=iso-8859-1" />

<title>Untitled Document</title>

<script type="text/JavaScript">

<!--

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}



function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}



function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

</head>

<body onload="MM_preloadImages('http://www.myexactlinktothecart/upload/skins/Killer/styleTemplates/boxes/12.gif')">

<div class="topCats">

		<div class="topCatsBgRight">

		<span class="topCatsBgLeft">&nbsp;</span>

			<table border="0" cellspacing="0" align="center" cellpadding="0">

				  <tr>				

					<td class="topCatsTabLeft">&nbsp;</td>

					<td class="topCatsTabMid"><a href="http://www.mysite.com" class="txtCat">MYSITE.COM </a></td>

					<td class="topCatsTabRight">&nbsp;</td>

					

					<td class="topCatsTabLeft">&nbsp;</td>

					<td class="topCatsTabMid"><a href="index.php" class="txtCat">{LANG_HOME}</a></td>

					<td class="topCatsTabRight">&nbsp;</td>

 

					<!-- BEGIN: li -->

					

					<td><a href="index.php?act=viewCat&amp;catId={DATA.cat_id}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','http://www.myexactlinktothecart/upload/skins/Killer/styleTemplates/boxes/12.gif',1)">

					<img src="skins/Killer/StyleTemplates/boxes/{DATA.cat_id}.gif" alt="{DATA.cat_name}" title="{DATA.cat_name}"  name="Image1" id="Image1" width="175" height="15" border="0"/> </a></td>

					

					<!-- END: li -->

					<!-- BEGIN: sale -->

					<td class="topCatsTabLeft">&nbsp;</td>

					<td class="topCatsTabMid"><a href="index.php?act=viewCat&amp;catId=saleItems" class="txtCat">{LANG_SALE_ITEMS}	</a></td>

					<td class="topCatsTabRight">&nbsp;</td>

				<!-- END: sale -->

				</tr>

			</table>

	

		</div>

</div>

</body>

</html>

<!-- END: categories -->

[markscarts]

1. "I do not know why moving these comments makes a difference.......can anyone explain?"

These are not simple html comments. <!-- BEGIN: someName --> <!-- END: someName --> are cues in the XTemplate system which determine the areas to be parsed by the php files that drive the templates. This is very important . . . be careful tampering with any of these "comments"

This is one of the two basic things that make these .tpl files rather than .html files The other one is the use of {SOME_NAME} placeholders (these are not "macros").

2. This file is way wrong. It will cause your page to have too many html tags, doctype statements, head sections etc.

{CATEGORIES} placeholder represents this entire block of html on your site pages, see global/index.tpl

global/index.tpl has the doctype declaration, head section, etc. etc. This categories.tpl file is analogous to an HTML SNIPPET, not an entire HTML document.

You must remove all the extraneous crud from this file - you must put the javascript for head section into global/index.tpl

[Guest jpmad4it]

1. "I do not know why moving these comments makes a difference.......can anyone explain?"

These are not simple html comments. <!-- BEGIN: someName --> <!-- END: someName --> are cues in the XTemplate system which determine the areas to be parsed by the php files that drive the templates. This is very important . . . be careful tampering with any of these "comments"

This is one of the two basic things that make these .tpl files rather than .html files The other one is the use of {SOME_NAME} placeholders (these are not "macros").

2. This file is way wrong. It will cause your page to have too many html tags, doctype statements, head sections etc.

{CATEGORIES} placeholder represents this entire block of html on your site pages, see global/index.tpl

global/index.tpl has the doctype declaration, head section, etc. etc. This categories.tpl file is analogous to an HTML SNIPPET, not an entire HTML document.

You must remove all the extraneous crud from this file - you must put the javascript for head section into global/index.tpl

yeah i thought that {categories} would take everything from this code, which is very crappy.

I will have another go and place the javascript in the index.tpl file

EDIT: I placed all the javascript functions within the head of the index.tpl file, but it didn't work. It got rid of the javascript errors but the images did not swap. Any ideas? Is there anything else in the code that is wrong??

[markscarts]

I can see something else wrong, may not be the only cause of your problems, but this code:

MM_swapImage('Image1'

and:

name="Image1" id="Image1"

will not work inside this loop for categories, because all the cat images would then have the same identifiers which is an error; each one needs a unique identifier. I would try something like this maybe:

MM_swapImage('Image{DATA.cat_id}'

and:

name="Image{DATA.cat_id}" id="Image{DATA.cat_id}"

[Guest jpmad4it]

I can see something else wrong, may not be the only cause of your problems, but this code:

MM_swapImage('Image1'

and:

name="Image1" id="Image1"

will not work inside this loop for categories, because all the cat images would then have the same identifiers which is an error; each one needs a unique identifier. I would try something like this maybe:

MM_swapImage('Image{DATA.cat_id}'

and:

name="Image{DATA.cat_id}" id="Image{DATA.cat_id}"

Superstar

It worked.

I thought that was the problem, but I just couldn't do the code

Thanks again markscarts!!!

[markscarts]

Thanks :)

[Guest jpmad4it]

How could I implement this on the cart.tpl page, as the way the links work are slightly different as there are no actual I.D numbers, but only {VAL_LINK} and {TXT_LINK}?

[markscarts]

do you mean content/cart.tpl or global/cart.tpl?

It is not hard to get a category id there, just assign it in the relevant php file, like includes/content/cart.inc.php

-------------

for those playing along at home, don't monkey with any of the files we write about in this thread without backing up the file with an original copy in case of errors.

[Guest jpmad4it]

do you mean content/cart.tpl or global/cart.tpl?

It is not hard to get a category id there, just assign it in the relevant php file, like includes/content/cart.inc.php

-------------

for those playing along at home, don't monkey with any of the files we write about in this thread without backing up the file with an original copy in case of errors.

I mean global/cart.tpl. When you click to see what is in your cart there are 2 links at the top - 'Previous Page' and 'Empty Basket'. I would like to keep the buttons consistent, and so I would like the 'Previous Page' & 'Empty Basket' links to be images like I have done for the other links in this thread.

:w00t:

[markscarts]

I see now, that is easy enough. You would code that in includes/boxes/cartNavi.inc.php

If you are familiar with my site, go there and get the tutorial on "Change the Homepage Links Throughout CubeCart" as it deals briefly with this file. Just use some html in the assignments in that file to acheive what you want :w00t:

[Guest jpmad4it]

I see now, that is easy enough. You would code that in includes/boxes/cartNavi.inc.php

If you are familiar with my site, go there and get the tutorial on "Change the Homepage Links Throughout CubeCart" as it deals briefly with this file. Just use some html in the assignments in that file to acheive what you want

Cool - what is the URL for your site?

[markscarts]

It's not right to mention my url in this forum, it circumvents the rules, and I respect this forum an like helping out here. You might want to edit your post and remove the mention of it, even though it is not hypertexted. I would appreciate it. I have my site listed in my profile.

I will try to be more helpful here by giving you a very quick nutshell tutorial.

In cartNavi.inc.php you have a different setup from categories. There are arrays which are paired to create the links, example:

$links[] = array (

'link' => "index.php",

'text' => $lang['front']['boxes']['homepage']);

The above creates the homepage link. What you would need to do is remove the language file reference in the second item of the pair (the part in red above) and replace it with html calling for your image. Here is the syntax:

1. Use double quotes to begin and end the html and text code

2. Do not use double quotes within your html or text, use single quote marks instead, unless you escape the double quotes as in \"

3. do not remove the closing parenthesis and semi-colon at the end of the line.

EXAMPLE:

$links[] = array (

'link' => "index.php",

'text' => "<img src='url/to/image.gif' alt='Home' />");

;)

[Guest jpmad4it]

It's not right to mention my url in this forum, it circumvents the rules, and I respect this forum an like helping out here. You might want to edit your post and remove the mention of it, even though it is not hypertexted. I would appreciate it. I have my site listed in my profile.

I will try to be more helpful here by giving you a very quick nutshell tutorial.

In cartNavi.inc.php you have a different setup from categories. There are arrays which are paired to create the links, example:

$links[] = array (

'link' => "index.php",

'text' => $lang['front']['boxes']['homepage']);

The above creates the homepage link. What you would need to do is remove the language file reference in the second item of the pair (the part in red above) and replace it with html calling for your image. Here is the syntax:

1. Use double quotes to begin and end the html and text code

2. Do not use double quotes within your html or text, use single quote marks instead, unless you escape the double quotes as in \"

3. do not remove the closing parenthesis and semi-colon at the end of the line.

EXAMPLE:

$links[] = array (

'link' => "index.php",

'text' => "<img src='url/to/image.gif' alt='Home' />");

Hey sorry about that - i've edited my post now whoopsy

I will have a look at the tutorial and the info here and have a go. If i get any problems I will post back here - thanks again you've been too helpful!! :on2long:

[Guest jpmad4it]

Hi markscarts, I had a go at the tutorial and tested the code above, but I cant figure it out. If I do as you said in the code above, I just get an extra image displayed on the cart page which links off to the homepage. What I was looking to achieve was images for the 'empty basket' and 'previous page' links. I also want these images to have the rollover effect. Is that possible?

EDIT: I managed to get images displayed for the 2 cart links by changing the code below in cartNavi.inc.php:

I changed this:

if(!empty($_SERVER['HTTP_REFERER'])){

	$links[] = array (

		'link' => str_replace("&","&",$_SERVER['HTTP_REFERER']),

		'text' => $lang['front']['boxes']['prev_page']);

}

To this:

if(!empty($_SERVER['HTTP_REFERER'])){

	$links[] = array (

		'link' => str_replace("&","&",$_SERVER['HTTP_REFERER']),

		'text' => "<img src='link/to/image.gif' alt='Previous Page' />");

}

And I changed this:

case "cart":

	$links[] = array (

		'link' => "cart.php?act=".treatGet($_GET['act'])."&mode=emptyCart",

		'text' => $lang['front']['boxes']['empty_cart']);

	break;

To this:

case "cart":

	$links[] = array (

		'link' => "cart.php?act=".treatGet($_GET['act'])."&mode=emptyCart",

		'text' => "<img src='link/to/image.gif' alt='Empty Cart' />");

break;

Now that gives me 2 static images for the empty cart and previous page links, but now I need to add the rollover effect to them.

PS i also did the above for the following links:

'Edit Invoice Address'

'Register & Continue'

'Continue Shopping'

[markscarts]

Good fellow, as that is what I meant for you to do I gave one example for homepage, but they all work the same there.

Now look at your example above, the last one shown, see this line:

'text' => "<img src='link/to/image.gif' alt='Empty Cart' />"

On the right side, between double quote marks, you have placed html (using html img tag). What you need to know is that you can use any html, javascript or text there between the opening and closing quote marks. There are some special characters that can cause trouble, like the double quote marks - you can't use double quote marks inside there without escaping them, so it is best to use single quotes instead - a few little rules like that, but basically, you should try to put the rollover code there with the image, like you did on category page. This is a little more difficult on cart pages, but it is manageable.

[Guest jpmad4it]

Good fellow, as that is what I meant for you to do I gave one example for homepage, but they all work the same there.

Now look at your example above, the last one shown, see this line:

'text' => "<img src='link/to/image.gif' alt='Empty Cart' />"

On the right side, between double quote marks, you have placed html (using html img tag). What you need to know is that you can use any html, javascript or text there between the opening and closing quote marks. There are some special characters that can cause trouble, like the double quote marks - you can't use double quote marks inside there without escaping them, so it is best to use single quotes instead - a few little rules like that, but basically, you should try to put the rollover code there with the image, like you did on category page. This is a little more difficult on cart pages, but it is manageable.

OK so I need to add the following to those links :

title=' ' name=' ' id=' '

In-between the single quotes in categories.tpl we used the code "Image{DATA.cat_id}", so do I just define an ID for each of the links manually - or do they have one assigned somewhere else already?

How can I add the onmouseout="MM_swapImgRestore()" and onmouseover="MM_swapImage('link') functions, as the links are already defined in the arrays in cartNavi.inc.php above where I added the <img> tags?

Tricky

This will end up to be a good tutorial for others me thinks :)