Thank you for purchasing ORB. We hope that the development of your new project based on our theme will bring you joy and happiness. We are also hope that you appreciate our work and will continue to purchase our products in future. Please do not forget to rate us in downloads section on Themeforest

This template — is the original author's vision of how the admin dashboard should look like. Nice combination of colors, unobtrusive transitions, responsive design, code culture and unique features — that is all our ORB. Please note that ORB made for professionals who engage in creation CRM and CMS back-ends and require programming skills and deep (medium) knowledge in JS, CSS3, HTML and PHP. If you a novice in web-development ORB could be great starting point to code diggin and copy-paste style studying.

This is a ORB page layout. Logically page bodyconsist from two horizontal blocks - top navigation and main content wrapper. Main wrapper consist from three vertical blocks – left main site navigation, central content and userbar, that is hidden by default, so called off-canvas block. Let have closer look under the hood.

1. Top Navigation

Top Navigation — contains. At left: logo block, menu trigger, notification, inbox dropdown. At right lock screen button, settings dropdown, fullscreen trigger and userbar trigger.

<!--Navigation-->
<nav class="main-header clearfix" role="navigation">
//Here comes the contents of top navbar//
</nav>
<!--/Navigation--> 

2. Main Wrapper

As we stated before Main Wrapper consist of three blocks. Here they are speaking HTML language. As you see — there is no any difficulties. Everything simple.

<!--MainWrapper-->
<div class="main-wrap">

<!-- /Offcanvas user menu--> 
<aside class="user-menu"> 
</aside>
<!-- /Offcanvas user menu--> 

<!--Main Menu-->
<div class="responsive-admin-menu">
</div>
<!--/MainMenu-->

<!--Content Wrapper-->
<div class="content-wrapper">
</div>
<!--/Content Wrapper -->

</div>
<!--/MainWrapper--> 

3. Content Block

Content Block from top to bottom consist from horizontal dropdown block with dummy data - sparklines charts, breadcrumb, page header and content block itself.

<!--Content Wrapper-->
<div class="content-wrapper"> 
	<div class="row"> 
	<!--Main Row--> 
		<!--Horisontal Dropdown-->
		<nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">
		//Contents of horizontal dropdown//
		</nav>

	    <!--Breadcrumb-->          
		<div class="breadcrumb clearfix">
		//Contents of breadcrumbs//
		</div>
		<!--/Breadcrumb-->
            
		<div class="page-header">
		<h1>Header<small>Example</small></h1>
		</div>
            
		<!-- Widget Row Start grid -->
		<div class="row" id="powerwidgets"> 
		<div class="col-md-12 bootstrap-grid"> 
		//Main Content - Widgets, Panels...
		</div>
		<!-- /Inner Row Col-md-12 -->       
		</div>
		<!-- /Widgets Row End Grid--> 
            
</div>
<!-- / Content Wrapper --> 

Shortlist of Cascading StyleSheets used in ORB Theme

ORB Power Widgets is a heart of ORB. It is a powerwidgets.js and powerwidgets.min.js Widgets give user flexibility and full control over content organization. Generally, we have already take a look on ORB Widgets, their data-attributes and options. By now — take a look on advanced widget usage and options. Here is Javascript from scripts.js that covers all parametres of widget usage.

