X-Cart forums

[Mediansoft]

Hello all, first post here I am using X-cart 4.2 and wanted to change the default "Buy Now" button to one of my own.

I looked and thought this just involved replacing "but_main_left.png" with my own graphic. To my suprise after the switch, I get a sort of hybrid mix between the x-cart and my custom image. Then I noticed there was also a "but_main_right.png" file that seems to be a small part of the total image.

I do not understand why the button is build from 2 different files instead of 1. More so even if i totally delete "but_main_right.png" from the template, it still seems to get graphics from the old button mixed with my own button.

If there is, where is the place I can just "select" my button to use in a graphical interface (backend) somewhere ?

If there is not, shouldn't there be a just simple one step "change Buy Now Button" option that involves just me selecting a image and x-cart changing it automatically ?

Thanks for the help.

[ARW VISIONS]

WOW! Just checked the buttons in 4.2 out. I think they actually made it more complicated.


I'll check it out and see if I can get mine changed on my test store and post instructions.

[cflsystems]

You have to change both images in order to make it work. They are 2 so the length of the button can change depending on the length of the text inside the button. Also the divs that hold the button - you have to change the hights and maybe margins/paddings to reflect your images. The easiest way is to make your images the same width/height as the x-cart stock button images.

[ARW VISIONS]

LOL! help,if you look at the right files.

I was looking at buttons/button.tpl

not customer/buttons/button.tpl

[ARW VISIONS]

You will need to cut your graphic into two pieces or make a totally different .tpl file for your atc button.

I suggest just making two images the same size as the others.

[Mediansoft]

Thanks I did a mix of the offered solutions and while it was confusing at first, I understand the reasoning and structure behind it

[alec.thomas]

Yea, this can be a little difficult I would reccommend doing what Ashley says. If not, what I did with our store is uploaded an image named btn_main_left.png and btn_main_right.png. Now if their different dimmensions you have to edit the css in the main.css file. you need to edit the height, width, and padding options below

button.button .button-right {
  display: block;
  background: transparent url(images/but_right.png) no-repeat right top;
  padding: 0px 11px 0px 0px;
  height: 22px;
}
button.button .button-left {
  display: block;
  margin: 0px;
  background: transparent url(images/but_left.png) no-repeat left top;
  padding: 0px 5px 0px 15px;
  vertical-align: middle;
  white-space: nowrap;
  font-family: verdana, arial, helvetica, sans-serif;
  color: #111d4d;
  font-weight: bold;
  font-size: 11px;
  height: 22px;
  line-height: 21px;
}