New Post: Checkout templates

This is all you need to know...

This is the CSS I've pointed you to:

/ Buttons /
a.Button,a.Button:link{font-size:12px;font-weight:bold;text-decoration:none !important;padding:0;margin-right:12px;margin-bottom:12px;display:inline-block;text-align:center}

/ Button width and height /
a.Button{line-height:30px;width:128px}
a.BuyButton{width:60px}
.WayOut a.Button{width:80px}

/ Button colours /
a.Button,a.Button:link{color:#444;border:1px solid #CCC;background-image:none !important}/ This is for flat square buttons /
/ a.Button,a.Button:link{color:#444;border:1px solid #B7B7B7;border-radius:5px;} - This is for glossy round buttons /
a.Button{background:#DDD url('/DesktopModules/NB_Store/img/GlossyButtons.png') repeat-x}
a.Button:hover{border:1px solid #CCC;background:#EEE url('/DesktopModules/NB_Store/img/GlossyButtons.png') repeat-x}
a.Checkout,a.ContinueOrder{color:#FFF !important;background:#1A1A1A url('/DesktopModules/NB_Store/img/GlossyButtons.png') repeat-x}
a.Checkout:hover,a.ContinueOrder:hover{background:#3C485B url('/DesktopModules/NB_Store/img/GlossyButtons.png') repeat-x}
a.CancelOrder:link{border:1px solid #BC0000}
a.CancelOrder:hover{color:#FFF;background:#BC0000 url('/DesktopModules/NB_Store/img/GlossyButtons.png') repeat-x}
a.BuyButton{}
a.RemoveWishList{}
a.AddWishList{}
a.ViewWishList{}
a.ViewPrevious{}
a.ViewStorefront{}
a.Checkout{}
a.Recalculate{margin-right:0 !important}
a.ContinueShopping{}
a.ContinueOrder{}
a.ReturnPrevious{}
a.CancelOrder{margin-left:12px}



And as an example, this is a style to recolour the Buy button, that you can put in your skin.css:

a.BuyButton:link{background:red;color:white !important}


Regarding the use of DNN default classes - They are intended for administrative purposes and not meant for front end interfaces because the skin designer otherwise messes up the DNN admin when they are trying to change the front end.

Therefore, whilst the Back Office uses DNN buttons, the customer facing interface does not.

p.s. Note that the store CSS changed from glossy rounded buttons to flat square ones a couple of releases back. However the styling for the glossy buttons is still in there but commented out - in case someone still wanted to use it.