X-Cart forums - New Button

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - New Button (https://forum.x-cart.com/showthread.php?t=48070)

Hi
I need some help on the correct sequence to create a new button that will be different from all the other buttons on my site (larger and a different background colour).

I belive the buttons are made up of three images which automatically self adjust to suit the text in the button, this process i wish to keep.

I have made three new images in Photoshop (LH/midd/RH button image) which i have uploaded to skin1/images. Do i now need to make a new style in skin1.css for example call the new style "Button1" then add all the style data below,
then in the product.tpl rename the style that i require to be displayed, for example this is the original line of code in the product.tpl of the button i wish to change

</td>
<td><div align="centre">{include file="buttons/add_to_cart.tpl" style="button" href="javascript: if(FormValidation()) document.orderform.submit();"}</div></td>
</tr>

Where the style is in red above is where i would put "Button1" the new style that i created.

Is this the correct way to do this and if i require more different button colours etc then i would repeat the above.

Also you should change your buttons/button.tpl

Code:

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

<table cellspacing="0" cellpadding="0" onclick="{$js_link}" class="ButtonTable"{if $title ne ''} title="{$title|escape}"{/if}>

{strip}

<tr>

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

</tr>

{/strip}

</table>

{elseif $image_menu}

Code:

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

<table cellspacing="0" cellpadding="0" onclick="{$js_link}" class="ButtonTable"{if $title ne ''} title="{$title|escape}"{/if}>

{strip}

<tr>

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

</tr>

{/strip}

</table>



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

 <table cellspacing="0" cellpadding="0" onclick="{$js_link}" class="Button1Table"{if $title ne ''} title="{$title|escape}"{/if}>

 {strip}

 <tr>

     <td>

         <{$img_type} src="{$ImagesDir}/LH.gif" class="Button1Side" alt="{$title|escape}" />

     </td>

     <td class="Button1"{$reading_direction_tag}>

         <font class="Button1">{$button_title}</font>

     </td>

     <td>

         <img src="{$ImagesDir}/RH.gif" class="Button1Side" alt="{$title|escape}" />

     </td>

 </tr>

 {/strip}

 </table>

{elseif $image_menu}

By changing the buttons/button.tpl as you suggested will do what to the button?
Please excuse my ignorance as i am a begginer, lol.

button.tpl produces buttons of specified style

There is style 'button' but no 'button1'. If you specify style 'button1'
condition

if $style eq 'button'

will be false and button of default style is produced (simple text link I guess)

so I added

elseif $style eq 'button1' where you can specify your custom style used when button.tpl is invoked with $style="button1"

Thanks Victor D
So every time i create a new button i have to add code to the buttons/button.tpl as your example, would this be for any type of button that i change?

Copy of your code below with the code in red which relates to the new button css and img's for that button, is this the only .tpl that has to be changed when applying a new button?

{elseif $style eq 'button1' && ($config.Adaptives.platform ne 'MacPPC' || $config.Adaptives.browser ne 'NN')}
<table cellspacing="0" cellpadding="0" onclick="{$js_link}" class="Button1Table"{if $title ne ''} title="{$title|escape}"{/if}>
{strip}
<tr>
<td>
<{$img_type} src="{$ImagesDir}/LH.gif" class="Button1Side" alt="{$title|escape}" />
</td>
<td class="Button1"{$reading_direction_tag}>
<font class="Button1">{$button_title}</font>
</td>
<td>
<img src="{$ImagesDir}/RH.gif" class="Button1Side" alt="{$title|escape}" />
</td>
</tr>
{/strip}
</table>

I have the new button on my site without the change to the buttons/button.tpl and it is working fine but i assume that to be fully correct i have to change the /button.tpl

One more thing, where is the reference to the midd img?

If you need more than one custom button you can do it like this

Code:

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

 <table cellspacing="0" cellpadding="0" onclick="{$js_link}" class="{$custom_class}"{if $title ne ''} title="{$title|escape}"{/if}>

 {strip}

 <tr>

     <td>

         <{$img_type} src="{$ImagesDir}/spacer.gif" class="{$custom_class}-l" alt="{$title|escape}" />

     </td>

     <td class="{$custom_class}"{$reading_direction_tag}>

         <font class="{$custom_class}">{$button_title}</font>

     </td>

     <td>

         <img src="{$ImagesDir}/spacer.gif" class="{$custom_class}-r" alt="{$title|escape}" />

     </td>

 </tr>

 {/strip}

 </table>

Now you should apply custom styles:

Code:

/*FirstButton*/

TABLE.FirstButton{

/*common first button styles*/

}

img.FirstButton-l{

/*left part of the first button styles*/

}

img.FirstButton-r{

/*right part of the first button styles*/

}

TD.FirstButton{

/*center part of the first button styles*/

}



/*SecondButton*/

TABLE.SecondButton{

/*common second button styles*/

}

img.SecondButton-l{

/*left part of the second button styles*/

}

img.SecondButton-r{

 /*right part of the second button styles*/

 }



TD.SecondButton{

  /*center part of the second button styles*/

 }



....

/*TheVeryLastButton*/

TABLE.TheVeryLastButton{

....

Now you can include button.tpl as
{include file='button.tpl'.... style='button1' custom_class="FirstButton"}
{include file='button.tpl'.... style='button1' custom_class="SecondButton"}
....
{...}

Quote:

is this the only .tpl that has to be changed when applying a new button?

If you include button.tpl directly this tpl is the only one.

Quote:

One more thing, where is the reference to the midd img?

in CSS TD.button1 should be like this

TD.button1{
background: #fff url(images/btn-c.gif) left top repeat-x;
}