osCommerce buttons in 2.3 (aka rc3)

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!

6 Replies to “osCommerce buttons in 2.3 (aka rc3)”

  1. 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. 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. 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. Hi Kevin – other way around. Nuke your old website, replace with osCommerce. osCommerce becomes your defacto website…

Leave a Reply

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