Jump to content



Photo
* * * * * 2 votes

Designing New Themes the Easy Way


This topic has been archived. This means that you cannot reply to this topic.
66 replies to this topic

#1   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 8,340 posts

Posted 09 January 2011 - 22:40

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:

  • 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.

Regards
Jim

My Addons

Banners Box Download Support
Categories Accordion Box Download Support
Closest Shipper 2.2x Support
Document Manager 2.2x Support
Generic Box Download Support
Get 1 Free 2.2x Support
Modular Front Page Download Support
Modular SEO Header Tags Download Support
MVS 2.2x Support
PDF Datasheet Download Support
Price in Cart Only/MAPP Download Support
Price Updater 2.2x
Products Specifications 2.3.x Development Version Support Bugs/Suggestions
Request a Review Download Support
Shopping List Download Support New!
Specials Image Overlay Download Support
Superfish Categories Box Download Support
Theme Switcher 2.3+ Support  Updated


#2   nataliewei

nataliewei
  • Members
  • 2 posts

Posted 14 February 2011 - 06:07

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

Nat

#3   chepnut

chepnut
  • Members
  • 1 posts

Posted 18 February 2011 - 19:49

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

#4   linkfm

linkfm
  • Members
  • 11 posts

Posted 21 February 2011 - 16:37

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.

#5   Juzzyman

Juzzyman
  • Members
  • 73 posts

Posted 28 February 2011 - 23:35

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?

#6   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 8,340 posts

Posted 01 March 2011 - 00:10

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

My Addons

Banners Box Download Support
Categories Accordion Box Download Support
Closest Shipper 2.2x Support
Document Manager 2.2x Support
Generic Box Download Support
Get 1 Free 2.2x Support
Modular Front Page Download Support
Modular SEO Header Tags Download Support
MVS 2.2x Support
PDF Datasheet Download Support
Price in Cart Only/MAPP Download Support
Price Updater 2.2x
Products Specifications 2.3.x Development Version Support Bugs/Suggestions
Request a Review Download Support
Shopping List Download Support New!
Specials Image Overlay Download Support
Superfish Categories Box Download Support
Theme Switcher 2.3+ Support  Updated


#7   Juzzyman

Juzzyman
  • Members
  • 73 posts

Posted 01 March 2011 - 03:08

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

#8   JLewis

JLewis
  • Members
  • 84 posts

Posted 03 March 2011 - 07:34

Thanks Jim for sharing that.
Driving Lorry £500.00 per week – Website design £0.00 per week – Website Sales £0.00 per week – Continuing to learn html & css Priceless

#9   Juzzyman

Juzzyman
  • Members
  • 73 posts

Posted 03 March 2011 - 16:54

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:

  • 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.

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?

#10   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 8,340 posts

Posted 03 March 2011 - 17:10

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


My Addons

Banners Box Download Support
Categories Accordion Box Download Support
Closest Shipper 2.2x Support
Document Manager 2.2x Support
Generic Box Download Support
Get 1 Free 2.2x Support
Modular Front Page Download Support
Modular SEO Header Tags Download Support
MVS 2.2x Support
PDF Datasheet Download Support
Price in Cart Only/MAPP Download Support
Price Updater 2.2x
Products Specifications 2.3.x Development Version Support Bugs/Suggestions
Request a Review Download Support
Shopping List Download Support New!
Specials Image Overlay Download Support
Superfish Categories Box Download Support
Theme Switcher 2.3+ Support  Updated


#11   nataliewei

nataliewei
  • Members
  • 2 posts

Posted 11 March 2011 - 11:20

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

#12   kymation

kymation

    Code Monkey

  • Community Sponsor
  • 8,340 posts

Posted 11 March 2011 - 16:56

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


My Addons

Banners Box Download Support
Categories Accordion Box Download Support
Closest Shipper 2.2x Support
Document Manager 2.2x Support
Generic Box Download Support
Get 1 Free 2.2x Support
Modular Front Page Download Support
Modular SEO Header Tags Download Support
MVS 2.2x Support
PDF Datasheet Download Support
Price in Cart Only/MAPP Download Support
Price Updater 2.2x
Products Specifications 2.3.x Development Version Support Bugs/Suggestions
Request a Review Download Support
Shopping List Download Support New!
Specials Image Overlay Download Support
Superfish Categories Box Download Support
Theme Switcher 2.3+ Support  Updated


#13   rabon33

rabon33
  • Members
  • 106 posts

Posted 12 March 2011 - 15:54

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???...

Edited by rabon33, 12 March 2011 - 16:01.


#14   catch

catch
  • Members
  • 78 posts

Posted 13 March 2011 - 15:32

Thanks for the guide! :-)

#15   marretjeca

marretjeca
  • Members
  • 25 posts

Posted 17 March 2011 - 19:16

Thanks for this guide, very helpful /smile.gif' class='bbc_emoticon' alt=':)' />

#16   jhande

jhande
  • Members
  • 2,236 posts

Posted 25 March 2011 - 23:19

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

Regards
Jim


Gesh people... /huh.gif' class='bbc_emoticon' alt=':huh:' />

Thanks Jim for the guide info. /thumbsup.gif' class='bbc_emoticon' alt=':thumbsup:' />
- :: Jim :: -
- My Toolbox ~ Adobe Web Bundle, XAMPP & WinMerge | Install ~ osC v2.3.3.4 -

#17   brianabrando

brianabrando
  • Members
  • 2 posts

Posted 28 March 2011 - 12:49

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

#18   konradgerats

konradgerats
  • Members
  • 7 posts

Posted 09 April 2011 - 12:04

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.

#19   happyartsupplies

happyartsupplies
  • Members
  • 58 posts

Posted 08 May 2011 - 06:24

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

Thanxx to such wonderfull people who assist us!! /smile.gif' class='bbc_emoticon' alt=':)' /> /tongue.gif' class='bbc_emoticon' alt=':P' /> /biggrin.gif' class='bbc_emoticon' alt=':D' />

#20   ivlcenter

ivlcenter
  • Members
  • 1 posts

Posted 08 September 2011 - 10:59

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.

Edited by Jan Zonjee, 08 September 2011 - 16:05.