Customizing Colors
Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Customizing ProductCart
Forum Description: Exchange messages with other users that are customizing ProductCart.
URL: https://forum.productcart.com/forum_posts.asp?TID=1017
Printed Date: 21-April-2025 at 12:13pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com
Topic: Customizing Colors
Posted By: MGatESS
Subject: Customizing Colors
Date Posted: 06-August-2007 at 5:07pm
|
ProductCart v3.01 PPD I want to change the background color of the ProductCart (/pc) pages. I found the pcHeaderFooter.css will change the background color, but it also changes the color of the left hand column(s) the footer and a lot of the content information. I want to make it so that the background color FRAMES the content and navigation of the pages. would adding a "background-color: #ffffff;" to all the various CSS blocks that don't have a background color declared (otherwise transparent) solve this problem, or will it create other problems with the layout? Are there other style sheets I'd have to change? Also, will the style sheets in the /pc folder affect anything in the ProductCart administration folder/system? ------------- ~ Mark G. ESS, Inc. - http://www.endoscopy.com/" rel="nofollow - www.endoscopy.com |
Replies:
Posted By: MarkCoyle
Date Posted: 06-August-2007 at 5:12pm
|
You need to modify pcstorefront.css if you want to change colours more than just in the header/left/footer. I really wouldn't go messing with the CSS in the store ASP pages unless you're confident (and will remember to put them back in if those pages get upgraded in future releases). You won't change the store admin as that has its own CSS. The CSS files provided are very flexible indeed, I've found apart from introducing extra sections I wanted, they have provided a lot of potential for customisation (and we have quite a distinct colour scheme). Hope that helps. cheers Mark |
Posted By: netprofits
Date Posted: 06-August-2007 at 5:24pm
|
The ONLY style you should need to change to affect the background color of the left, center, right and footer areas is: #pcMainArea in the pcHeaderFooter.css file. If you add your background-color: #ffffff; to that style, everything else should look the way you want. ------------- NetProfits Internet Consulting Certified ProductCart Developer http://www.nicwebdesign.com" rel="nofollow - Our Site |
Posted By: MGatESS
Date Posted: 07-August-2007 at 10:11am
|
Mark & netprofits; I tried what you had suggested, but I still can't get exactly what I want. I've tried illustrating below what I'm getting, and what my desired output is. This image is of what I'm getting (yellow representing the background color areas) when I change the "body { ... }" code in the pcHeaderFooter.css with my background color:  The desired look - the look I'm trying to accomplish, is the following image (modified in photoshop so that I can illustrate what I want):  I'm not using yellow, I just used yellow to clearly illustrate where the background color is going and where I want the background color to go. The actual color will be the same as the very top area where the company logo, tagline, search box, and top navigation links are. Again, help will be most appreciated. I can get my desired results making a static HTML page using background colors for the page and tables, but I can't seem to duplicate it with ProductCart's .css files. HELP!!!  ------------- ~ Mark G. ESS, Inc. - http://www.endoscopy.com/" rel="nofollow - www.endoscopy.com |
Posted By: netprofits
Date Posted: 07-August-2007 at 10:25am
|
We have modified dozens of PC layouts, including one this morning and the only style we modify to force a white (or any color) background is the following in pcHeaderFooter.css: #pcMainArea { If you have added other CSS style sheets you may be overriding this style OR if you have removed pcMainArea from your header file then it won't work. ------------- NetProfits Internet Consulting Certified ProductCart Developer http://www.nicwebdesign.com" rel="nofollow - Our Site |
Posted By: MGatESS
Date Posted: 07-August-2007 at 12:23pm
|
SUCCESS!! I finally got it to work! It turns out that in the header.asp page, it lays out the content with a table - and that table was transparent. Once I filled it in with a background color of white (#ffffff), I got my desired result! http://www.endoscopy.com/shop - http://www.endoscopy.com/shop Thanks for all your help!!  I truly appreciate it!------------- ~ Mark G. ESS, Inc. - http://www.endoscopy.com/" rel="nofollow - www.endoscopy.com |
Posted By: bottomlineusa
Date Posted: 19-August-2007 at 1:22pm
|
Hi, I'm new to PC and I don't know asp coding (I guess I'm learning though). I am confused about the statement, "if you have removed pcMainArea from your header file then it won't work." I used the header file provided by PC and it does not reference "pcMainArea". What am I missing? I've also been trying to remove the borders around the images and I can't get it to work by changing the forms attributes as per another post. Here is what I have now in the pcStorefront.css forms section (and I still have borders around my images): .pcForms input { border: 0; background-color: #F7F7F7; font-size: 11px; padding: 2px 3px 2px 3px; } .pcForms input:focus { border: 0; } Thank you in advance for any help. I need all I can get!  |