Suggestions - Changing of Color Scheme

Print Page | Close Window

Changing of Color Scheme

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Suggestions
Forum Description: ProductCart Suggestions
URL: https://forum.productcart.com/forum_posts.asp?TID=397
Printed Date: 22-November-2024 at 10:37am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: Changing of Color Scheme

Posted By: dejacob
Subject: Changing of Color Scheme
Date Posted: 18-August-2006 at 6:35pm

It would be a nice feature to be able to change the color scheme of the shopping cart to match a current website. I know the icons can be changed, but I don't see anywhere to change the colors of the text, and the highlighted text in AJAX view (it all appears light blue). If there is a way to change this in the cart, please let me know

-------------
DEJ

Replies:

Posted By: MarkCoyle
Date Posted: 18-August-2006 at 6:53pm

I assume you mean v3 if you're talking about AJAX too. The approach to meet your requirements is set out in the v3 upgrade document which really is worth having a read of.

Every colour can be changed in ProductCart including all of the AJAX layer. It's an absolutely core part of the software. Not just colours but boxes, fonts, backgrounds, sizes, borders. spacing, padding, positioning, everything really.

You do this by modifying the CSS sheets which is the modern, standard way in internet design. By changing the CSS colours, fonts, sizes etc once the changes will flow through the store whereever needed.

To change the colours look at:
pcheaderfooter.css and pcstorefront.css
in your ProductCart folder.

To change the AJAX text modify the following:
ei-tooltip.css

You will also find in the 'images' folder a number of images in the PNG format. These are what make up the AJAX background and the colours can be fully modified in an image editor. You can see this in action at my site where I have modified them extensively.

Once modified the CSS files and PNG files need loading to your appropriate server folders.

You can see this in action at my store, which deliberately looks very different to the usual 'white background / black text' web style. Take a look at http://www.wovenwheatwhispers.com - http://www.wovenwheatwhispers.com

None of these changes are made via web pages, they are all achieved just through CSS codes. It will take a little effort but it's definitely worth it.

I hope this is helpful. Feel free to ask any questions to help finalise this.

cheers
Mark

Posted By: dejacob
Date Posted: 18-August-2006 at 7:35pm

When you use Cascading Style Sheets, are you changing them using a program such as Frontpage, etc? I used frontpage to design my site, and am having the shopping cart incorporate into the design.

-------------
DEJ

Posted By: MarkCoyle
Date Posted: 19-August-2006 at 6:31am

You can anything that can open text files to modify a css file.

Frontpage is perfectly fine for this too.

I use Frontpage too - I used to use it for the whole store but I have now moved it all into ProductCart.

The next version of Frontpage called 'Microsoft Expression - Web Design' has better visualised modification of CSS sheets and the early test version can be downloaded for free from Microsoft.

To be honest, I find Frontpage or Dreamweaver clutters the screen a bit for CSS sheets and I modify them in Wordpad now then FTP them.

cheers
Mark

Posted By: Shane
Date Posted: 21-August-2006 at 8:01pm

Hi Mark

Like what you have done with the changes. In the Ajax Pop up box I noticed you have removed several items - eg. Brand, Reward Points etc. How did you do that?

And do you know how to make each one a varying colour?

For Example:

Brand: Gucci
Price: �0.05

Posted By: MarkCoyle
Date Posted: 22-August-2006 at 5:08am

Hi

I haven't removed brand, I just don't use it at present.

Reward points are there too if the item has them.

I don't think the example of colours you showed for the AJAX layer would be easy. You need to work with the tags already set up in ei-tooltip.css or it will get pretty complicated.

However you can change the colours at an item level so there's a lot of flexibility.

The background to the text cannot be done in CSS and is achived my modifying the supplied relevant PNG files in the images directory with a picture editor.

cheers
Mark

Posted By: Shane
Date Posted: 22-August-2006 at 8:25am

Thanks Mark

What Picture Editor do you use ... I'll simply want to change the blue to Green or Orange ...

Posted By: MarkCoyle
Date Posted: 25-August-2006 at 5:16am

I use PhotoImpact but any image editor would do.

To modify the PNG files you will need to zoom in on the view to something like 400% so you can paint over all the areas that are relevant to you.

cheers

Mark