osCommerce buttons in 2.3 (aka rc3)

By | September 20, 2010

You might have noticed the cool new buttons that are pre-installed in the new version of osCommerce. These are powered by javascript (using jquery) – the default theme looks like this:

You can see that some buttons are plain (add to cart button in the image), and some are bold (write a review). With javascript turned off, they degrade nicely and look like this:

How to change the look of the buttons?

These LOOK of these buttons is controlled by .css – the css file for the default buttons is: /ext/jquery/ui/redmond/jquery-ui-1.8.4.css – you can change this file to suit your design.

For example, let’s say I want buttons with square corners…I’d open that .css file and find this line of code: /* Corner radius */ and remove the 9 or so lines of code underneath it. Save the file and upload. Now the buttons are square:

How about if I want them with a black border?…open up the css file again and find this lines of code:

[php].ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #c5dbec; background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #2e6e9e; }[/php]

Change it to:

[php].ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #000; background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #2e6e9e; }[/php]

And we end up with this:

So, you can go off and play with the .css file to get the look you need.

OR…

You can shortcut this! At the top of the .css file is a link to enable you to play with an online generator…here is a tinyurl link to the generator. Have a play with it.

I also found that it is ultra simple to entirely change the theme of your buttons, go to the jquery themeroller site and press the gallery tab button. You’ll see this;

You can see pre-made themes ready for download. I like the green “le-frog” theme, so I downloaded it and unzipped it. I then found the /le-frog/ folder (in the /css/ folder) and copied that to the same location as the /redmond/ folder (/ext/jquery/ui/).

And I made a note of this themes .css filename:

In this case, jquery-ui-1.8.5.custom.css

Then I opened up /includes/template_top.php and found this line of code:

[php][/php]

and changed it to:

[php][/php]

Saved the file and refreshed my osCommerce site. Now the buttons are green!

How simple is that? Well, fairly. Enjoy the new osCommerce!

Category: RC3

6 thoughts on “osCommerce buttons in 2.3 (aka rc3)

  1. Kevin C.

    Hello–Need some assistance. I will be adding a customer template and need to know how to link the buttons on the template w/my website.
    Been on forums.oscommerce and it’s a difficult search. Any articles/answers that could be given would be greatly appreciated.
    Kevin
    Here is the template location:

    http://173.201.18.58/osc/coffee/

    Thanks, Kevin

  2. Gary Post author

    Hi Kevin. osCommerce becomes your website, so you insert your products etc, set up modules, tax and so on and the buttons all work automatically.

  3. Kevin

    Hi Gary;
    Thanks for the response. I am using osCommerce as my shopping cart, and have make my own site via the program serif. My website is the above url. OsCommerce portion is this: http://www.zionroasters.com/store.
    Since they are two (2) different entities, I believe that I’ll need to
    link the buttons from the cart to the site.
    Kevin

  4. Gary Post author

    Hi Kevin – other way around. Nuke your old website, replace with osCommerce. osCommerce becomes your defacto website…

  5. Frank

    Thank you for this little tutorial. It’s helped me out a lot.

    Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *