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!