Style Checkout

Editor
Feb 17, 2010 at 6:02 AM

Hi guys me again...

I am trying to style the checkout, I can see some items hav classes these are easy to style but the others dont, I wondered which ASCX file needs to be changed to style, is it checkout.ascx?

 

Thanks

 

Coordinator
Feb 17, 2010 at 7:24 AM
Edited Feb 17, 2010 at 7:25 AM

Hi Brad,

Yep, that's the correct file. The best way to do it is to wrap the entire content from the asp:panel in line 5 down to the end, in a div with a class of your own. Then it's a straightforward matter to target individual items by way of descendant selectors.

So for example, say my surrounding class for that module is .Checkout (which mine actually is) then I can style items within using something like this example for styling the quantity field:

.Checkout input[type="text"]{text-align:center;border:none}

Or this for styling the labels:

.Checkout label{font-weight:normal}

There may be some cases where you need to give an element a class of its own, but generally you can use selectors to target anything. The point of putting a special div with class around each module is so that you can more easily have different styles e.g. differnet button styles in different parts of the store and site.

Here's an excellent article on the matter.

Note of course that the entire checkout will eventually be redone, possibly even templated, but not soon.

Rob

 

Editor
Feb 17, 2010 at 7:37 AM

Rob your a true champion!