button graphics
 

it's me again :roll: - in the default shop template it has many buttons that are .tpl files.
how can i replace these graphics and any others for that matter with buttons that i have created myself using independant button making software.

Also - when i try to use the template editing feature - i cannot seem to get the debugging console to show to even find out what it actually will do for me.

i like the look of the standard shop template but would still like to be able to tweek it's layout and final look to my own tastes - can you please help me?

thanks and keep up the good work as newbies like me need you experienced people out there. :)

Ah, you have discovered one of the most annoying things about X-Cart....the buttons! Basically if you want to use your own buttons, there are a few ways of doing it.

1. You can edit the buttons/button.tpl, as this is the default template called by all of the buttons. It consists of a three cell table, with the rounded corners on either side, and the 'content' in the middle. The advantage of this is it will auto-stretch to whatever text you have in the button. You could replace the three cell layout with your single graphic, just be careful that all the text fits properly.

2. You could also just replace the whole line of code for each button in the templates with a simple html call to your button graphic. Something like:


You would, of course, replace the link with whatever the real link is, and you would have to upload the button graphic to skin1/images.

Hope this sheds some light on the subject!

It is a popup window. Make sure you don't have yahoo's popup blocker or Windows XP's popup blocker turned on.

thankyou
 

thankyou - i will now go away and have a play - does that mean that i have to turn my button into 3 cells to keep the auto sizing facility ?
i first tried with a button and it didn't autosize before.

thanks again - i really appreciate the help.

Yes, cut off the ends of your button and add them to the first and last cell and it will auto-resize.

buttons
 

thanks very very much

really appreciated :D

This may sound dumb but how do you figure out what the real link is?

For example I want to replace the "Add to Cart Button"

I open the add_to_cart.tpl" file.

I replace:

With:

Where do I find the link for add to cart?

In the other button post somebody mentioned, "passed variables" What is that?

Thanks,

Daniel

Take a look at customer/main/product.tpl and see how the add to cart button is handled. Notice all of the 'hidden' variables that are called when the add to cart button is clicked.

So would it be:


?

I'm not really a programmer so I'm not sure how to do this then. I may just use the buttons I already have then...

There you go :)

oh wow. I amaze myself. So just then look at the tpl pages related to the button I'm making and find the appropriate link..

Exactly. That is one way of doing it. The other way is to edit the button templates themselves.

Hi All

You can also modify the button GIF's in the images directory.

Just remember to make backups of both the original and your files to restore when things go wrong or you upgrade and they get replaced with the original versions.

Regards
Ing. Stephen Hatton
:idea:

Ok so I changed the add_to_cart.tpl file just as described above and when I uploaded it, nothing happend. Am I missing a step?

Daniel

Nevermind. I keep looking at the HTML catalog version that does not reflect the changes. <sigh>

does this help ?
 

hi - this is what i did to change the buy now button

in the skin/images directory you will find the 3 images that make up the buy now button - but1.gif + butbg.gif + but2.gif.

you have to split your new button design into 3 sections, effectively a left portion, middle and right portion. My button was made 30 px high by 500 wide. My two ends were cut off 10 px each leaving 480 px for the middle.

Then i uploaded the 3 gifs to the skin/images directory and replaced those existing - (name your new gifs the same name as originals).

Then i went to directory /buttons/button.tpl and looked for the scripts that dealt with the 3 gifs that made up the buy now button.

<TABLE border="0" cellspacing="0" cellpadding="0" onclick="{$js_link}" style="cursor: pointer;" valign="middle"{if $title ne ''} title="{$title}"{/if}>
<TR><TD><{$img_type} src="{$ImagesDir}/but1.gif" width="42" height="20" border="0"{if $title ne ''} title="{$title}"{/if}></TD>
<TD class="Button" valign="middle" nowrap><FONT class="Button">{$button_title}</FONT></TD>
<TD>[img]{$ImagesDir}/but2.gif[/img]</TD></TR>
</TABLE>

adjust the hight and width values to match your new gif sizes (but1 & but2) - butbg gif is auto sizing so you don't need to worry about that.

the url for the button is already written in the scripts so you don't need to change that. all you should have is a new button.

now changing your other buttons should now be the same principle as above.

hope i have helped cos it worked for me and i just hope i have managed to explain it properly.

good luck
:)

I've actully done it that way already. What I'm trying to do is replace those 3 file buttons with custom buttons.

