"Mandy Lane Premium Admin Template" Documentation v1.0

# HighFive Landing Page Template

Created: 11/29/2011 By: Mienard Lumaad (mlumaad)

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

## Table of Contents

1. HTML Structure
2. CSS Files & Structure
3. Javascript
   - Calendar
   - Color Picker
   - Date Picker
   - Growl Notification
   - Tabs
   - Accordion
   - Custom Alert Box
   - Slider
   - Sub Menu
   - Color Box
   - Charts
   - File Manager
   - Form Validation
   - WYSIWYG Editor
4. PHP Code Explanation
5. Sources & Credits

## 1. HTML Structure

This theme is a flexible layout with up to six columns. All of the information within the header area is nested within a div with a class of "header".

    <div class="header">

      <form id="search" action="" method="POST">
      	<input type="text" name="keyword" /> <button class="searchbutton"></button>
      </form>

      <div class="topheader">
      	<ul class="notebutton">
      		<li class="note"> ... </li>
    	</ul>
      </div><!--topheader-->

      <!---logo--->
      <a href=""><img src="images/logo2.png" alt="Logo" /></a>

      <div class="tabmenu">
    	...
      </div><!--tabmenu-->

      <div class="accountinfo">
      	...
      </div><!--accountinfo-->

    </div><!--header-->

All of the information within the left area is nested within a div with a class of "sidebar".

    <div class="sidebar">
       <div id="accordion">
          <h3 class="open">Main Navigation</h3>
          <div class="content" style="display: block;">
             <ul class="leftmenu">
                <li> ... </li>
             </ul>
          </div>
       </div>
       //// additional content here
    </div><!--sidebar-->

### Grid

File: grid.html

All of the information within the main area is nested within a div with a class of "maincontent". You can divide it by columns if you like by using the following tags listed below

#### Two Columns

    <div class="one_half"> content here... </div>
    <div class="one_half last> content here ... </div>

#### Three Columns

    <div class="one_third"> content here ... </div>
    <div class="one_third"> content here ... </div>
    <div class="one_third last"> content here ... </div>

This theme also allows up to 6 columns by using a class of two_third, one_fourth, three_fourth, one_fifth, four_fifth, one_sixth and five_sixth. You can also create 2 columns using a combination of two_third and one_third. Make sure to add a class name of "last" to prevent your page messed up

### Widget Box

Files: dashboard.html, elements.html

This theme have 2 widget box styles by using a class name of widgetbox and widgetbox2. The html code for widget box should be like in below:

    <div class="widgetbox">
       <h3><span>Title goes here ... </span></h3>
       <div class="content">
          content goes here ...
       </div><!-- content -->
    </div><!-- widgetbox -->

### Sub Menu

Files: users.html, gallery.html

You can use submenu anywhere in the page by using the following code below:

    <ul class="submenu">
       <li class="current"><a href="">All (2430)</a></li>
       <li><a href="">Active (2000)</a></li>
       <li><a href="">Inactive (430)</a></li>
    </ul>

### Progress Bars

Files: dashboard.html, reports.html

This template have two types of progress bar by using the class name "bar" and "bar2" inside a class name of progress.

    <div class="progress">
       Storage
       <div class="bar2">
          <div class="value bluebar" style="width: 60%;"><small>60%</small></div>
       </div>
    </div><!--progress-->

## 2. CSS Files & Structure

This template contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file. Below is what css styles are arranged in style.css. CSS files are located in folder /css.

    1. General Styles
    2. Notification messages
    3. Login Page
    4. Top Header
    5. Tab Menu
    6. Side Bar
    7. Columns
    8. Main content styles
    9. Buttons
    10. Widget Box
    11. Progress Bar
    12. Sub Menu
    13. Form Styling
    14. Standard Table
    15. Pagination
    16. Gallery
    17. Elements
    18. Icons
    19. Invoice
    20. Custom Styles

## 3. Javascript

This theme imports a total of 25 Javascript files.

