Virtuemart Support :: Topic: [SOLVED] How to change backgroundcolor in checkout (1/1)

Welcome, Guest

TOPIC: [SOLVED] How to change backgroundcolor in checkout

[SOLVED] How to change backgroundcolor in checkout 11 years 6 months ago #844

Robert Huesken	I want a white background checkout page. The checkoutback.jpg I have now removed. Now there still is a light gray color. Can you indicate how I get checkoutpagina white? Attachments: checkout.jpg (334KB)
	Last Edit: 11 years 6 months ago by Support. The topic has been locked.

checkoutpage, change backgroundcolor white 11 years 6 months ago #862

Support

Hi,

It can be done via CSS modifications only.

The CSS file you need make edit is this:
ROOT/templates/<yourjoomlatemplate>/html/com_virtuemart/assets/css/flexibleVM2Global.css

And look for this CSS rule:

.checkout-content-cart {
	border-left:thin solid #a5a5a5;
	border-right:thin solid #a5a5a5;
	border-bottom:thin solid #a5a5a5;
	padding:15px;
	margin-top:-10px;
	margin-bottom:10px;
	background: url(../images/Flexible/checkoutBack.jpg) repeat-x #e2ddd9;
}

As you can see in this CSS rules, this element uses the checkoutBack.jpg image, and it is background has this Color: #e2ddd9
You can change the background rule to something like:
background: #ffffff;

The background of checkout page will be changed to "white".

And do the same thing in this CSS rule as well (within the same CSS file)

.checkout-content {
	border-left:thin solid #a5a5a5;
	border-right:thin solid #a5a5a5;
	border-bottom:thin solid #a5a5a5;
	padding:15px;
	margin-top:-10px;
	margin-bottom:10px;
	background: url(../images/Flexible/checkoutBack.jpg) repeat-x #e2ddd9;
 
}

Which is for the "Login BOX" in the shopping cart page.

For other changes, download "Firebug" Plugin for your Mozilla Firefox (just google it), and investigate element you are willing to modify. This "firebug" plugin will show you the ELEMENT name and which CSS file contains that CSS rule and in which Line number. So you will open that CSS file, find that CSS rule and make the changes. That simple ;)