X-Cart forums

[Bowery]

I had a web developer create a custom template (I think he just modified the original 3-column template) for the store on my site: www.thebowery.com/cart.

We are having one small problem and I was wondering if anyone could help; when you go to the checkout page: http://thebowery.com/cart/cart.php?mode=checkout (you might have to add something to your cart for the link to work), there are white boxes for the shipping and payment info, but the font color is so similar to the background color of the boxes. Could someone tell me how to either make the box have a transparent background or change the font color to black so it is visible with a white background?

Also, if anyone knows how to fix the problem with some of the order summary info being cut off on the right side please help with that also.

Thanks so much!

[JWait]

Do a search in your main.css and look for ECF3F7 which is the color of the "boxes" around the items not displaying.
Some specific things are

.checkout-payments tr.payment-details td {
background: none repeat scroll 0% 0% #ECF3F7;

div.address-book-link {
background: none repeat scroll 0% 0% #ECF3F7;

Which seem to be the boxes around the checkout data. I suggest changing the background color and not the text color as you have a dark color background on the rest of your site.

The part being "cut-off" is probably because your .checkout-container isn't set wide enough to contain all of the data.

[Bowery]

Thanks for the help! I found more than one main.css files. Could you help me find the one that you are talking about? And could you tell me what to replace ECF3F7 with for a "transparent" box color?

Originally Posted by JWait

Do a search in your main.css and look for ECF3F7 which is the color of the "boxes" around the items not displaying.
Some specific things are

.checkout-payments tr.payment-details td {
background: none repeat scroll 0% 0% #ECF3F7;

div.address-book-link {
background: none repeat scroll 0% 0% #ECF3F7;

Which seem to be the boxes around the checkout data. I suggest changing the background color and not the text color as you have a dark color background on the rest of your site.

The part being "cut-off" is probably because your .checkout-container isn't set wide enough to contain all of the data.

[JWait]

Look in skin/common_files/modules/One_Page_Checkout for the first one.
The default ".checkout-payments tr.payment-details td" is
is
.checkout-payments tr.payment-details td {
background: #ecf3f7;
margin: 0;
padding: 10px;
}
and div.address-book-link is
div.address-book-link {
height: 35px;
background: #ecf3f7;
width: 100%;
vertical-align: middle;
position: relative;
}
I don't know where the "none repeat scroll 0% 0%" part came from or what it does that has been added to yours.

To make the background transparent change background to
background: transparent; or background: transparent none;

Try each one to see if either works for you.

[Bowery]

I followed your instructions and tried both and neither worked. It still has the same background.

Originally Posted by JWait

Look in skin/common_files/modules/One_Page_Checkout for the first one.
The default ".checkout-payments tr.payment-details td" is
is
.checkout-payments tr.payment-details td {
background: #ecf3f7;
margin: 0;
padding: 10px;
}
and div.address-book-link is
div.address-book-link {
height: 35px;
background: #ecf3f7;
width: 100%;
vertical-align: middle;
position: relative;
}
I don't know where the "none repeat scroll 0% 0%" part came from or what it does that has been added to yours.

To make the background transparent change background to
background: transparent; or background: transparent none;

Try each one to see if either works for you.

[Bowery]

Any other suggestions?

[gb2world]

You can use Firefox+Firebug to look directly at the css settings. You can make changes on the fly and debug to see what works, then make the changes directly to the appropriate css files:

/cart/skin/common_files/modules/One_Page_Checkout/main.css

fieldset.registerform ul {
background: transparent;
margin: 0;
padding: 0 15px;
position: relative;
}


div.opc-section-container {
background: transparent;
margin: 0;
padding: 10px 0;
}

[Bowery]

THANKS! I figured it out! any advice on fixing the "cut-off" column?