#### Custom

Folder: js/custom/ - 6 scripts for doing the animation, effects, functionality, etc.

- calendar.js - a required script used for calendar.html page
- elements.js - a custom script required for elements.html page
- gallery.js - a custom script required for gallery.html
- general.js - a custom script required in all pages for the header, sidebar menu, login page, etc.
- reports.js - a custom script required for reports.html
- users.js - a custom script requited for users.html

#### Plugins

Folder: js/plugins/ - 19 scripts used for the plugins

- wysiwyg/ - 6 scripts used for wysiwyg editor
  - jquery.wysiwyg.js
  - wysiwyg.colorpicker.js
  - wysiwyg.cssWrap.js
  - wysiwyg.image.js
  - wysiwyg.link.js
  - wysiwyg.table.js
- colorpicker.js - a script for colorpicker
- elfinder.min.js - a script for file manager
- excanvas.min.js - a script used for charts intended for IE
- fullcalendar.min.js - a script used for calendar
- jquery.alerts.js - for custom alert boxes
- jquery.colorbox-min.js - for lightbox type used in viewing images
- jquery.flot.min.js & jquery.flot.pie.min.js - a script for charts used in reports
- jquery.jgrowl.js - a script for notification messages
- jquery.validate.min.js - a requireed script for validating a form
- jquery-1.7.min.js - a js framework required in all of the plugins and custom js
- jquery-ui-1.8.16.custom.min.js - a script for ui effects, animation, datepicker, etc.

Before using any of the plugins above in your page, make sure to add the jQuery in your head.

    <script type="text/javascript" src="js/plugins/jquery-1.7.min.js"></script>

### Calendar

This template uses FullCalendar v1.5.2 by Adam Shaw. You can read the full documentation for this calendar to http://arshaw.com/fullcalendar/docs/

To add the calendar in your page, simply add the following code below into your head tag.

    <script type="text/javascript" src="js/plugins/fullcalendar.min.js"></script>
    <script type="text/javascript" src="js/custom/calendar.js"></script>

Add the code below anywhere you want the calendar to appear.

    <div id="calendar"></div>

    <div id='external-events'>
    	<div class='external-event'>My friend's birthday event</div>
    	<div class='external-event'>My wedding</div>
    	<div class='external-event'>Company party</div>
    	<div class='external-event'>Island hopping event</div>
    	<div class='external-event'>Fun run event</div>
    </div>

### Color Picker

This template uses ColorPicker by Stefan Petre. You can visit www.eyecon.ro to use more of the options and methods for this plugin.

To add colorpicker in your page, simply add the below code into your head tag

    <script type="text/javascript" src="js/plugins/jquery.colorbox-min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    	jQuery('#colorpicker').ColorPicker({
           onSubmit: function(hsb, hex, rgb, el) {
              jQuery(el).val(hex);
                 jQuery(el).ColorPickerHide();
              },
           onBeforeShow: function () {
              jQuery(this).ColorPickerSetColor(this.value);
           }
        }).bind('keyup', function(){ jQuery(this).ColorPickerSetColor(this.value);});
    });
    </script>

After you add the above code in your head, simply add the html code below anywhere you like the colopicker to display.

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

### Datepicker

Datepicker is part of the jQuery UI plugin. To add this in your page a below code is added in the head.

    <script type="text/javascript" src="js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    	jQuery( "#datepicker" ).datepicker();
    });
    </script>

    //add this anywhere in your page
    <input id="datepicker" type="text" class="width50" />

### Growl Notification

This template uses growl notification (jGrowl) by Stan Lemon. You can use growl in any events of your scripts to display notification. You can use growl by adding the code below.

    <script type="text/javascript" src="js/plugins/jquery.jgrowl.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    	//you can insert the below code in any events like click, hover,submit, focus, etc.
    	jQuery.jGrowl("Hello world!");
    });
    </script>

### Tabs

