Chain Documentation

Chain Admin Template Documentation v1.0 by ThemePixels

Chain Responsive Bootstrap 3 Admin Template

Created: August 08, 2014 by: ThemePixels.com (themepixels@gmail.com)

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Getting Started

Chain is yet another admin template built using Bootstrap and other jQuery plugins that is perfect for your next projects. It provides an easy to use user interface design and a fully responsive layout that is compatible with handheld devices such as phones and tablets.

Chain is built to work best in the latest desktop and mobile browsers but older browsers might display differently styled, though fully functional, renderings of certain components.

Note: Internet Explorer 8 and below are not supported in this template.

HTML Structure

This theme is a fluid and responsive layout with two columns. The general template structure is the same throughout the template. Below are the general structures.

Main Wrapper

<header>
  <div class="headerwrapper">...</div>
</header>
<section>
  <div class="mainwrapper">
    <div class="leftpanel">...</div>
    <div class="mainpanel">...</div>
  </div>
</section>

Navigation

This is the navigation menu in the left panel of the template.

<ul class="nav nav-pills nav-stacked">
  <li><a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
  <li class="parent"><a href=""><i class="fa fa-edit"></i> <span>Forms</span></a>
    <ul class="children">
      <li><a href="general-forms.html"><i class="fa fa-caret-right"></i> General Forms</a></li>
      ...
    </ul>
  </li>
</ul>

The top parent element menu name should always wrap with span and a parent menu with sub menus should always have a class of .parent.

When a parent menu is active it should have a class of active

<li class="active"> ... </li>

When a parent menu with sub menus is in a dropdown active state the class should be parent parent-focus

<li class="parent active"> ... </li>

When a parent menu with sub menus is active and also in a dropdown active state the class should be parent active

<li class="parent active"> ... </li>

Note: The navigation menu only has two levels at this time. We may add up to three levels for the coming updates of this template.

Main Panel

The main panel is compose of header, the page header and the main content of the page.

<div class="mainpanel">
   <div class="pageheader">
      <!-- title and breadcrumb goes here -->
   </div>
   <div class="contentpanel">
      <!-- content goes here -->
   </div>
</div>

Basic Template

For the basic template, open the file blank.html to create a new empty page and then start adding content by adding it inside the contentpanel. You can refer the above structure to create your own page.

CSS

This template uses many css files and most of it are imported in a single css file (style.default.css).

Bootstrap

We use Bootstrap as the main framework of this template. Bootstrap is open source. It's hosted, developed, and maintained on GitHub. Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes. That's why we use Bootstrap.

In this documentation, we will not discuss more about Bootstrap. When using this template it is also important to read their documentation for better understanding and use of the framework.

Learn More About Bootstrap

Files & Structure

All CSS files are located in the css folder. Some of these files are in minified version so it is not recommended to edit these files but it's also not required so don't worry about it.

Below are some of the css files that are allowed for you to edit.

style.default.css

This is the main css files of this template. Any new css or changes of the template should be added here.

bootstrap.override.css

The css that overrides the css for bootstrap. Any changes that you want to override from bootstrap should be added in here.

The rest of the css files are not recommended to edit it but if you know what you're doing then feel free to make changes to it. If you have trouble changing something from it do not hesitate to send us a message.

Javascript

This template is powered more by javascript. Disabling javascript in your browser will break the template and some of the features will not work so it is highly recommended that you make sure javascript is enabled.

The javascript files can be found in the js/ folder of template. Please be aware that any updates and changes made by yourself on this plugins might break the template. If you have trouble regarding this, please do not hesitate to ask our help.

jQuery

We use jQuery in all of our pages. For any issues related to jQuery, please contact us for any assistance or you may visit jQuery Website.

The below code should be included in every page of the template by adding it in the <head> or below the page right before the </body>.

<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

We use this plugin to create animation effects in the elements. Consider visiting their site for more information about using this plugin.

<script src="js/jquery-ui-1.10.3.min.js"></script>

Not all pages in the template are using this plugin so if you want to use this just add the code above to the head or below the page.

Select 2

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

See their documentation

Color Picker

colorpicker.js is a simple jQuery plugin that selects color in the same way you select color in Adobe Photoshop.

The use of this plugin is implemented in the general-forms.html. To know more about this plugin, please click the following links below.

About | Download & Updates | Implement

To use this plugin, please refer to Implement link above.

Dropzone

dropzone js is an open source library that provides drag'n'drop file uploads with image previews.

Note: This does not handle your file uploads on the server. You have to implement the code to receive and store the file yourself.

You can see the actual implementation of this in the template of the file general-forms.html. You can learn more about this js code by going to their website.

Learn more about Dropzone

Calendar

We use Full Calendar as the main calendar for this template.

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar).

To learn more about this plugin, please visit http://arshaw.com/fullcalendar/. There you can read their documentation on how to implement the calendar. They also have support to answer your problems related to this plugin.

