X-Cart forums

[balinor]

Here's what I use for CSS buttons:

button.tpl

{if $config.Adaptives.platform eq 'MacPPC' && $config.Adaptives.browser eq 'NN'}{assign var="js_to_href" value="Y"}{/if}
{if $type eq 'input'}{assign var="img_type" value='INPUT type="image"'}{else}{assign var="img_type" value='IMG'}{/if}
{assign var="js_link" value=$href|regex_replace:"/^\s*javascript\s*:/Si":""}
{if $js_link eq $href}{assign var="js_link" value="javascript: self.location='`$href`'"}
{else}{assign var="js_link" value=$href}{if $js_to_href ne 'Y'}{assign var="onclick" value=$href}{assign var="href" value="javascript: void(0);"}{/if}{/if}

<TABLE border="0" cellspacing="0" cellpadding="2" onclick="{$js_link}" style="cursor: pointer;" {if $title ne ''} title="{$title}"{/if}>
<TR>
<TD class="Button2Off" valign="middle" onMouseOver="this.className='Button2On'" onMouseOut="this.className='Button2Off'"><SPAN class="Button2">{$button_title}</span></TD>
</TR>
</TABLE>

Add these two classes to skin1.css and skin1_admin.css:

.Button2On {COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-DECORATION: none; Background-color: #3D9E6A; border: 1px solid #3D9E6A;}

.Button2Off {Background-color: #cccccc; COLOR: #666666; FONT-WEIGHT: bold; FONT-SIZE: 11px; TEXT-DECORATION: none; border: 1px solid #666666;}

Adjust the colors accordingly. Only catch with this is that you can't use 'enter' for form submission, you have to actually click on the button.

[amy2203]

I've sorted out button.tpl, and the css, my problem is the login buttons, the ones that want to use the Go image,

[kb112211]

You will need to follow this same procedure for add to wish list, buy now, etc. If you want the same image for ALL the buttons, just edit the button.tpl file.

I can't promise this will work for you, but it does the trick for me [/quote]


HI, I have done all the above, but, I get the following line of text, instead of a button (the functionallity of the link works, but no image...

[img]/xcart/skin1/images/addtocart1.gif[/img]

Any idea??

Thanks!!

[kazmattsas]

Yep - I got the same issue as kb112211

I am using 4.1 has it changed again since then ???

I'm pretty sure it is an easy one - I just can't get my head around it

any ideas greatly welcomed

[kazmattsas]

ok

found it

instead of

[img]{$ImagesDir}/imagename.jpg[/img]

Try

<{$img_type} src="{$ImagesDir}/imagename.jpg" />

[dhirsch]

I'm not sure if this has been covered better anywhere else, but I ran across this thread tonight searching for a solution to this problem in 4.1 and ended up rolling my own solution... In the interest of sharing, here's what I did:

Goal: Make an easy way to replace certain buttons with images only

I wanted a solution that would be easy to replicate for multiple buttons and image files.

In 'buttons/button.tpl', I added this:

{** DH **}
{elseif $style eq 'image'}
    <span class="SimpleButton" style="{$extrastyle}">
        <a href="{$href|amp}"
            {if $onclick ne ''} onclick="{$onclick}"{/if}
            {if $title ne ''} title="{$title|escape}"{/if}
            {if $target ne ''} target="{$target}"{/if}>
            <img src="{$ImagesDir}/{$imgfile}" alt="{$title|escape}" />
        </a>
    </span>
{** /DH **}

right before:

{elseif $image_menu}

and after the block following:

{if $style eq 'button' && ($config.Adaptives.platform ne 'MacPPC' || $config.Adaptives.browser ne 'NN')}

I'm not using the standard button.tpl to begin with, so some of my code may be a bit different, but hopefully you get the idea.

Then I created a new TPL file for the button I was replacing. In my case, I wanted to replace the 'Update' button used in the cart for updating the cart quantities. So I created 'update_qty.tpl':

{include file="buttons/button.tpl" button_title=$lng.lbl_update href=$href title=$title style='image' imgfile='updatebtn.gif' extrastyle='padding-left:5px;'}

The important points here are the hardcoded style (image) which triggers my custom block in button.tpl, and the inclusion of two new variables (imgfile and extrastyle).

• $imgfile is used to pass the actual image file - this way, I don't need multiple versions of button.tpl to use different images.
• $extrastyle is used to throw in any last minute style changes for that button. Not great web design, but effective in this case.

All of this is called with an {include file="buttons/update_qty.tpl" ...} from cart.tpl in my case.

Result: Pretty much what I wanted. This is my first go-round with the idea, and I'll probably find some problems later, but I wanted to throw it out there in case anybody else had the same issue.

Daniel

[Wedji]

This has just worked beautifully for me - did it with the Update button so I could follow your example precisely being pretty much out of my depth with coding myself! Now to tackle the rest of my buttons!

Thank you very VERY much for taking the time to post that Mr. dhirsch!



If I may add from my own experience there, your last bit about calling an include in cart.tpl caused a bit of a headscratch for a novice here, so to clarify for those who follow;

Once you've done the above steps, edit skin1/customer/main/cart.tpl

find this line:

<td class="ButtonsRow">{include file="buttons/update.tpl" type="input" href="javascript: document.cartform.submit()" js_to_href="Y"}</td>

...and change "update.tpl" to "update_qty.tpl"

You should now see your new image and no text, but still behaving exactly as it did before the editing.

Cheers dhirsch!

JD

[Wedji]

Oh boy, what a nightmare. They're all called differently! ARGH!

Could any kind soul give us a clear guide on how to replace all the usual buttons with our own separate images please? I've got a lovely Update button now thanks to dhirsch, but I'm snookered for Clear Cart, Checkout, Submit, just about any of the clickable in-cart links, all of which I've got lovely glassy button images made up to replace and am in danger of hurting myself with. :-p

JD

[tarty00]

Originally Posted by balinor

Here is a method for changing the buttons to a simple .jpg or .gif. Keep in mind that all buttons use the same template, you will want to create a different button.tpl file for each different type. The text for the button in this case will be in the .jpg or .gif, the Smarty tags will not be used. I'll use 'Add to Cart' as an example.

1. Create a new .tpl in the buttons/ directory and call it button-cart.tpl.

2. Paste the following code in to it:

{* $Id: button.tpl,v 1.16 2004/06/23 08:14:34 max Exp $ *}
{if $type eq 'input'}{assign var="img_type" value='INPUT type="image"'}{else}{assign var="img_type" value='IMG'}{/if}
{assign var="js_link" value=$href|regex_replace:"/^\s*javascript\s*:/Si":""}
{if $js_link eq $href}{assign var="js_link" value="javascript: self.location='`$href`'"}
{else}{assign var="js_link" value=$href}{if $js_to_href ne 'Y'}{assign var="onclick" value=$href}{assign var="href" value="javascript: void(0);"}{/if}{/if}
{if $style eq '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]{$ImagesDir}/imagename.jpg[/img]</TD></TR>
</TABLE>
{else}
<FONT class="FormButton">{$button_title} <{$img_type} {include file="buttons/go_image.tpl" full_url='Y'}></FONT>
{/if}

4. Insert the name of your button image where it says imagename.jpg. This can of course be a .jpg or a .gif.

5. Upload your image to the Skin1/images directory.

6. Open the buttons/addtocart.tpl and replace this:

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

with this:

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

7. That should change your addtocart button to the image you just specified.

You will need to follow this same procedure for add to wish list, buy now, etc. If you want the same image for ALL the buttons, just edit the button.tpl file.

I can't promise this will work for you, but it does the trick for me

balinor I did this exactly like you said and it works fine and calls the right files but instead of my new button I just get the text for my image. Can you or anyone else check it out:

HERE

and let me know what I am to change because I think I am on a winner here. LOL. Thank you heaps

[ScrapOrchard]

I keep getting this error:

Error: Smarty error: [in buttons/button-cart.tpl line 1]: syntax error: unrecognized tag: \rtf1\ansi\ansicpg1252\deff0\deflang1033{\fonttbl{ \f0\fswiss\fcharset0 Arial; (Smarty_Compiler.class.php, line 436) in /home/scraporc/public_html/market/Smarty-2.6.12/Smarty.class.php on line 1095

What did I do wrong?!