Designing New Themes the Easy Way

[♥kymation 631]

I originally wrote this for the Theme Switcher instructions. While Theme Switcher is a good way to manage themes, it's not essential to the process. The important part here is generating a new theme in the first place. I see too many people trying to hack the CSS by hand. There is a much easier solution. Here's how:

 

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.
  

We're going to cover all three of these methods. You should read all of this, since many of these steps are the same for each method and will not be repeated.

 

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:

 

1. Click on the Gallery tab at the top of the box. The available themes will appear below the tab.
   
2. 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.
   
3. Click on the Download button under your selected theme. This brings up the Downloads page with your template selected.
   
4. 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.
   
5. 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.
   
6. Click on the Downloads button in the right side box. Save the file in a location of your choice.
   
7. 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.
   
8. Use your unzip/unpack/archive program to extract the Zip file.
   
9. You should now have a directory with the same name as the above file. Open that directory.
   
10. Now open the directory named development-bundle inside it.
    
11. Now open the directory named themes inside that.
    
12. You should now have two directories: One named base and one named after your theme. In our example the directory is named le-frog.
    
13. 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.
    
14. 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.
    
15. 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.

 

1. Find a theme that you want to modify and click the Edit button under the calender image.
   
2. 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.
   
3. When you are finished making changes, click the Download theme button.
   
4. 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.

 

1. 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.
   
2. 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.
   
3. 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.
   
4. 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.
   
5. 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.
   

 

Regards

Jim

[nataliewei 0]

Jim, You're such an amazing person to relieve our headache!!!!

 

Nat

[chepnut 1]

Wow you just saved me a day and a huge headache!

[linkfm 0]

Wow you just saved me a day and a huge headache!

 

No doubt about that. Don't forget to click "+" (green icon) for kymation post.

[Juzzyman 1]

Hi there.

I followed your instructions and all that happens is that when I launch my shop page I get a blank page with "<!--[if IE]>"

 

What did I do wrong?

[♥kymation 631]

You made an error in editing a file, or you have a corrupted file. Try again.

 

BTW, this is not the place to ask questions. Ask in the general forum.

 

Regards

Jim

[Juzzyman 1]

You made an error in editing a file, or you have a corrupted file. Try again.

 

BTW, this is not the place to ask questions. Ask in the general forum.

 

Regards

Jim

 

Thanks Jim, sorry about that! New to all of this

[JLewis 4]

Thanks Jim for sharing that.

[Juzzyman 1]

I originally wrote this for the Theme Switcher instructions. While Theme Switcher is a good way to manage themes, it's not essential to the process. The important part here is generating a new theme in the first place. I see too many people trying to hack the CSS by hand. There is a much easier solution. Here's how:

 

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.
  

We're going to cover all three of these methods. You should read all of this, since many of these steps are the same for each method and will not be repeated.

 

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:

 

1. Click on the Gallery tab at the top of the box. The available themes will appear below the tab.
   
2. 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.
   
3. Click on the Download button under your selected theme. This brings up the Downloads page with your template selected.
   
4. 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.
   
5. 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.
   
6. Click on the Downloads button in the right side box. Save the file in a location of your choice.
   
7. 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.
   
8. Use your unzip/unpack/archive program to extract the Zip file.
   
9. You should now have a directory with the same name as the above file. Open that directory.
   
10. Now open the directory named development-bundle inside it.
    
11. Now open the directory named themes inside that.
    
12. You should now have two directories: One named base and one named after your theme. In our example the directory is named le-frog.
    
13. 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.
    
14. 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.
    
15. 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.

 

1. Find a theme that you want to modify and click the Edit button under the calender image.
   
2. 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.
   
3. When you are finished making changes, click the Download theme button.
   
4. 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.

 

1. 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.
   
2. 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.
   
3. 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.
   
4. 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.
   
5. 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.
   

 

Regards

Jim

 

I have followed these instructions and it all works fine. Thanks for that. However the three tabs at the top right of the page are no longer where they should be. They are now in a list form, one on top of the other. How do I fix that?

[♥kymation 631]

Tips and tricks are only allowed to be posted in this forum channel. For support, please post in another related channel in this forum.

[nataliewei 0]

Hi Jim,

 

I tried the 1st & third of your methods, but just ok with the former. When you see my page, you can see that not all the font styles are Times New roman & not all fonts are the same colors in purple as I wish. How can I do this? http://www.fancybrides.com/shop/

 

BTW, my website design is actually like this: www.fancybrides.com, any advice that how to make my eshop be the same?

 

Thanks for your help!

 

Nat

[♥kymation 631]

Tips and tricks are only allowed to be posted in this forum channel. For support, please post in another related channel in this forum.

[rabon33 3]

