Suggestions - Make CSS styling easier

Print Page | Close Window

Make CSS styling easier

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Suggestions
Forum Description: ProductCart Suggestions
URL: https://forum.productcart.com/forum_posts.asp?TID=3780
Printed Date: 29-April-2024 at 12:08am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: Make CSS styling easier

Posted By: Guests
Subject: Make CSS styling easier
Date Posted: 12-June-2010 at 3:11am

I just did my first "black/#000" styled theme tonight. It was a nightmare.

PC CSS and imagery seems to assume everything will go against a white/#fff background.

My suggestions so far are to let the background color be defined in the body element of the style sheet and then let everything else have a background-color of "transparent".

There are also many icons used all over the place that could be transparent PNGs.

I understand that styling is up to the designer, but the "Out of the box" version could make it such that it is MUCH easier to style against backgrounds that are not pure white.

Replies:

Posted By: ProductCart
Date Posted: 12-June-2010 at 3:52am

Sean: we agree. This needs to be improved.

-------------
The ProductCart Team

Home of ProductCart http://www.productcart.com" rel="nofollow - shopping cart software

Posted By: RedLeafDev
Date Posted: 12-June-2010 at 9:03am

Glad to hear it EI! Maybe a future enhancement?

This has been an issue for us before. We've even gone as far as to put into our design specs that at least the center of the interior pages needs to have a white background.

Amy

-------------
http://www.redleafdevelopment.com" rel="nofollow - Red Leaf Development

Certified ProductCart Developers

www.redleafdevelopment.com

Posted By: ProductCart
Date Posted: 12-June-2010 at 9:40pm

Using ProductCart with a non-white background is not hard to do. It's just more time consuming than it should be. We completely agree.

According to our own experience, it takes up to 2 hours to customize everything, which is clearly too long.

The part that's particularly time consuming is One Page Checkout, so if you keep that portion of the design on a white background, it speeds things up.

Just as a reference, the files to edit are:

pc/pcStorefront.css
pc/onepagecheckout.css
includes/spry/SpryAccordionOPC.css
includes/spry/SpryTabbedPanels-SHIP.css

Anyway... yes, we do plan on doing work on this in the future to streamline the CSS used by our shopping cart software and make it simpler to switch to a non-white background.

Thanks for your feedback!
file:///C:%5CUsers%5CMassimo%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_colorschememapping.xml -

-------------
The ProductCart Team

Home of ProductCart http://www.productcart.com" rel="nofollow - shopping cart software

Posted By: Guests
Date Posted: 12-June-2010 at 10:26pm

Well, it certainly took me longer than two hours using Google Chrome's Inspect Element tool just to find everything (which is nice because it tells you exactly where are the styles that are actually being applied are coming from in all of the various style sheets, right down to the line).

But yeah, OPC is the biggest challenge here. The stuff in pcStorefront.css, there are quite a few places that could just use a transparent background instead of being defined as #fff, but with OPC, not so much.

There's one more sheet if you want to style the popup for folks returning to the site with saved/abandoned cart: /productcart/includes/jquery/themes/redmond/jquery-ui-1.7.2.custom.css/

That's a tricky one. Still don't have it perfect on the button effects.

The other issue is some of the icons. It would be nice if they could all be PNGs with transparencies. This one totally needs to be created like that: pc/images/pc_checkmark_sm.gif. Transparent GIFs are so circa 2000, LOL!

But thank you so much for taking this under advisement.

On the up side, you guys have done a fabulous job of making sure all of the hooks are there for CSS. Didn't have to edit source code once to create a hook. Just a matter of finding all of them and editing them... and refreshing a million times ;-)

I did have one curious issue, though: includes/spry/SpryTabbedPanels-SHIP.css -- I just couldn't get this sucker to clear cache for some reason. Finally ended up checking it on a different computer.

Posted By: RedLeafDev
Date Posted: 14-June-2010 at 11:49am

One other thought... for you Mozilla users - Firebug works in the same way as Chrome's Inspect - which does make the task less time consuming and helps in general with layout troubleshooting tasks.

-------------
http://www.redleafdevelopment.com" rel="nofollow - Red Leaf Development

Certified ProductCart Developers

www.redleafdevelopment.com

Posted By: Guests
Date Posted: 29-June-2010 at 3:30pm

Ok, here's an item that definitely needs to be removed:
opc_chooseShpmnt.asp line 738:




               strUPSFooter="<tr bgcolor='#FFFFFF'><td colspan='3'><table width='100%' border='0' cellspacing='0' cellpadding='3'><tr><td> . . .

Hard coded white background. Might be nice to even assign this a class so it could be control easily via CSS.