Thanks!

ok
 

then surely all you have to do is make up a button and then split it into 3 by way of described above, name them the same as the existing buttons in the images folder and upload / replace them in /skin/images folder.

:?

Like I said. I've already done it that way and I don't like the results of the way it looks. Too bad I did it before your post. That would have helped alot!

I saw some other x-carts where they put in different buttons.

I'm trying to achieve a specific look and splitting it three ways won't achieve it.

I finally got the "add to cart" button up, now for the others...

Re: button graphics
 

Guys/Gals

Is there an easy way to convert all the 'Go' buttons to the standard button template? (button.tpl)
Or does this have to be done individually?

Thanks,
R

Re: button graphics
 

i dont know why but x-cart or addon skins not have image source (psd), its really necessary for change botton "go" "live help" "special offer" for example.

i buy software with all source.

Re: button graphics
 

Bump.

I'm looking for an easy way to change the 3-button sliced up buttons with one-button. Is there an easy way to do that?

Buttons I want to change:

'add to cart' on the product detail and shopping cart page.

I'd also like to add a new button for the 'click to enlarge' product image preview popup on the product detail page.

TIA

Re: button graphics
 

OK, I've changed the 'add to cart' button on the product detail page (product.tpl). Here's how to do it:

Change this code on skin1/buttons/button.tpl on or near line 25:


to this:


Make sure your new image has been uploaded to /skin1/images

Still working on the other stuff... feel free to submit your comments. Thanks.

Re: button graphics
 

OK, so the above directions unfortunately also changed the search button, so now my 'add to cart' button is also now my search button, which sucks. Hmm, help anyone?

Re: button graphics
 

I have not done exactly what you are trying to do, I've only added a couple of button styles - so I can't give you precise directions, but maybe this will help. You will have to experiment.

The button.tpl is shared - you will see many instances of buttons that use button.tpl (that does not suck - it is shared code - more efficient, hopefully) - so if you are going to make changes in there for only certain buttons, you need to use {if} based on the variables you pass in with the include from the originating file (product.tpl in your case). Perhaps you could set the $style or the $button_title and/or other variables to something. You can figure out how xcart is using those variables, then modify their code, or do your own thing with an {if}.

in product.tpl:
{include file="buttons/button.tpl" button_title=$lng.lbl_pconf_add_to_configuration style="MY_HAPPY_BUTTON" href="javascript:if (FormValidation()) `$ldelim`document.orderform.productid.value='`$sma rty.get.pconf`';document.orderform.action='pconf.p hp';document.orderform.submit()`$rdelim`" style="MY_HAPPY_BUTTON_STYLE" button_style="WHATEVER_I_WANT"}

Then, in button.tpl:
{if $button_style eq "WHATEVER_I_WANT"}
do cool stuff
{/if}

etc.

If this works - you can replace what they did with non-sliced buttons, or css or whatever you need. If it works - post back - I may want to duplicate it!


If that is too complex, have you tried just replacing the include for button.tpl in product.tpl to use your button code instead? Look at what that call to button.tpl would have included in product.tpl, and replace it with your code.

Re: button graphics
 

Thanks gb2. You're definately on to something, unfortunately for me, the 'if' statement wont work here. since the 'if' statement is already used. It needs to be an 'else' statement instead. I've tried some stuff but failed so far. I'll post my success should that happen.

Re: button graphics
 

Another option you could use is to replace the graphics with the default form buttons... This way you don't have to create any new graphics and I personally feel that the default buttons are much more clear to unexperienced users.

How to do this; go to buttons\button.tpl and replace:

With this:

Re: button graphics
 

The change the add to cart button you edit add_to_cart.tpl.

change:
{include file="buttons/button.tpl" button_title=$lng.lbl_add_to_cart href=$href title=$title style=$style}

to:
{include file="buttons/atcButton.tpl" button_title=$lng.lbl_add_to_cart href=$href title=$title style=$style}

Ok so atcButton.tpl does not yet exist, so you open button.tpl with your text editor and save a copy of it as atcButton.tpl

NOTE: make sure you don't save over button.tpl.

Make the appropriate changes to you new file and upload the add_to_cart.tpl and the new atcButton.tpl to the buttons folder and you've got it.

you can check out www.affordableimrpint.com to see it in action. I have changed all of the buttons. You can also make them change when hovered over.

