Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

OSC 2.3.1 Changing Colors


pctechguy2010

Recommended Posts

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 ?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...

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

I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Link to comment
Share on other sites

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

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

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.

I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Link to comment
Share on other sites

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

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

screenshot.jpg

 

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

Link to comment
Share on other sites

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

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...