Advanced CSS Style Switcher

Tutorials Shared by the Internet Community


  Top Tutorials     New Tutorials     Submit     Login     Register  

Advanced CSS Style Switcher

Change the entire look of your site with one click
  • Total Hits: 16078

  • Average Rating :
    URL RatingURL RatingURL RatingURL RatingURL Rating


  • Total Votes: 149 votes

  • Category: CSS/Advanced

  • Submitted on: 2008-03-07 09:43:14

  • Submitted By: Devesh Khanna

  • Set as Favorite


Since we all know just how popular css design has become.

I thought i would release this tutorial on how to do something new.

With this small script, you or your visitors will be able to completely change the look of your site with one click.

This does use strictly css, as well as some javascript.
So lets Begin…….

First, lets set up the basics to get you organized, and insure this will work properly.
Create a new folder on your hard drive.

Within that folder create two new folders.
Name one, “images” and the second one “style2″.

This will let you store both images for each layout in seperate folders so things do not get messed up.

Create your sites design using css, the blocks, layout and so forth.
Lets call this “Style.css”.
Remember that you can also include images in the layout as well.

Then once you have completed that, copy it and rename it to “Style2.css”.

Now what we will do is add the following code into the main page of your site.
In the index.php, or html file itself.    More detail...

Rating Detail

 Stars  Percentage  Total Vote
 One star  Vote LeftVote MiddleVote Right 37.58%  56
 Two starsTwo star  Vote LeftVote MiddleVote Right 10.74%  16
 Three starsThree starsThree stars  Vote LeftVote MiddleVote Right 12.08%  18
 Four starsFour starsFour starsFour stars  Vote LeftVote MiddleVote Right 11.41%  17
 Five starsFive starsFive starsFive starsFive stars  Vote LeftVote MiddleVote Right 28.19%  42

Caste Your Vote

 Rating  Selection  Guidelines
 Poor:     Very disappointing, useless.
 Fair:     Below average, disappointing but not useless.
 Good:     About average in its class.
 Very Good:     Above average for its category.
 Excellent:     One of the best Tutorials in its category.