Tabs is part of the jQuery UI plugin. To add this in your page a below code is added in the head.

    <script type="text/javascript" src="js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    	jQuery( "#tabs" ).tabs();
    });
    </script>

    //add this anywhere in your page
    <div id="tabs">
    	<ul>
    		<li><a href="#tabs-1">Sample Tab A</a></li>
    		<li><a href="#tabs-2">Sample Tab B</a></li>
    		<li><a href="#tabs-3">Sample Tab C</a></li>
    	</ul>
    	<div id="tabs-1"> ... </div>
    	<div id="tabs-2"> ... </div>
    	<div id="tabs-3"> ... </div>
    </div><!-- #tabs -->

### Accordion

Accordion is part of the jQuery UI plugin. To add this in your page a below code is added in the head.

    <script type="text/javascript" src="js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    	jQuery( ".accordion" ).accordion();
    });
    </script>

    //add this anywhere in your page
    <div class="accordion">
    	<h3>Title here</h3>
    	<div> content goes here... </div>
    	<h3>Title here</h3>
    	<div> content goes here... </div>
    	<h3>Title here</h3>
    	<div> content goes here... </div>
    </div><!-- accordion -->

### Custom Alert Box

This template uses custom alert boxes by Cory S.N. LaViska. To use this plugin, simply add the line of code below into your head.

Usage:

jAlert( message, [title, callback] )
jConfirm( message, [title, callback] )
jPrompt( message, [value, title, callback] )

    <script type="text/javascript" src="js/plugins/jquery.alerts.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    	jQuery('button').click(function(){
    		jAlert('This is a custom alert box', 'Alert Dialog');
    	});
    });
    </script>

    //add this anywhere on your page
    <button>Click me to view custom alert</button>

### Slider

Slider is part of the jQuery UI plugin. More options available in jQuery UI website. To add this in your page a below code is added in the head.

    <script type="text/javascript" src="js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    	jQuery("#slider").slider({value: 40});
    });
    </script>

    //add this anywhere in your page
    <div id="slider"></div>

### Sub Menu

You can add sub menu anywhere in your page by adding the javascript code below

    <script type="text/javascript">
    jQuery(document).ready(function(){
    	jQuery('.submenu a').click(function(){
    		var id = jQuery(this).attr('href');
    		jQuery('.submenu a').each(function(){
    			jQuery(this).parent().removeClass('current');
    			jQuery(jQuery(this).attr('href')).hide();
    		});
    		jQuery(this).parent().addClass('current');
    		jQuery(id).fadeIn();
    	});
    });
    </script>

    //add this anywhere in your page
    <ul class="submenu">
    	<li class="current"><a href="#gridview">Grid View</a></li>
    	<li><a href="#listview">List View</a></li>
    </ul>
    <div id="gridview"> ... </div>
    <div id="listview"> .. </div>

### Drop Down Menu

This theme supports drop down menu to top menu of header by using this javascript code below.

    jQuery(".subnav").css({display: "none"}); // Opera Fix
    	jQuery(".tabmenu li").hover(function(){
    		jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
    	},function(){
    		jQuery(this).find('ul:first').css({visibility: "hidden"});
    	});