if ($('#powerwidgets').length) {
$('#powerwidgets').powerWidgets({
   grid: '.bootstrap-grid',
   widgets: '.powerwidget',
   localStorage: true,
   deleteSettingsKey: '#deletesettingskey-options',
   settingsKeyLabel: 'Reset settings?',
   deletePositionKey: '#deletepositionkey-options',
   positionKeyLabel: 'Reset position?',
   sortable: true,
   buttonsHidden: false,
   toggleButton: true,
   toggleClass: 'fa fa-chevron-circle-up | fa fa-chevron-circle-down',
   toggleSpeed: 200,
   onToggle: function () {},
   deleteButton: true,
   deleteClass: 'fa fa-times-circle',
   onDelete: function (widget) {
      $('#delete-widget').modal(); // shows the modal
      $(widget).addClass('deletethiswidget'); // ads an indicator class to find the widget
   },
   editButton: true,
   editPlaceholder: '.powerwidget-editbox',
   editClass: 'fa fa-cog | fa fa-cog',
   editSpeed: 200,
   onEdit: function () {},
   fullscreenButton: true,
   fullscreenClass: 'fa fa-arrows-alt | fa fa-arrows-alt',
   fullscreenDiff: 3,
   onFullscreen: function () {},
   buttonOrder: '%refresh% %delete% %edit% %fullscreen% %toggle%',
   opacity: 1.0,
   dragHandle: '> header',
   placeholderClass: 'powerwidget-placeholder',
   indicator: true,
   indicatorTime: 600,
   ajax: true,
   timestampPlaceholder: '.powerwidget-timestamp',
   timestampFormat: 'Last update: %m%/%d%/%y% %h%:%i%:%s%',
   refreshButton: true,
   refreshButtonClass: 'fa fa-refresh',
   labelError: 'Sorry but there was a error:',
   labelUpdated: 'Last Update:',
   labelRefresh: 'Refresh',
   labelDelete: 'Delete widget:',
   afterLoad: function () {},
   rtl: false,
   onChange: function () {},
   onSave: function () {}
});
      }

      // Custom way to delete widgets.
      $('#trigger-deletewidget').click(function (e) {
$('.deletethiswidget').remove(); // delete widget
$('#delete-widget').modal('hide'); // close the modal
      });
      $('#trigger-deletewidget-reset').click(function (e) {
$('body').find('.deletethiswidget').removeClass('deletethiswidget'); // cancel so remove indicator class
      });


      // Empty all local storage. (demo not needed)
      $('.empty-local-storage').click(function (e) {
var $m = $('#confirm_replacer');
if ($m.length && typeof $.fn.modal === 'function') {
   $('#bootconfirm_confirm', $m).off(clickEvent).on(clickEvent, function (e) {
      localStorage.clear();
      location.reload();
      $m.modal().hide();
   });
   $('.modal-title', $m).text("Clear all localStorage");
   $m.modal();
} else {
   var cls = confirm("Clear all localStorage?");
   if (cls && localStorage) {
      localStorage.clear();
      location.reload();
   }
}
e.preventDefault();
      });
          

Powerwidget plugin options

ORB Widgets give you full controls over widgets and portlets (on widgets basis). You can change buttons styles, dragHandle, icons, set toggle and edit speed, change buttons order and much more. See options below.

Update plugin and add new powerwidgets

Use the update method to transform newly added widgets into powerwidgets.

$('#id').powerWdigets('update');//will update all of the new widgets on the page
$('#id').powerWdigets('update', '#id');//will only update the new widgets inside this ID

Adding custom buttons to a widget

How to add custom buttons to the widgets. Add the code after the plugin call. You need to change the widgets id, the button class (someclass) and the icon class (bookmark). The second block is a basic click event with

// add button
$('#widgetsid').find('.powerwidget-ctrls').append('');

// run the custom action
$('body').on('click', '.someclass',function(){

    if($(this).children().hasClass('fa fa-bookmark')){
        $(this).children().removeClass('fa fa-bookmark').addClass('fa fa-folder');
        
        // your code goes here(start)
    }else{
        $(this).children().removeClass('fa fa-folder').addClass('fa fa-bookmark');
        
        // tour code goes here(end)
    }
    
    // code goes here(on every button click)
});

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. Usage: $.fn.pluginName.key = 'value';

Generally, ORB is creating with neutral color palette, and if you wish you can use all variety of colors. Hovewer, we define some main colors that is compartible with ORB and looks great in every app used in ORB. Please note, that these colors are repeatable — if you want, you can change them globally using search/replace feature of your favorite code editor.

As you seen that palette will cover all your possible dreams. Using of colors helpers or shortcodes will make your work quicker, accurate and even fun. Combining background colors and text colors you may reach interesting results and effects. Please see example below to ensure how easily you can manipulate colors shortcodes to get unique look for your blocks and text.

<div class="bg-green padding-20px text-white">...</div>
<div class="dropcap bg-cold-grey text-white>...</div>
<span class="label bg-purple">...</span>

The exactly the same situation when you style widgets and portles. There are two ways of styling widget — change default widget handler header and change background color of whole widget — in that case you get styled portlet. For both cases we get predefined styles. Let have closer look. This is a default ORB Power Widget.

<!-- New widget -->
<div class="powerwidget" id="chat" data-widget-editbutton="false">
<header>
<h2>Widget<small>So Grey and Boring</small></h2>
</header>
<div class="inner-spacer">Sample Widget</div>
</div>
<!-- End Widget -->

To get handle header styled just add color you wish. Find class="powerwidget" and add blue class. Yes! Let it be blue. You get now class="powerwidget blue". Full list of available colors see above. In main css file all styles for styling widget header in Colors Helpers Chapter, together with other color styles.

<!-- New widget -->
<div class="powerwidget blue" id="chat" data-widget-editbutton="false">
<header>
<h2>Widget<small>Blue and Nice</small></h2>
</header>
<div class="inner-spacer">Sample Widget</div>
</div>
<!-- End Widget -->

To get widget looks like portlet (as shown on Portlets Page) we need to get styled not only header but powerwidget inner-spacer class. ORB has it shortcoded too. To get widget become blue portlet simple add .powerwidget-as-portlet-blue class to your widget. Full list of available colors see above. In main css file all styles for styling widget header in Colors Helpers Chapter, together with other color styles.

