Affordable end to end oscommerce solutions with
Search Engine Optimization

Email : osCommerceCoders@gmail.com
Call : +1 818-574-3596 (USA) / +44 (020) 8123-6463 (UK)

Archive for the ‘osCommerce Design’ Category

Basics for Design – osCommerce V2.3+

Since the new 2.3+ version of osCommerce have some major design related differences to the older versions, we have made this new updated basics for osCommerce design topic.

Changing the shop logo
In the store admin under Configuration >> Store Logo you can upland your own logo.

Changing boxes, right and left columns
In the store admin under Modules >> Boxes you can control which boxes to show and if they should be shown in the right or the left column. If you place all the wanted boxes in just 1 column, only that column will show and the site content will automatically fill the rest of the width.

The main files for design changes are:
1. includes/template_top.php
2. includes/template_bottom.php
3. stylesheet.css
In some cases you might find a need to edit these 2 files.
– includes/header.php
– includes/footer.php

2.3+ design is DIV/CSS based and also uses to “standardized” systems Grid960 and jQuery UI. Grid960 is basically what controls the structure/layout of the webshop. The files are located here: ext/960gs/ You can find more information about the 960 Grid System CSS Framework at www.960.gs jQuery UI controls buttons, boxes, listings ++ The files are located here: ext/jquery/ui/ You can find information, download new themes or create your own themes at www.jqueryui.com

First, we need to open this web page in the 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.”

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

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: o 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. o 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:
Replace the word redmond in that text with the name of your theme. Using my example of the Le Frog theme, that line becomes:
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

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

Open this page in Firefox: http://jqueryui.com/themeroller/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.