Customizing Colors

Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic

   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?

Author	Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic
MGatESS Members Profile Send Private Message Find Members Posts Add to Buddy List Groupie Joined: 12-July-2006 Location: United States Status: Offline Points: 73	Post Options Post Reply Quote MGatESS Report Post Thanks(0) Quote Reply Topic: Customizing Colors 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. - www.endoscopy.com

MarkCoyle Members Profile Send Private Message Find Members Posts Add to Buddy List Senior Member Joined: 06-June-2006 Location: United Kingdom Status: Offline Points: 0	Post Options Post Reply Quote MarkCoyle Report Post Thanks(0) Quote Reply 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

netprofits Members Profile Send Private Message Find Members Posts Add to Buddy List Certified ProductCart Developers Joined: 05-January-2006 Location: United States Status: Offline Points: 22	Post Options Post Reply Quote netprofits Report Post Thanks(0) Quote Reply 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 Our Site

MGatESS Members Profile Send Private Message Find Members Posts Add to Buddy List Groupie Joined: 12-July-2006 Location: United States Status: Offline Points: 73	Post Options Post Reply Quote MGatESS Report Post Thanks(0) Quote Reply 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. - www.endoscopy.com

netprofits Members Profile Send Private Message Find Members Posts Add to Buddy List Certified ProductCart Developers Joined: 05-January-2006 Location: United States Status: Offline Points: 22	Post Options Post Reply Quote netprofits Report Post Thanks(0) Quote Reply 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 { background-color: #ffffff; } 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 Our Site

MGatESS Members Profile Send Private Message Find Members Posts Add to Buddy List Groupie Joined: 12-July-2006 Location: United States Status: Offline Points: 73	Post Options Post Reply Quote MGatESS Report Post Thanks(0) Quote Reply 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 Thanks for all your help!! I truly appreciate it! Edited by MGatESS - 07-August-2007 at 12:24pm
	~ Mark G. ESS, Inc. - www.endoscopy.com

bottomlineusa Members Profile Send Private Message Find Members Posts Add to Buddy List Newbie Joined: 18-August-2007 Location: United States Status: Offline Points: 0	Post Options Post Reply Quote bottomlineusa Report Post Thanks(0) Quote Reply 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!