The actual implementation of this plugin to the template can be found in calendar.html or you can view it in demo under the menu Pages -> Calendar.

Maps

We use two kinds of map for this template, one is the gmaps.js powered by Google map and the other one is jVectorMap.

Gmaps

gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

You can see the example in our template in maps.html. You can also look for more examples from their website by going to this link - http://hpneo.github.io/gmaps/examples.html.

You can also spend some time reading their documentation in this link - http://hpneo.github.io/gmaps/documentation.html

jVectorMap

jVectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML. No Flash or any other proprietary browser plug-in is required.

You can view our template by clicking the menu Maps to view the actual implementation of this map to our template. For better understanding you can also read more on this link - http://jvectormap.com/tutorials/getting-started/. You can also see some of their examples on this link - http://jvectormap.com/examples/world-gdp/

jVectorMap also allows you to display map by country as what you see in our demo. We only display the map of the USA but you can display your own country by downloading some additional file in this link - http://jvectormap.com/maps/world/europe/

Forms

In this section, we will discuss about form related scripts that we use in our template. Everything discuss here can all be found and implemented under Forms menu in our template demo.

jQuery Tags Input

This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The following code below are needed to add in <head> of your page.

The CSS

<link rel="stylesheet" href="css/jquery.tagsinput.css" />

The Plugin

<script src="js/jquery.tagsinput.min.js"></script>

Usage

<script>
jQuery(function(){
    jQuery('#tags').tagsInput({width:'auto'});
});            
</script>

Markup

<input name="tags" id="tags" class="form-control" value="foo,bar,baz" />

Autogrow Textarea

jquery.autogrow-textarea.js automatically grow and shrink textareas with the content as you type.

The Plugin

<script src="js/jquery.autogrow-textarea.js"></script>

Usage

<script>
jQuery(function(){
    jQuery('#autoResizeTA').autogrow();
});            
</script>

Markup

<textarea id="autoResizeTA" class="form-control" rows="5"></textarea>

Spinner

Enhance a text input for entering numeric values, with up/down buttons and arrow key handling. This feature is part of jQuery UI

The Plugin

<script src="js/jquery-ui-1.10.3.min.js"></script>

Usage

jQuery(function(){
   var spinner = jQuery('#spinner').spinner();
   spinner.spinner('value', 0);
});

Markup

<input type="text" id="spinner" />

Time Picker

Easily select a time for a text input using your mouse or keyboards arrow keys. To lean more about time picker, please go this link - http://jdewit.github.io/bootstrap-timepicker/

The CSS

<link rel="stylesheet" href="css/bootstrap-timepicker.min.css" />

The Plugin

<script src="js/bootstrap-timepicker.min.js"></script>

Usage

jQuery('#timepicker').timepicker({defaultTIme: false});

Markup

<div class="input-group">
   <span class="input-group-addon">
      <i class="glyphicon glyphicon-time"></i>
   </span>
   <div class="bootstrap-timepicker">
      <input id="timepicker" type="text" class="form-control"/>
   </div>
</div>

Input Mask

Input masks allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phones, etc). To learn more about this plugin, please visit - http://digitalbush.com/projects/masked-input-plugin

The Plugin

<script src="js/jquery.maskedinput.min.js"></script>

Usage

jQuery(function(){
   jQuery("#date").mask("99/99/9999");
});

Markup

<div class="input-group">
   <span class="input-group-addon">
      <i class="glyphicon glyphicon-calendar"></i>
   </span>
   <input type="text" placeholder="Date" id="date" class="form-control" />
</div>

Form Validation

This jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customization. To learn more about this plugin, please visit - http://bassistance.de/jquery-plugins/jquery-plugin-validation/

The Plugin

<script src="js/jquery.validate.min.js"></script>

Usage

jQuery("#basicForm").validate({
   highlight: function(element) {
      jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
   },
   success: function(element) {
      jQuery(element).closest('.form-group').removeClass('has-error');
   }
});

Markup

<div class="form-group">
   <label class="col-sm-3 control-label">Email <span class="asterisk">*</span></label>
   <div class="col-sm-9">
      <input type="email" name="email" class="form-control" placeholder="Type your email..." required />
   </div>
</div>

Bootstrap Wizard

This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually. To learn more about this template, please visit - https://github.com/VinceG/twitter-bootstrap-wizard

The Plugin

<script src="js/bootstrap-wizard.min.js"></script>

Usage

jQuery(function(){
   jQuery('#basicWizard').bootstrapWizard();
});

Markup

<div id="validationWizard" class="basic-wizard">
   <ul class="nav nav-pills nav-justified">
      ...
   </ul>
   <div class="tab-content">
      <div class="tab-pane" id="tab1">
         ...
      </div>
   </div>
</div>

Pretty Photo

This template uses prettyPhoyo plugin in Media Manager page. PrettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It's a full blown media lightbox.

