Style buttons on Checkout page

Nov 6, 2009 at 12:10 AM

Hi there,

Im trying to style the BACK, NEXT, & CANCEL ORDER buttons to images. What is the best way to do this?

I noticed a post from Lee back in Feb below: is this still the case, or is there a cleaner way?

2) The element you've mentions, I've put a class on the admin button in version beta2a,  On my computer I've got version beta2b with cssclass attached to the buttons you've mentioned, I've got this version testing on two sites at the moment I hope to do a release soon.

Nov 6, 2009 at 1:07 AM

Are you familiar with usign the DNN language editor, or directly creating your own replacement items in the language resource files?

If you are, then you can create new entries in CheckOut.ascx.resx (copy that file to CheckOut.ascx.Portal-XX.resx first - where XX = Portal number) and instead of using text for those button labels, use some HTML.

I have, for example, just replaced the "Buy" label in one of my carts with a graphic using this - by way of Visual studio:

<img class="AddToBasket" src="/Portals/40/AddToBasket.png" width="123" height="29" border="0" />

Or, if you are editing the resource file directly in notepad, you'd use this:

  <data name="BuyText.Text" xml:space="preserve">
    <value>&lt;img class="AddToBasket" src="/Portals/40/AddToBasket.png" width="123" height="29" border="0" /&gt;</value>

Obviously you'd need to change that example as you see fit. This the normal way to do this in DNN and NB Store is the same. If you're not familiar with it, then this is a good time to start. Refer to this post I made once.

You might on some occasions find you need to use it like this example I have done for another module - note the <!CDATA[...]]> bits:

<data name="Previous.Text">
<value><![CDATA[<img src="/DesktopModules/SimpleGallery/images/WW-prev.png">]]></value>

I'm not entirely sure when the CDATA bits are needed and when not, but for some reason NB Store specifically does not need it. I presume it has something to do with the way the data is referenced.

Or you can try applying background images to the buttons using straight CSS and the classes that they now have. You might however find that you have to hide the text labels at the same time.

Hope that helps