Re: button graphics
 

If you want the buttons to change whn hovered over use this.

in your product.tpl

find and change:
<tr>
<td>{include file="buttons/add_to_cart.tpl" style="button" href="javascript: if(FormValidation()) document.orderform.submit();"}</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;</td>
<td>
{if ($login ne "" || $config.Wishlist.add2wl_unlogged_user eq 'Y') && $active_modules.Wishlist ne ""}
{include file="customer/add2wl.tpl"}
{/if}
</td>
</tr>


to:
<tr>
<td align="center"><a href="javascript: document.orderform.submit();"
onmouseover="document.atcButton.src='skin1/images/atcButton2.gif';"
onmouseout="document.atcButton.src='skin1/images/atcButton.gif';">
<img name="atcButton" src="skin1/images/atcButton.gif"
width ="200px" height="37px" />
</a>
</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;</td>
<td>
{if ($login ne "" || $config.Wishlist.add2wl_unlogged_user eq 'Y') && $active_modules.Wishlist ne ""}
{include file="customer/add2wl.tpl"}
{/if}
</td>
</tr>

Now make the images you want to use as your 'out' and 'hover' buttons. Once you have them made upload them and the new product.tpl and you are good to go.

Re: button graphics
 

Thanks Ashley, that worked great!

Re: button graphics
 

I tried this and it worked but not for the "Continue shopping" and "Checkout" buttons. Does anyone know how change those to this standard form?

Re: button graphics
 

Are you using the fast lane checkout? If so those butons are defined by the CSS file in the fastlane checkout folder.

Re: button graphics
 

Thanks Ashley, that's exactly what I needed!

Re: button graphics
 

With the combined input from several experts on this thread, I have my custom add to cart button (working on other buttons). One problem that I've run into, the button is not clickable with only the products that have variants. Can someone point me to the file that I need to change for this.

Here's what I've done with my "add to cart" button:

I made a new IMG class in my skin1.css as IMG.AddtoCart to control the positioning of my button image. Uploaded the changed .css to skin1/skin1.css on my server.

I copied the button.tpl and named it as: atc_button.tpl
I commented out the following:

<!--<td>
<{$img_type} src="{$ImagesDir}/but1.gif" class="ButtonSide" alt="{$title|escape}" />
</td>
<td class="Button"{$reading_direction_tag}>
<font class="Button">{$button_title}</font>
</td>
<td>
<img src="{$ImagesDir}/but2.gif" class="ButtonSide" alt="{$title|escape}" />
</td>-->

and added this:

<td>
<{$img_type} src="{$ImagesDir}/addtocart.jpg" class="AddtoCart" alt="{$title|escape}" />
</td>
</tr>

saved the updated atc_button.tpl and uploaded it to skin1/buttons/ folder on my server.

I changed buttons/add_to_cart.tpl as:
{include file="buttons/atc_button.tpl" button_title=$lng.lbl_add_to_cart href=$href title=$title style=$style}
<!--{include file="buttons/button.tpl" button_title=$lng.lbl_add_to_cart href=$href title=$title style=$style}-->

I also changed the following in related items modules/Upselling_Products/related_products.tpl:
{include file="buttons/atc_button.tpl" style="button" button_title=$lng.lbl_add_to_cart href="javascript: self.location='cart.php?mode=add&productid=`$produ ct_links[proid].productid`&amount=1'"}
<!--{include file="buttons/button.tpl" style="button" button_title=$lng.lbl_add_to_cart href="javascript: self.location='cart.php?mode=add&productid=`$produ ct_links[proid].productid`&amount=1'"}-->


Christine

Re: button graphics
 

How can I change the Button color of Checkout button on cart?

Can anyone help me?

Re: button graphics
 

Can someone direct me to the location that I can edit the style of the buttons text? I designed a new three file button, but its height is 21px. When I upload it, the files are forced to 14px. Also, I want to increase the size of the text and change it to black from white.
Thanks for any info.

Re: button graphics
 

skin1.css, look for buttons styles

Re: button graphics
 

Thanks for the quick reply. I found out that mine was in skin1_c.css.

Do you know also where the location is for editing category links font color to the left?

Re: button graphics
 

Same css file probably. Work on the site in Firefox with Firebug addon - it will tell you exactly which class you need to modify and you can even change in place to see results before actual edit of the file