Stylesheet Analysis Technique
(Save as web page complete)

Another technique you can use, for those who want to keep various static records of a dynamic site, is to navigate to the pages in your site, starting of course from your home page, and going to all the back pages which can be generated from the web store.

Do this for any page you want to record in it's static state, then you can open it in your web editor/design tool, and look at stuff in a copy, with all the code frozen in time, at that state of theweb page / stylesheet, with all the support files saved and frozen there too.

1.) Save the web page you are at to an eval folder, save as web page complete, all supporting files will be placed in a folder with the same name. Stylesheet paths will change, but you can check live source for the location, and most are in the same place, if not all.

2.) Have a look in the support folder, within the directory you saved the page to. You can then see what images and other supporting files are in the static local disk folder, and have a backup copy.

3.) There are a few good design tools for local work, I use Microsoft Expression Web 3, and others. In your editor, open the static page from your disk. In Expression, as you scroll in split design/code view, you can select areas in the saved page, in design view, and it will highlight the extent of a wrapper for example, and you can see the css names under the main menu. Many pages shared common css selectors and classes.

I liked this approach, because I had a copy of the page I could look at a specific point in time, and it saved the stylesheet to the supporting directory, and other needed files, at that point in time.

4.) Make notes of some of the css element names, and go to your live site, opened maybe in an web editor and experiment with the elements you want to modify, which you can note from the saved static page you have for reference.

5) Repaeat this for all the web page members of the shop. Then you have a referenceable record of each page, and exactly what was going on in it when it was dynamically generated to your browser. You can also go around the web to other pages, and try it too, then look at the support folder, and check out the css files, and whats going on in the page referencing that css file.

Another good experiment is to go through ALL the colors in the stylesheet, and make a html table, with each cell containing the colors in the sheet, just to see them against eachother. This alone can give you a snapshot of the color palette in use in for example the classic template. You can also open all the images, or thumbnail view them to see whats what.
For my purposes I like to simplify wacked out color palettes, to a handful of good colors that work well with eachother and the page dominant backgrounds, which will usually be a single background color fill or 2 and some foreground, and edge defining colors. You could go around changing colors to greens and yellows and pinks, in places to see where they are coming up one, two or three at a time, then change back till your ready to start applying. As you do, start commenting the css text
/*comment*/
to describe the elements - even hard copies are good for this, as you have a visual to work from quickly.

You can then, if you want to simplify, narrowing 2 or 3 colors to a new color, and so on, till you narrow the 25 or so colors the classic template uses to 5 to 10, or less.

Another thing is that if you use more colors, like 10 or twenty, relate them to a 2, 3 or 4 color hue palette, and vary out from these base colors, with varying saturations, or lighter/darker versions of those colors. This can help pull insanity into variety with a logic.

Make your template at the end. Another thing you can do, is modify the core stuff, since you can copy it all to a template at the end, and then you have it worked out for either template; the one which will be overwritten at upgrade time, and your modified clone of it. This saved me time, because I can make layout and color changes, and I know I'm going to, when I'm close to done, copy them into a template override, that I can apply later.

This may be a little slower, but you have:

a static record, that you can re-open and have a look at anytime, you can even comment the saved pages,
you can have progressive versions over time,
and you have a copy of the stylesheet at that time,
plus all the images you might want to modify, that that page is calling.

You can select visual elements, and see their css element counterpart name. You can then work realtime on your site, or experiment previewing the local file, with experimental changes made locally.