<!-- New widget -->
<div class="powerwidget powerwidget-as-portlet-blue" id="chat" data-widget-editbutton="false">
<header>
<h2>Widget<small>Blue and Nice</small></h2>
</header>
<div class="inner-spacer">Sample Widget</div>
</div>
<!-- End Widget -->

All scripts initialization settings from all scripts engaged in ORB stored in mainscripts.js file. This file also contains scripts and settings for all applications used on all page in theme. Like HTML and CSS ORB JavaScript is also hardly commented. So, you easily find code you need without any difficulties. Please note — we include only minified versions of apps in ORB archive. To get full versions please visit app homepage. Here is table of all scripts and apps used in ORB Theme.

Animation

Bootstrap Modal and Popover Animation — one of the feature of ORB. As we stated before ORB has modified Bootstrap Modal Class within animation.jsfile to get animations work. As you seen on this page modal has two animated effects — before modal window open (incoming) and after modal closed or executed (outgoing). So we need to apply these animation to modal. Modified Modal Class allows to do it via data-attrbutes options.

<!-- The button -->
<a href="#myModal1" role="button" class="btn" data-toggle="modal">Button Label</a>
<!-- The modal -->
<div id="myModal1" class="modal" data-easein="fadeInLeft" data-easeout="fadeOutLeft"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
		  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		  <h3 id="myModalLabel">Modal header 1</h3>
		</div>
		<div class="modal-body">
		  <p>One fine body…</p>
		</div>
		<div class="modal-footer">
		  <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
		  <button class="btn btn-primary">Save changes</button>
		</div>
	</div>
	</div>
</div>

The main lesson you should learn from example above is data-attributes data-easein="fadeInLeft" and data-easeout="fadeOutLeft", which are incoming and outgoing animations. The list of predefined and balanced modal animations you can found here. To experiment you can create your own animations pair using transitions in animate.css

animation.js also extend default Bootstrap Popover behaviour to make possible to add animations to that kind of elements.

<a title="Popover on left" data-animation="false" data-easein="flipInX" href="#" class="btn btn-success" 
rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">flipInX</a>

ORB offers a set of beautiful form elements with large amount of javascript features: validation, masking, modals, ajax submit, datepickers. It allows you to create forms of any complexity and for any needs: login, registration, contacts, review, order, comment, checkout, etc.

HTML Structure

The main HTML structure of the form consists of fieldset, legend, footer and sections. Each section contains label, form element and optional note. Here is the basic structure of registration form.

<form action="" class="orb-form">
  <header>Registration form</header>
  <fieldset>
    <section>
      <label class="input"> <i class="icon-append fa fa-user"></i>
        <input type="text" name="username" placeholder="Username">
      </label>
    </section>
    <section>
      <label class="input"> <i class="icon-append fa fa-envelope-o"></i>
        <input type="text" name="email" placeholder="Email address">
      </label>
    </section>
    <section>
      <label class="input"> <i class="icon-append fa fa-lock"></i>
        <input type="password" name="password" placeholder="Password">
      </label>
    </section>
    <section>
      <label class="input"> <i class="icon-append fa fa-lock"></i>
        <input type="password" name="passwordConfirm" placeholder="Confirm password">
      </label>
    </section>
    <fieldset>
    </fieldset>
    <div class="row">
      <section class="col col-6">
        <label class="input">
          <input type="text" name="firstmane" placeholder="First name">
        </label>
      </section>
      <section class="col col-6">
        <label class="input">
          <input type="text" name="lastname" placeholder="Last name">
        </label>
      </section>
    </div>
    <section>
      <label class="select">
        <select name="gender">
          <option value="0" selected disabled>Gender</option>
          <option value="1">Male</option>
          <option value="2">Female</option>
          <option value="3">Other</option>
        </select>
        <i></i> </label>
    </section>
    <section>
      <label class="checkbox">
        <input type="checkbox" name="subscription" id="subscription">
        <i></i>I want to receive news and  special offers</label>
      <label class="checkbox">
        <input type="checkbox" name="terms" id="terms">
        <i></i>I agree with the Terms and Conditions</label>
    </section>
  </fieldset>
  <footer>
    <button type="submit" class="btn btn-danger">Submit</button>
  </footer>
</form>

Icons

ORB uses 3 set of icons — Glyphicons, FontAwesome, Entypo. Each set has almost the same markup format. For example, to use one of Font Awesome Icons you need to add tag with 3 classes. First class defines icon position: icon-append or icon-prepend. Other classes define appearance of the icon. For example, if we need appended user icon we get the following markup:

<section>
  <label class="input"> <i class="icon-append fa fa-user"></i>
    <input type="text">
  </label>
</section>

Placeholders

