Clothing for a Website

Suppose you have your own site with a distinctive design. Some people may like it, while others don’t, however pretty it is (this is a usual thing, beauty is in the eye of the beholder). And it would be good if users had the opportunity to choose the design that pleases them during their visit. We are talking about exactly this: how to give your visitors the opportunity to tailor their experience.

It’s possible to simply make a heap of similar sites with different designs, but this is not what we’re after in any case. You know, the place beneath a site is not rubber; as well, it would be an inordinate amount of work, especially if the site is rather large. I propose a different variant – using CSS, JavaScript and Cookie in conjunction. There’s been a lot written about this beast (those who are for the first time hearing these words should do a little background reading).

For the beginning, we need to write two .css-files (it’s possible to make it bigger too, but we will limit ourselves to two different designs for this article). Let’s open notepad and type in the following code:

Now let’s save our file under the name style1.css. Then we will do the same with a different file (only this time the name will be style2.css). Here’s the code:

Now for a little explanation. We have created two different styles, in other words two different skins for our site. We’ve determined the background color, the font size (10pt), its type (Verdana), and defined the surface appearance tag <div>.

Now that we’ve finished working with the style, let’s move on to script. Using JS (JavaScript), we will write two scripts — one for placing a Cookie, the other reading the Cookie and the installation of new design (style files, of which we have two). By the way, some will possibly have asked the question, Why should we use a Cookie? The thing is, every time a person visits your site, he will not wish to choose his favorite design. It is a bit more comfortable (for your visitors) to make sure that they need choose their favorite skin only once, that it will download every time by default (this can be achieved by using a cookie). Here is the code for the first script:

Now we will need to create different script. For the sake of comfort, let’s save it as an individual file with the name mycomp.js (.js — this is the standard extension for files containing Java-script). And we will include it in our webpage using this tag <script src=mycomp.js> </script>. So, open notepad, write the following code and save it in the file mycomp.js:

Let’s pause a bit to discuss this script. Up to the line if((value!=’1’)…), we consider this a Cookie. Further is the code which serves as the framing for the needed style. If a person fails to choose design (in other words if this is his first time on your website), file will style1.css will be activated (the first style). If the value is 1, then the first style will be loaded; if the value is 2 — the second. The line <LINK REL=STYLESHEET TYPE=text/css HREF=style1.css> is the standard tag for turning on the style file. For choosing the style itself we will make two simple links on the page:

Now we’ll gather all our work into one pile. By now you should have the following files ready:

- two files containing style (style1.css и style2.css);

- one file containing script (mycomp.js);

- the page itself (index.html);

Below you can see an example of the file index.html (the example was taken from one of my sites):

Now you can create an entire wardrobe of interchangeable clothing for your site. When doing this, it will be necessary to correct the code a bit.