Home ยป Ubercart Contributed Modules

Cart checkout review style code

Submitted by bwv on Wed, 10/03/2007 - 07:20
Contrib type: 
Code/CSS Snippet
Status: 
Complete and working

Downloads


Compatibility: 
Ubercart 1.x

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;}
Wed, 10/03/2007 - 08:32
#1 View page
Ryan
Ryan's picture
Offline
Joined: 08/07/2007
Juice: 15438
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

Top
Wed, 10/03/2007 - 14:43
#2 View page
flavoflav
flavoflav's picture
Offline
Joined: 10/01/2007
Juice: 103
whwre do you install this

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

Top
Thu, 10/04/2007 - 04:51
#3 View page
bwv
bwv's picture
Offline
Uber DonorBug FinderEarly adopter... addicted to alphas.Spreading the word - Ubercart for president.
Joined: 08/07/2007
Juice: 417
Re: Re: Cart checkout review style code

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

http://classicvinyl.com

Top
Thu, 10/04/2007 - 04:52
#4 View page
bwv
bwv's picture
Offline
Uber DonorBug FinderEarly adopter... addicted to alphas.Spreading the word - Ubercart for president.
Joined: 08/07/2007
Juice: 417
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.

http://classicvinyl.com

Top
Tue, 10/09/2007 - 11:58
#5 View page
Insurrectus
Insurrectus's picture
Offline
Spreading the word - Ubercart for president.
Joined: 08/22/2007
Juice: 364
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.

Top
Tue, 12/18/2007 - 14:44
#6 View page
droople
droople's picture
Offline
Joined: 11/02/2007
Juice: 24
where is the demo?

where is the demo site?

cheers

Top
Fri, 05/02/2008 - 01:56
#7 View page
epop
epop's picture
Offline
Joined: 05/02/2008
Juice: 17
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.

Top
Sun, 12/20/2009 - 18:05
#8 View page
cookiesunshinex
cookiesunshinex's picture
Offline
Joined: 10/14/2009
Juice: 127
Re: Cart checkout review style code

On safari, these two lines make the content left aligned, (fine in Firefox). I can't figure out how to center them.

.order-review-table tbody tr td {padding-left: .31em; padding-right: .31em; }

.order-review-table tbody .review-button-row { text-align: center; background: #535233;}

Top
Sun, 12/20/2009 - 18:25
#9 View page
cookiesunshinex
cookiesunshinex's picture
Offline
Joined: 10/14/2009
Juice: 127
Re: Re: Cart checkout review style code

Actually, the problem is nothing to do with this CSS/Code snippet.

It happens in uc core out of the box without any modifications.

The cart contents line and the "back" and "submit order" buttons are both left justified.

Top
Sun, 01/24/2010 - 14:11
#10 View page
syndicateStorm
syndicateStorm's picture
Offline
Joined: 09/02/2009
Juice: 4
Re: Cart checkout review style code

Thank you so much. I really needed to theme the review page and was glad to see someone already did the work for me Smiling. I've attached my interpretation of what you've done, in case it's of any use to anyone else.

AttachmentSize
order_review.zip 1002 bytes
Top
Wed, 01/27/2010 - 07:57
#11 View page
bwv
bwv's picture
Offline
Uber DonorBug FinderEarly adopter... addicted to alphas.Spreading the word - Ubercart for president.
Joined: 08/07/2007
Juice: 417
Re: Re: Cart checkout review style code

Glad to know that it worked for you! regards

http://classicvinyl.com

Top
Mon, 08/02/2010 - 20:12
#12 View page
texanontour
texanontour's picture
Offline
Joined: 08/01/2010
Juice: 5
What about changing the whole look and feel?

I have a client who wants a completely re-worked layout of the Checkout Review page, but I can't find a way to get to it before the final rendering. I've tried hook_form_alter, hook_nodeapi, and even the form pre_render function.

Can you tell me how to modify or replace the HTML that is rendered for the Checkout Review page?

TIA

Top
Mon, 03/07/2011 - 10:45
#13 View page
bunset
bunset's picture
Offline
Joined: 03/06/2011
Juice: 33
Need to modify some data for Checkout Review page

I am needing to modify it too and I dont know where to modify and what.
See atachment please, I need to delete the word Adress in billing information area, too add the order comment.
Some tip is very welcome.
Thanks.

AttachmentSize
cart-checkout-review page.png 29.33 KB
Top