|
Hi Casey,
Yeah, I edited the wiki to add this as an alternative approach, and then Hamish decided it should be their official take on it, removing the prior approach of editing inline markukp entirely.
I added pc/onepagecheckout.css as that would be the rather "natural" file to edit, but it is also prone to updates ... and frankly I'm getting tired of managing so many style sheets in PC. These days I'm painting my style sheets red with !important to override other style sheets and markup. I stick to a variation on pcHeaderFooter.css for more global design issues and modify pcStorefront.css for more store-level stuff, adding overrides and new stuff to the bottom of it.
Just a bit of a primer for the annals for anyone stumbling upon this:
It doesn't really matter much which style sheet one edits for their design, ultimately. The only important thing to understand is that the first "C" in CSS stands for "Cascading", which means that by default, styles are inherited from the rules applied to parent objects unless modified with a more location specific identifier (ex: body {} vs body #pcHeaderContainer) OR a set of rules is defined lower down either on the same style sheet, or an external style sheet is called subsequently, or style rules are applied within the <head> tag of the page, or are applied inline in the markup (ex: <div style="">) -- in that order. That's the cascading nature of CSS.
So, if you run into something that's hard coded in the markup (I'd really love to make ALL of that go away in PC like a bad dream) or something defined in subsequently loaded style sheets (such as pc/onepagecheckout.css), then you can pull out the magic trump card !important in your rule to override the values that might be down-line in the cascading nature of CSS -- including HTML markup properties (ex: <img width="100">). To learn more, see: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm" rel="nofollow - http://webdesign.about.com/od/css/f/blcssfaqimportn.htm (I couldn't find anything on this in W3C School, hmm).
Most especially when the display you would like to override is inline in the markup (either an HTML property or an inline style rule), it is best practice with PC to use a primary style sheet to override the display as the markup has a probability of being overwritten by an update (and if you're like me, you'd prefer to minimize how much of that to keep track of even with code compare tools such as WinMerge). Some pages have a very high probability of being overwritten, esp. when they are involved with the core shopping cart functionalities of displaying products and providing a user interface for adding them to cart and ordering them.
Similarly, all of the other subordinate style sheets in PC (such as pc/onepagecheckout.asp and others involved in the OPC) might get updated ... and frankly, why hassle with editing /maintaining so many style sheets?! Again, just override the rules in subordinate style sheets from your primary style sheets.
By primary style sheets I mean pc/pcStoreFront.css (which I prefer to leave named that) and your more global site design style sheet (out of the box, this would be something like pcHeaderFooter*.css which you may have just left named whatever your release came with or you might prefer to just create your own MySiteTheme.css style sheet). Whatever you do in this global design style sheet will not be affected at all by any updates. The core pcStorefront.css style sheet will change with update, however. That one I prefer to leave named the same and to manage manually as it really is the core style sheet for ProductCart.
My advice for managing pc/pcStorefront.css is to keep it as close to stock as possible to make it easier to run code compares on to see what the new update might have added. To do this, don't change the order of the rules or rule properties. Leave them as is and add your customizations below the rule properties in a give rule, add new rules at the bottom of this style sheet with comments about the regions you're adding rules to. For example:
pcStyleRule { pcStyleProperty: values; myStyleProperty: values; } myStyleRule { myStyleProperty: values; }
|
Finally, a word to the wise: Be careful with this !important commend! Use it only to override display rules and properties in ProductCarts markup and subordinate style sheets. Do NOT get carried way with it such that you end up overriding your own site theme & design display rules lest you give yourself or your design team unnecessary headaches (for which I prescribe Google Chrome's Inspect Element feature in their Development Tools, but even that takes a careful eye to read what rules have been trumped by !important commands).
These practices will make your update experiences much more efficient, esp. on highly customized designs.
Forgive me if I've been overly pedantic, but there are many who could benefit from my little lecture here IMHO. Looks to me like a draft of a blog post I should probably write ;-)
|