Hi! In this tutorial, I'm going to show you how to create two different styles to your website; or you can say, how to change some parts of it.
You can see demo by clicking on this link, before you continue reading .

http://multistyletut.ucoz.com/


Now, before you start, you have to make sure that you have main style file [ Usually named "style.css"] and a modified copy of it [ Alternative to "style.css" ]

If you are using a default uCoz template, then your main "style.css" is named "my.css" and located as "/_st/my.css", you have to download it and rename it to any name you want [Example "orange.css" ], then upload it again to the main root of your website after making some changes on it [For examle : background image, logo color, ...etc]

Do the same thing if you weren't using a default template.

==========================

Step 1:

Now you have at least two css files, define which is the main and which is alternate one, by doning the following :

Go to your Control Panel -> Design -> Quick substitution of template parts -> switch to "Multi-Line" replacement.





In "Find" field, enter :



In "Replace With" field, enter :



==========================


Step 2:

You have now main style and alternate one, now, you have to use a third-party JavaScript* to change the stylesheet. Do so by doing the following:

Go to your Control Panel -> Design -> Quick substitution of template parts -> switch to "Multi-Line" replacement.

In "Find" field, enter :



In "Replace With" field, enter :



you can download the script from the link above, and customize it for your own use.

==========================


Step 3:

Now, by doing the same, change "body" tag state to load the style from cookies, by doing the same steps :

Go to your Control Panel -> Design -> Quick substitution of template parts -> switch to "Multi-Line" replacement.

In "Find" field, enter :



In "Replace With" field, enter :



==========================


Step 4:

Now, you just have to use the following Hyperlink to apply a style . You can attach it to an image as I did in the demo site.



30 defines how many days to keep your website's cookies, you can change it to any number.

To set back the default style, use the following link:



"none" refers to the main style.

==========================

You can make as much as you want of alternate styles.

Use any text editing application to edit your styles. [Notepad++ , Dreamwaver , ...etc]


COPYRIGHT :

* Style Sheet Switcher script is made byDynamic Drive .

That's it
Check Demo : http://multistyletut.ucoz.com/