41 replies to this topic

[kymation]

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]

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

[jpweber]

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]

kymation, on 09 January 2011, 22:40, said:

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

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.

[kozak]

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

[Ninety-one Maro]

Ok, I following the instructions, except for the part that states:

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.

Mine was actually located in: /ext/jquery/ui/.

But I found it anyways. Got everything loaded on the server, but when I edited the actual /template_top.php file, and refreshed my web site, all of the items that I wanted changed, just vanished. No bars or anything. Although it looks different, it didn't load the temp like it should have.

What could I have done wrong?
There is only a few more things I need to do to the web site, and it will be fully up and running.

Great step by step procedures, just wished mine worked.

[Ninety-one Maro]

Got mine working. Thanks. Makes a lot more sense now, I screwed up the code, lol.

[dgriff]

Great post. Option 1 and 2 work well. I have trouble with option 3 where I click and drag the themeroller development tool into my firefox bookmark toolbar. When I open up my site and try to use the themeroller panel to see the instant changes to my site....... but I don't see any instant changes. Is the themeroller development tool not working?
Thanks

[kymation]

The Themeroller Bookmarklet has been broken for a very long time. I've provided a set of working files in the Theme Switcher Addon package. You don't have to install Theme Switcher to use the Bookmarklet files; just upload the catalog/developertool.js.php and catalog/developertool.php files, open developertool.php in your browser, and follow the instructions.

Regards
Jim

[shawnpmackey]

I have been reading thorugh this thread trying to figure out how to add the theme switcher so I can change my client's theme; however, I find much conflicting information. I downloaded Theme Switcher using the above link and there is only one file called theme_switcher_1.3.tar which is a gz file. In later portions of this thread, it says there are three files to be loaded, but there is none.

I tried the theme roller dev tool, but alas that is broken. There must be an easier way to change the themes for people who aren't coders. How is this accomplished?

[peterpetranin]

@kozak yes i have similar problem, install a theme. My admin saying that there are 4 additional modules to install, but when i click on them- there are only 3

@kymation where can we finf developertools.php files??

[kymation]

@shawnpmackey Your archive program is defective, or you need to take another step to unpack the .tar file. All of the files you need are in there.

@peterpetranin The developertools files are in the archive, in the catalog directory.

Regards
Jim

[shawnpmackey]

I didn't have to unzip anything. When I clicked the theme switcher link and downloaded theme switcher that is all I got

[shawnpmackey]

Every thing I download from this page http://addons.oscommerce.com/info/7663 there is only one file.

[kozak]

The problem of many addons is that they are not compactible with other adons.
First I read the supportpage of the addon, then i deside if i gone give it a try or not.
Then i install the new addon in a clean catalog, if it works and i find it usefull i try to install it in a shop with other addons.
Sometimes i'm lucky but many times some parts af the shop dont work anymore or in worst case the shop is F.U.
The addons based on their own php files are the best, then those you have to ADD code, but when it starts to changing code you start the HELL.

It should be nice if we know everything before we start to spend time for nothing

Grtz

[peterpetranin]

@kymation thanks yes they are there, i just did not have the oldest version of theme switcher

[peterpetranin]

<p>@kymation thanks,  jQuery UI Theme Roller Developer tool works perfectly, but it doesnt sort out problem with the boxes. I mean i would like to change a look of boxes, do not want theme square and stuck one underneath other.</p>
<p>Any add on for that?</p>
<p>Anybody?</p>
<p> </p>
<h1>
 </h1>

[kymation]

You can change the styling with CSS. The boxes have an ID of #columnLeft or #columnRight. I use Firebug in Firefox to show the current styles attached to each element, and change them from there.

Regards
Jim

[joli1811]

The firefox themeroller bookmarklet does not update the html page when changing theme colors
Hi,
Found the fix for the themeroller bookmarklet. This post on http://forum.jquery.com. ( http://forum.jquery.com/topic/the-firefox-themeroller-bookmarklet-does-not-update-the-html-page-when-changing-theme-colors)

Right click on the ThemeRoller Dev Tool Themeroller Bookmarklet go to properties and under Location: change the link to this.....


javascript:(function(){if(!/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){alert("Sorry,%20due%20to%20security%20restrictions,%20this%20tool%20only%20works%20in%20Firefox");return%20false}else{if(window.jquitr){jquitr.addThemeRoller()}else{jquitr={};jquitr.s=document.createElement("script");jquitr.s.src="http://jqueryui.com/themeroller/developertool/developertool.js.php";document.getElementsByTagName("head")[0].appendChild(jquitr.s);var%20a=function(){jquitr.reloadCSS=function(){var%20c=jquitr.getHash(),b;if(jquitr.trString!==c&&c!==""){jquitr.trString=c;b='<link%20href="http://jqueryui.com/themeroller/css/parseTheme.css.php?'+c+'"%20type="text/css"%20rel="Stylesheet"%20/>';if($("link[href*='parseTheme.css.php'],%20link[href='ui.theme.css']").size()>0){$("link[href*='parseTheme.css.php']:last,%20link[href='ui.theme.css']:last").eq(0).after( }else{$("head").append( }if($("link[href*='parseTheme.css.php']").size()>3){$("link[href*='parseTheme.css.php']:first").remove()}}window.setTimeout(jquitr.reloadCSS,1000)};jquitr.reloadCSS()};window.setTimeout(a,1100)}}})();

works for me.
Regards
John

Edited by joli1811, 15 April 2012, 22:12.

[vmf08034]

IS there anything like sts for version 2.3??