First, open this web page in your browser: http://jqueryui.com/themeroller/. ThemeRoller is the theme system that osCommerce uses to generate the headings, boxes, and buttons on your store page. osCommerce 2.3.1 comes with one of these stock themes already installed. It's called "redmond." I'm going to show you how to change that theme without hacking code or learning CSS.
There are three ways to get new themes:
- Download an existing theme from ThemeRoller.
- Modify an existing ThemeRoller theme.
- Create a new theme right on your store.
1. Using an Stock ThemeRoller Theme
You have that ThemeRoller page open, right? The black box on the upper left side of the page is the ThemeRoller control box. The rest of the page shows what the various page elements look like with the theme applied. To use a stock theme:
- Click on the Gallery tab at the top of the box. The available themes will appear below the tab.
- Click on one of the theme calendar page images to select it. I'm going to use the Le Frog template as an example. Feel free to select a different template if you wish. Note that the rest of that page changes to match the theme you selected.
- Click on the Download button under your selected theme. This brings up the Downloads page with your template selected.
- Check that all of the checkboxes in the middle of the page are selected. The core osCommerce distribution doesn't need all of these, but some Addons might.
- Check that the Version setting in the right side box is 1.8.x. Note: Minor version changes have been changing the last digit of this number. I'll have more to say about this later.
- Click on the Downloads button in the right side box. Save the file in a location of your choice.
- Open the directory where you have saved the downloaded theme. You should have a file named jquery-ui-1.8.7.custom.zip. Again, the last digit of the version number may be different.
- Use your unzip/unpack/archive program to extract the Zip file.
- You should now have a directory with the same name as the above file. Open that directory.
- Now open the directory named development-bundle inside it.
- Now open the directory named themes inside that.
- You should now have two directories: One named base and one named after your theme. In our example the directory is named le-frog.
- Open the le-frog directory (or whatever your directory is named) and look for a file named jquery-ui-1.8.7.custom.css. Change the name of that file to jquery-ui-1.8.6.css. Note: In some cases that file may already be named jquery-ui-1.8.7.css, in which case you have less to change. Again, the last digit of the number may be different.
- Copy the le-frog (or whatever yours is named) directory in its entirety into the catalog/ext/jquery/ui/ directory on your server. Copy the entire directory with all of its files and subdirectory structure intact.
- If you have Theme Switcher installed, do the following:
- Log into your store's Admin panel, click Modules in the left column, then click Header Tags.
- Click the Install button in the upper right.
- Find the Theme Switcher module in the list and click to highlight it.
- Click the Install button to install the module.
- Click the Edit button to edit the theme selection.
- Click the pulldown menu labeled Theme and select your new theme by name.
- Click Save.
- If you don't have Theme Switcher, do the following:
- Download and open this file in your text/code editor: catalog/includes/template_top.php
- Find this text on Line 29:
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6.css" />
- Replace the word redmond in that text with the name of your theme. Using my example of the Le Frog theme, that line becomes:
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/le-frog/jquery-ui-1.8.6.css" />
- Click Save and upload the file to your server.
- Open the catalog side of your store (or refresh the page if you have it open already) and admire your new theme.
- Repeat as many times as you like. You can never have too many themes.
2. Creating a Custom ThemeRoller Theme
Go back to the ThemeRoller page we mentioned above. Note that all of the themes have an Edit button below the calendar image. While you certainly can create a theme entirely from scratch, it's usually easier to start with something similar and make changes.
- Find a theme that you want to modify and click the Edit button under the calender image.
- You now have a list of menu items that represent each quantity that can be changed. Most of these are self-explanatory, so go play with them and watch what happens on the page. Note: Round corners do not show in Internet Explorer due to an IE bug. I recommend that you use Firefox to create your theme.
- When you are finished making changes, click the Download theme button.
- Continue with steps 4 - 18 in Part 1 above. Note: ThemeRoller always uses the same filename for the download, so change the name or put it in a different directory. Also, the theme directory (step 12 above) is always named custom-theme. I suggest that you change it to something more descriptive. No, don't call it le-frog. Or redmond.
3. Creating a Custom Theme Using Your Store
The above method works, but the page you're designing on doesn't really look like an osCommerce page. Now there's a better way to make a theme. You can make the same changes right on your store and see exactly what it will look like before you save the theme.
- Open this page in Firefox: http://jqueryui.com/.../developertool/ No, you can't use some other browser. Get Firefox and install it if you don't have it. It's going to be worth it.
- Drag the link named ThemeRoller Dev Tool from that page into your Bookmarks toolbar. That's the toolbar just above the tabs. If you've turned this toolbar off, go turn it back on.
- Now open your site's front page in Firefox. You can use another page if you want to, but the front page is usually the best example.
- Click on that ThemeRoller Dev Tool in the bookmarks toolbar. You now have the ThemeRoller control panel on your storefront. Drag it out of the way if it's blocking something important.
- Make theme changes and watch the effect on your store's theme. When you have that page looking like you want, download the theme and proceed with steps 4-18 in part 1 above.