Make CSS styling easier

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.

Edited by Sean@WMS - 12-June-2010 at 3:12am

Glad to hear it EI! Maybe a future enhancement?

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.

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.