Home » Community » Ubercart Contributions

Cart checkout review style code

Submitted by bwv on Wed, 10/03/2007 - 07:20.
Contrib type: 
Code/CSS Snippet
Status: 
Complete and working
Compatibility: 
Ubercart Alpha 7c

The Ubercart team have done a superb job with the coding and for the most part have left the theming and styling up to us. One area that I thought could use a little CSS modification was the checkout review table at store/cart/checkout/review. Following is the CSS coding that I am using at my store; obviously, you can change the colors and other specifications to suit your own needs. I started out at uc_order.css but decided to move the whole thing to a separate CSS file so that I would not lose this coding when I upgrade to a new version of UC. Enjoy!

/*checkout review table @ store/cart/checkout/review */

.order-review-table tbody tr { background: #E0DFB1; line-height: 2em; }
.order-review-table tbody tr td {padding-left: .31em; padding-right: .31em; }
.order-review-table .title-col { padding-left: 3em; padding-right: 3em; background: #E0DFB1; text-align: left;}
.order-review-table .data-col { padding-left: 3em; padding-right: 3em; background: #E0DFB1; text-align: right; font-weight: 700;}
.pane-title-row td { background: #535233; color: white; padding: 1em;}
.order-review-table tbody .review-button-row { text-align: center; background: #535233;}
.order-review-table tbody .review-button-row .form-submit { background: #000; color: white; padding: .51em; margin-bottom: 1em;}
#1Submitted by Ryan on Wed, 10/03/2007 - 08:32.

Re: Cart checkout review style code

Sweet... hope you don't mind I just tested an order (didn't complete checkout) on your site to see the review page. Looks nice... much better than my boring gray and black. Eye-wink

#2Submitted by flavoflav on Wed, 10/03/2007 - 14:43.

whwre do you install this

would you let me know where to install so I can try it out?

#3Submitted by bwv on Thu, 10/04/2007 - 04:51.

Re: Re: Cart checkout review style code

Ryan, I *want* you to complete checkout! Eye-wink

#4Submitted by bwv on Thu, 10/04/2007 - 04:52.

Re: whwre do you install this

You can insert the code into the uc_order.css file, which is in the uc_order folder in the ubercart sub directory.

#5Submitted by Insurrectus on Tue, 10/09/2007 - 11:58.

Re: Re: whwre do you install this

It is best to put this CSS in your theme master css. That way when you update Ubercart these changes won't get overwritten.

#6Submitted by droople on Tue, 12/18/2007 - 14:44.

where is the demo?

where is the demo site?

cheers

#7Submitted by epop on Fri, 05/02/2008 - 01:56.

XHTML Validation is not good

I'm glad you brought up the review page. This particular page comes out in some pretty old html by default. Maybe a good idea for us to try get rid of the nowrap tag etc... so that this page will validate by default. 66 validation errors appear on the default review page. Mostly nowrap and tags.