If you need support with prettyPhoto, first take a look at their FAQs

If you were not able to find an answer, feel free to take look at their Forum

The CSS

<link href="css/prettyPhoto.css" rel="stylesheet">

The Plugin

<script src="js/jquery.prettyPhoto.js"></script>

Usage

jQuery("a[rel^='prettyPhoto']").prettyPhoto();

Markup

<a href="images/photos/media3.png" rel="prettyPhoto">
    <img src="images/photos/media3.png" class="img-responsive" alt="" />
</a>

Charts

This template uses 3 kinds of charts to be used in your page. You can view the demo of this template in graphs.html

Flot

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. You can visit their site here

You can view more examples to this link - http://www.flotcharts.org/flot/examples/

The Javascript

<script src="js/flot/flot.min.js"></script>
<script src="js/flot/flot.resize.min.js"></script>
<script src="js/flot/flot.symbol.min.js"></script>
<script src="js/flot/flot.crosshair.min.js"></script>
<script src="js/flot/flot.categories.min.js"></script>
<script src="js/flot/flot.pie.min.js"></script>

flot.resize.min.js is used to resize the graph automatically when it detects an event in resizing the window.

flot.symbol.min.js is used when you want to use other points instead of the default (circle) points.

flot.crosshair.min.js is used when you want to have crosshair in pointing your cursor in the graph.

flot.pie.min.js is used when you want to display a pie chart.

flot.categories.min.js is used when you want to use a category (i.e month) instead of using numbers in the graph

Morris

Morris is another javascript set for displaying charts in your project.

View Examples How to Use

Sparkline

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

To add some sparklines to your web page, please follow the quick guides in this link:
http://omnipotent.net/jquery.sparkline/#s-docs

Tables

We use Bootstrap styles for table in our template.

Basic Table

For basic styling add the base class .table to any <table>

<table class="table"> ... </table>

Striped Rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

<table class="table table-striped"> ... </table>

Responsive Table

Wrap any <table> element in .table-responsive to make them responsive and scroll horizontally when viewed in smaller screens.

<div class="table-responsive">
    <table class="table"> ... </table>
</div>

To view other styles for table visit: http://getbootstrap.com/css/#tables

WYSIWYG

This template uses 2 kinds of text editor, the WYSIHTML5 and CKEditor.

HTML5 WYSIWYG Editor

Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

The CSS

<link rel="stylesheet" href="css/bootstrap-wysihtml5.css" />

The Javascript

<script src="js/bootstrap-wysihtml5.js"></script>

Usage

jQuery('#wysiwyg').wysihtml5({color: true,html:true});

Markup

<textarea id="wysiwyg" rows="10"></textarea>

CKEditor

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages.

Visit Their Website

The Javasript

<script src="js/ckeditor/ckeditor.js"></script>
<script src="js/ckeditor/adapters/jquery.js"></script>

Usage

jQuery('#ckeditor').ckeditor();

Markup

<textarea id="ckeditor" rows="10"></textarea>

Code Editor

This template uses CodeMirror for the text editor. You can view more examples and documentation at their website here

Credits

I've used the following images, icons or other files as listed.

Bootstrap
Font Awesome Icons by Font Awesome
jQuery by John Resig
jQuery UI
Touch Punch by David Furfero
Full Calendar by Adam Shaw
Flot Charts
Gritter for jQuery (Growl) by Jordan Boesch
Lato Font by SIL
Bootstrap Time Picker by Joris de Wit
Bootstrap Wizard by Vincent Gabriel & Jason Gill
Bootstrap WYSIWYG by James Hollingworth
Select 2 by ivaynberg
Color Picker by Stefan Petre
Dropzone by Matias Meno
GMaps by Gustavo Leon
Holder JS by Ivan Malopinsky
jVector Map by Kirill Lebedev
jQuery Cookie by Klaus Hartl
jQuery Data Tables by Allan Jardine
Masked Input by Josh Bush
prettyPhoto by Stephane Caron
jQuery Sparkline
jQuery Form Validation by Jorn Zaefferer
Modernizr
Morris Charts by Olly Smith

Changelog

Version 1.0

Initial Release

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

ThemePixels

chain

Chain Responsive Bootstrap 3 Admin Template

Getting Started

HTML Structure

Main Wrapper

Navigation

Main Panel

Basic Template

CSS

Bootstrap

Files & Structure

style.default.css

bootstrap.override.css

Javascript

jQuery

jQuery UI

Select 2

Color Picker

Dropzone

Calendar

Maps

Gmaps

jVectorMap

Forms

jQuery Tags Input

Autogrow Textarea

Spinner

Time Picker

Input Mask

Form Validation

Bootstrap Wizard

Pretty Photo

Charts

Flot

Morris

Sparkline

Tables

Basic Table

Striped Rows

Responsive Table

WYSIWYG

HTML5 WYSIWYG Editor

CKEditor

Code Editor

Credits

Changelog

Version 1.0