jQuery Plugin To Create A Theme / Skin Switcher

File Size: 27.8 KB
Views Total: 3540
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create A Theme / Skin Switcher

This is a jQuery based theme / skin switcher which allows the visitor to change the look and feel of your webpage (e.g. text color, background color, background image) from a side sliding panel.

How to use it:

1. Add jQuery JavaScript library and the jQuery Theme Switcher's JavaScript & Stylesheet into the webpage.

<link href="Jquery.Theme.Switcher.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="Jquery.Theme.Switcher.js"></script>

2. Wrap your page content into a DIV element with the CSS class of 'Layout_Skin'.

<div id="Layout_Skin">
  ...
</div>

3. Add the CSS classes 'Switcher' and 'Switcher-text' to target elements.

<h1 class="Switcher-text">
  Text color only
</h1>

<a href="#" class="Switcher Switcher-text">
  Both skin color and text color
</a>

4. Initialize the theme switcher.

$('body').Archin({
  backgroundColor: "White",
  TextColor: 'Black',
  ButtonbackgroundColor: 'white',
  BoxBGimages: 'bg.png'
}); 

Change log:

2016-06-06


This awesome jQuery plugin is developed by Archin-modi. For more Advanced Usages, please check the demo page or visit the official website.