User Controlled Stylesheets with JavaScript and CSS Part Two

In part one of this tutorial we looked at the HTML and initial CSS required for coding the basic page and the style control panel, and styling them in the desired theme.  In this part we're going to look at extending the CSS to encompass all of the different style choices that visitors could make, as well as the JavaScript that functions as the mechanics behind the page and powers mechanisms like the opening and closing of the style control panel and the actual application of the visitor's choices.

The JavaScript is also going to be used to remember each visitor's style options so that when they return to the site, the choice they have made on their last method are applied again.  Dynamically generated sites often use a database to store this information on the server, but if you don’t have a database-driven site, you can achieve the same functionality using purely client-side techniques.

Beginning the JavaScript

The first thing we need to do is to create a function that controls the opening and closing of the style control panel.  To do this, create the following function in a blank page of your favourite text editor:

That's all there is to it.  We're also going to need a very similar function that closes the control panel once the visitor has made their selections: