I have created some alternate style sheets for my site. The various flavors can be chosen by clicking on any of the four square icons on the top of the right hand column on each page. I have a few more flavors that I would like to add to the mix, however they are a work in progress at present.
The Blue style sheet is the primiary style sheet for the site and it also holds the core page structure and page presentation of the site together, including the navigation, the header the main body and the right hand column of each of the pages. To enable the alternate style sheets (the Orange, Purple and Earth tone one), it was really a pretty simple adjustment. I simply pulled out of the main stylesheet the elements that needed to be changed, placed them in their own CSS file, and switched out the specific images/icons and settings to reflect the color scheme I wanted to employ. I then used Paul Sowden’s Style Sheet switcher javascript to enable this functionality. So when the style sheet switcher calls one of the alternate style sheets, it essentially only switches the elements that I changed but leaves all the other attributes from the primary style sheet intact.
I will highlight the other new flavors I am working on in a future post, but my goal is to go one step further with these style sheets and develop a different page structure and interface similar to the way CSS Zen Garden does it.