with all the respect that you deserve; but you should consider all the context of the paragraph.

 

Tips and tricks are only allowed to be posted in this forum channel. For support, please post in another related channel in this forum.

If you come across a post not related to a tip or trick, please report it so it can be deleted.

 

As an example of not related you could find:

 

I want to make money using oscommerce

my site is hacked, or not?

google banned my site

please help, my site is purple!

 

the aforementioned examples refer to the term not related. (ARE NOT tip or trick, nor derived comments)

 

But if you start a topic about how to cook chicken; and somebody add a comment about how much water should be added in order to get a very well cooked chicken...or asking for help about the size of the pot... !THIS IS RELATED!.

 

in practical sense, can you imaging hundred of singular new topics reffering to an only original topic... thing about it???...

[catch 0]

Thanks for the guide! :-)

[marretjeca 0]

Thanks for this guide, very helpful :)

[jhande 20]

BTW, this is not the place to ask questions. Ask in the general forum.

 

Regards

Jim

 

Gesh people... :huh:

 

Thanks Jim for the guide info. :thumbsup:

[brianabrando 0]

Thanks for sharing its really helpful for creating new themes for os commerce.

[konradgerats 0]

everything seems straight forward. you have explained it well. just 1 prob where you say "14.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.i have looked hard but cannot find this directory. could it be called something else?

hope you understand my problem.

regards konrad.

[happyartsupplies 1]

WOW

How nice 2 have someone relieve you of a problem you had for 2 months!!

 

Thanxx to such wonderfull people who assist us!! :) :P :D

[ivlcenter 0]

Hello, does anyone can tell me how I can change the color of the navigation bar, without changing the rest of infobox colors?

I want the infobox still red, but I put the black navigation bar on the breadcrumb in white.

Should I add a new style to the css jquery?

For help on something if the store is www.ivlcenter.com

Sorry for my bad English I am Spanish and thank you very much everyone.

[♥kymation 631]

For those who are still waiting for the jQuery team to fix the Themeroller Bookmarklet, I got tired of waiting and fixed it myself. This means that you can use the WYSIWYG editor on your osCommerce store, so you can see exactly what the theme will look like as you create it. The files are included in Version 1.3 release of Theme Switcher.

 

You don't need to install Theme Switcher to use the bookmarklet, as they are really separate applications. I just needed somewhere to put the files.

 

Regards

Jim

[cm27 0]

you also can use Google chrome as it has a development tool :D works really nice ... Plus all those no right click site lol you can get any image you want from them using chrome

 

:D

[jpweber 8]

Excellent post, Jim. Anyone with enough intellect to push "power-on" to start their computer could follow your instructions, since they're so well-laid out. This is definitely signature-worthy -- putting it in my signature right now.

[L.A.Willman 0]

I originally wrote this for the Theme Switcher instructions. While Theme Switcher is a good way to manage themes, it's not essential to the process. The important part here is generating a new theme in the first place. I see too many people trying to hack the CSS by hand. There is a much easier solution. Here's how:

 

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.
  

We're going to cover all three of these methods. You should read all of this, since many of these steps are the same for each method and will not be repeated.

 

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:

 

1. Click on the Gallery tab at the top of the box. The available themes will appear below the tab.
   
2. 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.
   
3. Click on the Download button under your selected theme. This brings up the Downloads page with your template selected.
   
4. 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.
   
5. 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.
   
6. Click on the Downloads button in the right side box. Save the file in a location of your choice.
   
7. 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.
   
8. Use your unzip/unpack/archive program to extract the Zip file.
   
9. You should now have a directory with the same name as the above file. Open that directory.
   
10. Now open the directory named development-bundle inside it.
    
11. Now open the directory named themes inside that.
    
12. You should now have two directories: One named base and one named after your theme. In our example the directory is named le-frog.
    
13. 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.
    
14. 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.
    
15. 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.

1. Find a theme that you want to modify and click the Edit button under the calender image.
   
2. 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.
   
3. When you are finished making changes, click the Download theme button.
   
4. 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.

 

1. 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.
   
2. 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.
   
3. 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.
   
4. 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.
   
5. 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.
   

 

Regards

Jim

 

Thanks Jim. I've been trying to find that a while. I didn't so much like the highlighting.

 

Would you know exactly where the text is found? I'm meaning the 'Cart Contents Checkout My Account' ? Presently it shows CartContentsCheckoutMyAccount, with no spacing & I'd like to make it bold.

 

I don't need anyone to code it... I just need to find where it is located, I can do the rest. Thanks.

[Melhor 4]

i start with a clean OSC 2.3.1 & copy theme switcher into. unther header tags I got 3 modules for installing ; google, mailchimp, etc.. but NO Theme Switcher !!! I did it again but got the same result. thx for help