You can use placeholders for inputs and textareas. Just specify placeholder attribute like in demo below.

<section>
  <label class="input">
    <input type="text" placeholder="Placeholder text">
  </label>
</section>
<section>
  <label class="textarea">
    <textarea rows="3" placeholder="Placeholder text"></textarea>
  </label>
</section>

Also there is a possibility to add placeholder for select element. To do that we need to disable first element.

<section>
  <label class="select">
    <select>
      <option value="0" selected disabled>Gender</option>
      <option value="1">Male</option>
      <option value="2">Female</option>
      <option value="3">Other</option>
    </select>
    <i></i> </label>
</section>

Elements States

Like in Bootstrap, Each element of ORB Forms has 3 additional states: error, success and disabled. To use one of them just add state-error, state-success or state-disabled class to element container.

<section>
  <label class="input state-error">
    <input type="text">
  </label>
</section>
<section>
  <label class="textarea state-success">
    <textarea rows="3" placeholder="Placeholder text"></textarea>
  </label>
</section>

When using disabled state don't forget to add disabled attribute to form element.

<section>
  <label class="input state-error">
    <input type="text" disabled>
  </label>
</section>

Client Side Validation and Masking

As we stated before in Javascript section we use jQuery plugin jquery.maskedinput.min.js for masked input and jquery.validate.min.js for form validation. Back-end for both plugins in scripts.js you can find under the Forms Chapter

Since version 1.1 ORB is bundled with MegaMenu, that allows you to create very complex menus with tons of elements inside like — Maps, Images, Videos, different kinds of lists, forms and more. MegaMenu is totally built on Bootstrap and use common BS dropdown behaviour, when dropdowns open by clicking on main links of the menu. The main thing you should know about MegaMenu that you can override that Bootstrap behaviour — and open dropdowns on mouse hover events. You should do the following two steps:

1. Include bootstrap-hover-dropdown.js file right afrer Bootstrap core JavaScript
2. Initialize hover-dropdown using Java Script below

$('.dropdown-toggle').dropdownHover().dropdown();
$(document).on('click', '.orbmm .dropdown-menu', function(e) {
e.stopPropagation()

ORB FrontEnd — is a set of well designed pages which will help you create typical corporate website. It comes bundled with new scripts, styles and apps, but the main idea and philosophy is the same with ORB Dashboard.

Scripts and Apps

Generally Front End uses the same scripts as in Dashboard, but it also have scripts, that not included in Dashboard. Let's have look on them.

PHP

ORB FrontEnd bundled with working dynamic pages for process incoming via page data. We have alrady talked about these file above. For example FE has save.php file for storing inputed emails in MySQL Database. It is a very basic approach. Open and fill all the data to save.php file: $db = mysql_connect("localhost", "database_name", "database_password"); mysql_select_db("database_name", $db);. Go further. Find base.sql file for creation table in your MySQL Database. To setup MySQL database to save inputed emails please Run PHPMyAdmin or any other server software for work with MySQL. Choose your database, and import base.sql to your database.

JCart

Generally you should know one thing before startplaying with localStorage jCart — this is main values, stored in beginning of localstorage-jcart.js file.

cartVat = 0.24; //Your Country VAT Rate
cartCurrency = "$"; //Your Currency
productPage = ""; // complete this with your .php product page
imgPath = "images/cart/"; // complete this with yout images path 

The example of sample PHP product page can be found below. It can be something like that:

<h2>your product id is:
<?php
    if (isset($_GET['productid'])) {
        echo $_GET['productid'];
    }
?>
</h2>

06.08.2014 — Version 1.2

1. Front End Released
2. Minor CSS Bugs Fixed

20.06.2014 — Version 1.1.3

1. Widgets are now fully working on mobile devices
2. JustGauge Library Added
3. Fresh look of dashboard page and one new variant of Dashboard added
4. CSS Updated and reorginized
5. JS Updated
6. New FlotChart graphs added

11.06.2014 — Version 1.1.1

1. Bootstrap Tabs and Carousels in MegaMenu
2. Go To Top Button on all pages

09.06.2014 — Version 1.1

1. ORB is now bundled with Horizontal MegaMenu
2. All Google Maps Instances is now using gMap plugin. That means that scripts.js is now has rewrited Google Maps chapter. The main thing you should remember that Google Maps is now initialized via .map-container class.
3. Minor CSS Bugs Fixed (Totally enchanced left-menu hover behaviour at medium size devices).
4. Minor JavaScript Bugs Fixed
5. Fixed PowerWidget Controls Touch Events on Mobile Devices

23.05.2014 — Initial Release

We'll update ORB till the end of the time. As a respected buyer you'll get unlimited updates with bugfixes and new features for free forever.

Have answers, comment, bug reports — connect me via form. (You should be logged to Themeforest)