MAXO Studio - Merging Strength & Style

One of the coolest things you can do is allow users to dynamically skin your site and pick the appearance that they like best. This is also theraputic for developers that are torn between several themes/stylesheets and can't decide which one to use on their site. Why not use all of them? Now I'm assuming that you're already familiar with stylesheets and how to use them. If not check out the CSS tutorial at W3 Schools.

Specifying more than 1 style sheet. Let's begin by first taking a look at how you'd go about specifying more than 1 stylesheet for your page. You do this in your <HEAD> tag as follows:

<html>
     <head>
          <title>Generic Web Page</title>
          <link rel="stylesheet" type="text/css" href="CSS/Style_1.css" id="MainStyle" title="MainSkin">
          <link rel="alternate stylesheet" type="text/css" href="CSS/Style_2.css" id="AltStyle" title="AltSkin">
     </head>

Notice that other than rel="alternate stylesheet" there is no difference between how you specify your main and alternate stylesheets. Declaring all your styles in your header also allows your browser to load both styles. This way, in the next section when we switch styles on the client-side, the change will be virtually instantaneous.

Switching Styles

The first thing you want to do is write a function that will switch your style sheets for you. If you have more than 2 style sheets you can give this function an input parameter telling it which style you want. Otherwise, you can program it to toggle to whichever style is not currently being used. Following the the 2 styles described above, we'll try the latter.

Now all you need to do is call the function from a link and relish the "oooooh"s and "aaaaaaaah"s.

<a href="#" onClick="FlipSkins(); return(false);" class="Body_Link">Flip Skins</a>