OSC 2.3.1 Changing Colors

[pctechguy2010]

I just installed OSC 2.3.1 and I have been trying to change to the default blue colors to another color however editing the stylesheet.css seems to the stylesheet.css which has no effect. I have tried searching but everyone keeps referring to this I make changes but nothing changes.

 

What am I doing wrong ?

[Guest]

The blue as in the background of the infobox header is an image and located in ext/jquery/ui/redmond/images/ui-bg_gloss-wave_55_5c9ccc_5.png

 

If you view the source of the page you will find it is <div class="ui-widget-header infoBoxHeading">. If you do a site search for "ui-widget-header" it will find the file ext/jquery/ui/redmond/jquery-ui-1.8.6.css which is the CSS file that has the info that you are looking for.

[♥kymation]

Or you could use Themeroller to design the look of your site, then just drop in the new theme.

 

Regards

Jim

[pctechguy2010]

The blue as in the background of the infobox header is an image and located in ext/jquery/ui/redmond/images/ui-bg_gloss-wave_55_5c9ccc_5.png

 

If you view the source of the page you will find it is <div class="ui-widget-header infoBoxHeading">. If you do a site search for "ui-widget-header" it will find the file ext/jquery/ui/redmond/jquery-ui-1.8.6.css which is the CSS file that has the info that you are looking for.

 

 

Thank You very much... this was driving me nuts.. Do you know how to change the color of the cart contents, checkout and my account icons ?

 

Also is their any easy way to reskin this or something for a more professional look ? I don't really know much about css

[pctechguy2010]

Or you could use Themeroller to design the look of your site, then just drop in the new theme.

 

Regards

Jim

 

 

I looked at themeroller it is completely over my head I have no idea where to even start or what to do... the manual wasn't much help either.

[♥kymation]

We need instructions for using Themeroller. I'm working on a custom theme right now. It's not that bad once you figure out how the elements are used in osCommerce. Maybe I can find some time to write a guide to using it.

 

Regards

Jim

[spoofy]

Using a new theme is very easy. All you really have to do is download the new theme from themeroller (jqueryui.com)

 

Create a new directory in ext/jquery/ui/

 

Drop in the css in that directory.

 

Simply change directory and the name of the css file in template_top.php and that's it.

[♥altoid]

Using a new theme is very easy. All you really have to do is download the new theme from themeroller (jqueryui.com)

 

Create a new directory in ext/jquery/ui/

 

Drop in the css in that directory.

 

Simply change directory and the name of the css file in template_top.php and that's it.

 

Thanks, that was relatively easy. In template_top.php I see this code:

 

<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.6.min.js"></script>

 

I see over on the jQuery website they have the 1.8.7 as the most recent version, if I read that correctly? At what point would upgrading that .js script be an issue? 1.8.6 did work with the template I downloaded though.

 

Thanks

[♥kymation]

Some people have reported problems using version 1.8.7 themes with the 1.8.6 UI script. It's probably best to keep the versions the same.

 

Some themes also use images, so you should copy the entire folder, not just the CSS file. More complete instructions on using ThemeRoller are in the Theme Switcher Addon package.

 

Regards

Jim

[♥altoid]

Some people have reported problems using version 1.8.7 themes with the 1.8.6 UI script. It's probably best to keep the versions the same.

 

Some themes also use images, so you should copy the entire folder, not just the CSS file. More complete instructions on using ThemeRoller are in the Theme Switcher Addon package.

 

Regards

Jim

 

Hi Jim, I did copy the entire folder, for example I chose the sunny template and within the sunny folder was the css and the images folder. So they're both on my site now, with the sunny folder.

 

Bear with me but this is new to me, but all I could download the jQuery site was the 1.8.7 version, I didn't see a choice to download the 1.8.6 version.

 

It is working OK from what I see. I clicked around on the site and all pages seemed to display correctly.

 

This ability in 2.3.1 to modify a store's theme so easily is great.

 

Thanks for the input.

[♥kymation]

Yes, you would have to replace your copy of catalog/ext/jquery/ui/jquery-ui-1.8.6.min.js with a copy of jquery-ui-1.8.7.min.js downloaded from the Jquery UI site. This is only necessary if you are having problems with your theme. If it works for you, don't change it.

 

Regards

Jim

[catalano]

I was following this thread and I tried using the 'blitzer' theme. I downloaded that and moved the 'blitzer' folder to the same directory as the 'redmond' folder. However, the css file in the blitzer folder is 1.8.7. So in addition to changing the folder name in the template_top.php I also change the 1.8.6 to 1.8.7. The end result was that the site lost pretty much all of the formatting. I noticed in the blitzer download that there was also a 'js' folder and a 'development-bundle' folder. Should I have moved any of these other files over as well?

 

