"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!

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)

HighFive Landing Page Template

Table of Contents

1. HTML Structure

Grid

Two Columns

Three Columns

Widget Box

Sub Menu

Progress Bars

2. CSS Files & Structure

3. Javascript

Custom

Plugins

Calendar

Color Picker

Datepicker

Growl Notification

Tabs

Accordion

Custom Alert Box

Slider

Sub Menu

Drop Down Menu

ColorBox

Charts

File Manager

Form Validation

WYSIWYG Editor

PHP Code Explanation

Sources & Credits