Disclaimer: This is a tip I received from tech support that my designer asked, and I'm simply passing it on to the forums. If you want to know why I'm doing this, read here:
http://forum.x-cart.com/showthread.php?t=42824. I'm not a web designer/developer, and I don't know anything about programming the back-end of X-Cart. My version of X-Cart is 4.1.10, so this tip may not work if you use a different version. If you have any questions about this tip, I can't answer them, but reply anyway and hopefully someone more knowledgeable will respond.
===========
The following images are used in the background of the "Continue shopping" button:
- skin1/images/top_cl.gif - top left corner;
- skin1/images/top_b.gif - top area;
- skin1/images/top_cr.gif - top right corner;
- skin1/images/tab_left.gif - left side;
- skin1/images/tab_right.gif - right side;
- skin1/images/tab_cr.gif - bottom right corner;
- skin1/images/tab_bt.gif - bottom area;
- skin1/images/tab_cl.gif - bottom left corner;
If you replace these images you'll see that the "Continue shopping" button look and feel is changed. Please do not forget to save the backups of these files to avoid the possible problems.
To change the caption area of the "Continue shopping" button you should modify the "modules/Fast_Lane_Checkout/skin1.css" button. You can do it via "Edit templates" X-Cart feature (
http://www.x-cart.com/xcart_manual/online/template_editor.htm). Please find there the following lines:
----------------
.YellowBackground {
BACKGROUND-COLOR: #FFD44C;
COLOR: #330000;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
TEXT-ALIGN: center;
}
----------------
To change the background of this button caption you should replace the '#FFD44C' with some other. You can find more details about the colors in the CSS files for example here
http://www.w3schools.com/css/css_background.asp
As for the "Checkout" big button, it looks like the "Continue shopping" button, but the following images are used in its background:
- skin1/images/top_cl_r.gif - top left corner;
- skin1/images/top_b_r.gif - top area;
- skin1/images/top_cr_r.gif - top right corner;
- skin1/images/tab_left_r.gif - left side;
- skin1/images/tab_right_r.gif - right side;
- skin1/images/tab_cr_r.gif - bottom right corner;
- skin1/images/tab_bt_r.gif - bottom area;
- skin1/images/tab_cl_r.gif - bottom left corner;
To change the caption background of this button you should modify the following text in the same file with the same way:
----------------
.RedBackground {
BACKGROUND-COLOR: #FF8600;
COLOR: #330000;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
TEXT-ALIGN: center;
}
----------------
And finally, as for the "Submit" button. Its left side - is the "skin1/images/but1.gif" image, the right side - "skin1/images/but2.gif" image. The background of the main area of this button - is the "skin1/images/butbg.gif" image. If you would like to modify the text style of this button you should modify the "skin1/skin1.css" file. Please find there the following lines:
-------------------
TD.Button {
BACKGROUND-IMAGE: url(images/butbg.gif);
BACKGROUND-COLOR: #FF8600;
BACKGROUND-REPEAT: repeat-x;
PADDING-LEFT: 5px;
PADDING-RIGHT: 5px;
VERTICAL-ALIGN: middle;
WHITE-SPACE: nowrap;
}
-------------------
and change the required values. You can find more details about the CSS files here
http://www.w3schools.com/css/