Thanks.

[♥kymation]

If you want to change everything to 1.8.7, you also need to download and install the 1.8.7 version of the jquery-ui.min.js / jquery-ui-1.8.6.min.js. To avoid all of that, just rename the CSS file in your new theme to jquery-ui-1.8.6.css and leave the rest alone.

 

Regards

Jim

[catalano]

I'm just trying to implement a different theme. So I'm not sure if I'm supposed to upgrade to 1.8.7 or not. But I did change the name of the css file in the blitzer folder to 1.8.6 as you suggested and then simply changed the line in template_top.php to ' <link rel="stylesheet" type="text/css" href="ext/jquery/ui/blitzer/jquery-ui-1.8.6.css" />' and I have the same result; no formatting at all in the store. So something is still not quite right.

 

Thanks,

Chris

 

If you want to change everything to 1.8.7, you also need to download and install the 1.8.7 version of the jquery-ui.min.js / jquery-ui-1.8.6.min.js. To avoid all of that, just rename the CSS file in your new theme to jquery-ui-1.8.6.css and leave the rest alone.

 

Regards

Jim

[♥kymation]

The filenames have to match exactly. Is your Blitzer file named jquery-ui-1.8.6.css?

 

Regards

Jim

[catalano]

Yes, here's what my directory looks like: (I had changed the name of the css file to 1.8.6 as instructed)

 

And here's the part of template_top.php that I change. I'm just changing that first line from 'redmond' to 'blitzer'.

 

<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6.css" />

<script type="text/javascript" src="ext/jquery/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.6.min.js"></script>

The filenames have to match exactly. Is your Blitzer file named jquery-ui-1.8.6.css?

 

Regards

Jim

[♥kymation]

That image shows that your blitzer jquery-ui-1.8.6.css is only 1KB. That's way too small for that file. Compare the same thing in the redmond directory at 33KB. Your blitzer file is probably corrupted. Try reloading that file.

 

Regards

Jim

[catalano]

Good catch, Jim. Funny thing, I immediately re-uploaded it using the desktop feature of Transmit and it was 1kb again. So then I launched the full Transmit application and uploaded it again and it was the proper size. Very strange. But now it's working...

 

Thanks for your help. Now to solve my admin login problem on a different osc site.....

 

 

That image shows that your blitzer jquery-ui-1.8.6.css is only 1KB. That's way too small for that file. Compare the same thing in the redmond directory at 33KB. Your blitzer file is probably corrupted. Try reloading that file.

 

Regards

Jim

[npn2531]

A better way around the whole issue is instead of loading the JQuery file into your website, simply reference it from Google API.

http://code.google.com/apis/libraries/devguide.html#jqueryUI

 

Use this in your <head>

<script type="text/javascript" src=" '.(isset($_SERVER['HTTPS']) && (strtolower($_SERVER['HTTPS']) == 'on') ? 'https://' : 'http://') . 'ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src=" '.(isset($_SERVER['HTTPS']) && (strtolower($_SERVER['HTTPS']) == 'on') ? 'https://' : 'http://') . 'ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

 

That way when you want to upgrade from 1.8.6 simply change the '6' to a '7' in the reference above.

 

Using Google API dramatically speeds up your page load time for several reasons:

 

The JQuery files are most likely the largest file on each page load. 1) Google delivers the file compressed. 2) Also since so many websites use these files, these files are probably already loaded in your customers browsers cache. Browsers will recognize the Google API reference above and thus look for the same file in the customers browsers cache and if it is there use it, eliminating the download issue altogether. Browsers will not match up the JQuery file loaded in your OSCommerce shop with the same file from Google in your browsers cache. 3) Your Browser will download up to 6 files concurrently from any one source. Since by referencing these two files from another source other than the server your website is on, the customers browser can now download 8 files concurrently, and thus load the page faster.

[jtmajor]

Hi,

 

I have tried the following and it has not worked for me. Here are the steps I took:

 

My current version of jquery is jquery-ui-1.8.6.min.js located in the ext/jquery/ui directory.

 

1) Downloaded theme Sunny from www.jqueryui.com. Theme version is 1.8.10 (stable, for jquery 1.3.2+)

2) Set the Sunny theme directory in ext/jquery/ui/sunny. This directory contains the jquery-ui-1.8.10.custom.css file along with an images folder.

3) Changed the /catalog/admin/includes/template_top.php to refer to the jquery-ui-1.8.10.custom.css file.

 

After this I loaded the website. Nothing has changed from the standard OSCommerce 2.3.1. What could be the reason that the theme was not implemented? Thanks in advance for your help.

 

JTM