Smart Demo Switcher

Plugin Information

Smart Demo Switcher is plugin made for developers that need demo websites set up for themes with multiple color styles and custom styling. With this plugin you can add left/right slider for selecting and loading different style sheets and modifying styles in page using switches. You can use even fully custom styles switching by expanding load object and writing own handlers.
Plugin can uses cookies to store state of all switches. This is useful if you have multi page demos and you want to keep selected colors and styles when user viewing the demo changes page.
Styling is done using CSS, and all included styles are pure CSS with only one image used to emulate transparency look. Switcher can work on smaller screens, and it will work on mobile devices browsers that support jQuery and CSS3.
Plugin is tested with current Android (with 2.3.5, 4.0.2 and 4.1.2) browsers, iPhone and iPad Safari and Chrome (with iOS7), all modern desktop browsers (IE6, IE7 and IE8 are not supported). It requires JavaScript and jQuery support to work.

Wide range of switcher customization settings

Switcher has 2 color styles, it can be on left or righe side of the screen, it can be collapsed / hidden, fixed or absolutely positioned. You can customize most of the things either by changing settings or changing styles.
You can have switches in multiple colors, with transparency. This will work with style sheet switches and custom styles switches too. And you can add any number of them. Instead of classic color box switches, you can use colored links or select drop down elements. Depending on the number of elements you want to switch between, select element can be best solution to replace box switches.

Easy to setup load file used to initialize switcher

For the plugin to work, you need to customize LOAD script and enter information relevant to your demo. This file is easy to customize, and allows you to set many things. Plugin package contains several examples, and documentation contains information about all settings, file structure and more.


  • Plugin requires some jQuery / JavaScript knowledge to setup and customize the script. This plugin is made for the developers that need an easy method of adding theme style switcher for own theme demos.
  • Plugin includes extensive documentation in the plugin download package in PDF format and many examples. Please, read the PDF documentation included, and check out all provided examples to better understand how plugin works.
  • Changelog

    Version 2.0 / 2014.05.29.

  • Added: Save current switches selection in cookie
  • Added: Options to apply custom CSS class to switches
  • Added: Options to control animation speed and effect
  • Added: Options to change tab open / close content
  • Added: Two more flat color styles added
  • Fix: Select box switches sending wrong selection type
  • Fix: Several small issues with the plugin demos
  • Version 1.5 / 2014.04.15.

  • Added: Use select box instead of box switches
  • Added: Use plain links instead of box switches
  • Added: Variant method can be a custom call function
  • Added: Events onSwitch for stylesheets and variants
  • Updated: Changes to the way custom variant call is made
  • Updated: New and improvemed switcher demo files
  • Fix: Few minor linking problems in the demo files
  • Fix: Broken some of the demo files examples in HTML
  • Full changelog available on plugins home page