Drop menu is using a line of styles below.

    .tabmenu ul li .subnav {
    	position: absolute; min-width: 200px; top: 39px; left: 0; display: none; z-index: 100; border: 1px solid #6785b0; border-bottom: 0; }
    .tabmenu ul li .subnav li { display: block; float: none; background: none; }
    .tabmenu ul li .subnav li a { display: block; background: #83a3ca; border-bottom: 1px solid #6785b0; color: #fff; }
    .tabmenu ul li .subnav li:last-child a { background: #83a3ca; }
    .tabmenu ul li .subnav li a:hover { background: #7293c1; color: #fff; }
    .tabmenu ul li .subnav a span { padding: 5px 15px; text-transform: capitalize; text-shadow: 1px 1px #6785b0; }
    .tabmenu ul li.current .subnav { border-color: #ccc; border-top: 0; }
    .tabmenu ul li.current .subnav li a { background: #eee; border-bottom: 1px solid #ccc; color: #333; }
    .tabmenu ul li.current .subnav li a:hover { background: #c8d9ed; }
    .tabmenu ul li.current .subnav li a span { text-shadow: 1px 1px #f7f7f7; }

### ColorBox

This theme uses ColorBox by Jack Moore to view images in lightbox. You can use colorbox by adding the code below.

    <script type="text/javascript" src="js/plugins/jquery.colorbox-min.js"></script>
    <script type="text/javascript">
    	jQuery(".thumb").colorbox();
    </script>

    //sample
    <div class="thumb">
    	<a href="images/assets/thumb/large/thumb1.png" class="view">View Image</a>
    </div>

### Charts

This template uses Flot to create chart for your reports or anywhere on your page. To use this plugin just add the line of code below.

    <script type="text/javascript" src="js/plugins/jquery.flot.min.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.flot.pie.min.js"></script>

To know how this theme implemented the flot you can open the file reports.js at js/custom/ folder.

To know more how to use this plugin you can visit the page at http://code.google.com/p/flot/

### File Manager

This theme uses ElFinder File Manager to create a file manager anywhere in the page, simply by adding a line of code below in your head tag.

    <script type="text/javascript" src="js/plugins/elfinder.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function() {
    	jQuery('#fileManager').elfinder({
    		url : 'php/connector.php',
    	})
    });
    </script>

You can browse other custom scripts in users.js and general.js for the left menu top header, etc.

### Form Validation

This template uses form validation by Jörn Zaefferer. To use this plugin, simply add the line of code below

    <script type="text/javascript" src="js/plugins/jquery.validate.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    	jQuery("#form").validate({
    		rules: {
    			name: "required",
    			email: {
    				required: true,
    				email: true,
    			},
    			occupation: "required"
    		},
    		messages: {
    			name: "Please enter your name",
    			email: "Please enter a valid email address",
    			occupation: "Please select your occupation"
    		}
    	});
    });
    </script>

    <form id="form" action="" method="post"> ... </form>

### WYSIWYG Editor

This template uses WYSIWYG Editor by https://github.com/akzhan/jwysiwyg. We use this plugin by adding the line of code below.

    <script type="text/javascript" src="js/plugins/wysiwyg/jquery.wysiwyg.js"></script>
    <script type="text/javascript" src="js/plugins/wysiwyg/wysiwyg.image.js"></script>
    <script type="text/javascript" src="js/plugins/wysiwyg/wysiwyg.link.js"></script>
    <script type="text/javascript" src="js/plugins/wysiwyg/wysiwyg.table.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function() {
    	jQuery('#wysiwyg').wysiwyg();
    });
    </script>

    <textarea id="wysiwyg" cols="130" rows="15"></textarea>

## PHP Code Explanation

I am using PHP files required in order to use the ElFinder File Manager. Open the file php/connector.php. Go to line 30 and change the following line of code below

    $opts = array(
    	'root'            => '../files',			// path to root directory
    	'URL'             => 'http://yourdomain/files/',	// root directory URL
    	'rootAlias'       => 'Home',				// display this instead of root directory name

## Sources & Credits

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

- IconSweets - Free Icons by YummyGum
- IconSweets2 - Even more free icons by YummyGum
- Quartz by Andy Gongea
- Diagram Icon set by Double J Design
- jQuery by John Resig
- jQuery UI
- WYSIWYG
- ColorPicker by Stefan Petre
- ElFinder File Manager for web
- FullCalendar v1.5.2 by Adam Shaw
- jQuery Alert Dialogs Plugin by Cory S.N. LaViska
- ColorBox v1.3.18
- Flot Chart
- jGrowl 1.2.6 by Stan Lemon
- jQuery Validation by Jörn Zaefferer
- Droid Sans Front by Google Fonts

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.

Mienard Lumaad (mlumaad)