Vendroid 1.1.4

Super Flexible Admin HTML Templates

created: 21 May 2013
latest update: 08 August 2014
by: Venmond, Inc.
email: info@venmond.com

Thank you for purchasing our theme. If you have any question beyond the scope of this documentation help, don't hestitate to contact us via our forum or theme forest profile

Setup

Vendroid comes with two versions:

PHP with configurable files
HTML files

Even HTML files, some files need ajax. So for the best use, please try the files on your local server.

To try locally / offline, you need to install program such as:

WAMP (recommended), or
XAMPP

Download and install the application, if you need more installation server guide please go to each site and see more detail instruction.

Start the WAMP server. In WAMP for windows, copy folder Vendroid to C:\wamp\www folder (your drive of installation) Go to your browser, and type http://localhost/vendoid

For php version, open templates/headers/opening.tpl.php. If you put your site inside a folder, edit the $subfolder="/vendroid"; into your subfolder name, example: http://localhost/vendroid/.

If you put on your main template on root/public_html, just fill with blank: $subfolder="";

Files Structure

Vendroid Files Structure:

Vendroid CSS files explanation:

css/theme.min.css : compressed css files (used in the demo)
css/theme.css : uncompressed files with explanation and tables of content (not used in the demo)
css/theme-responsive.min.css : compressed css files for responsive features (used in the demo)
css/theme-responsive.css : uncompressed files with explanation and tables of content (not used in the demo)

Vendroid Less files explanation:

.Less files located at /less folder
You must use compiler such as crunch app or any other .less compiler
Only use theme.min.less for uncompressed version, or theme.less for compressed version to compile it to theme.min.css or theme.css
For responsive css file, only use theme-responsive.min.less for uncompressed version, or theme-responsive.less for compressed version to compile it to theme-responsive.min.css or theme-responsive.css

Theme Setting

Open your templates/config.php files.

Variable	Description	HTML Version
GENERAL SETTING
`$author`	Author meta data	<meta name="author" content="$author; ">
`$website_name`	Closing title every page	<title>$title; \| $website_name; </title>
`$footer_message`	Usually for copyright, can input any HTML	at <footer> section: <div class="copyright">$footer_message </div>
`$logo_path`	Path for your logo, Value: 'img/logo.png'	None
`$background`	Value: '' = none, or 'background-login', 'vd_bg-black', 'vd_bg-yellow', 'vd_bg-grey' or create your own background css	<body class="$background">
LAYOUT SETTING
`$responsive`	Value: 1 = Responsive, 0 = Non Responsive	Responsive:<body class="responsive"> and load css/theme-responsive.css No Responsive:<body class="no-responsive"> and load css/non-responsive.css
`$width_non_responsive`	Width for middle or boxed layout with non responsive ( if $responsive set to 0)	inside <head>, add at the bottom: <style> .middle-layout .container, .boxed-layout .container{ width: 1000px !important; max-width: 1000px !important; } </style>
`$layout`	Value: 'full-layout', 'middle-layout', or 'boxed-layout'	<body class="$layout">
`$navbar_top_fixed`	Value: 1 = Top Navigation bar follow when scroll down, 0 = normal	Fixed value: <body class="nav-top-fixed">
HEADER AND FOOTER SETTING
`$header`	Value: 'header-1' or 'header-2' or 'header-3' or other *'header-'** located at templates/headers/$header.tpl.php	None
`$footer`	Value: 'footer-1' or 'footer-2' or 'footer-3' or other 'footer-*' located at templates/footers/$footer.tpl.php	<body class="$background">
HEAD SECTION PANEL MENU SETTING
`$remove_navbar`	Remove Navbar Toggle Button, 1 = show, 0 = hide	None
`$remove_header`	Remove Header Toggle Button, 1 = show, 0 = hide	None
`$fullscreen`	Full Screen Toggle Button, 1 = show, 0 = hide	None
`$boxedtofull`	Boxed to Full Layout Toggle Button, 1 = show, 0 = hide	None
LEFT SIDEBAR NAVIGATION SETTING
`$navbar_left_config`	Value: 2 = Available but Start Invisible, 1 = Available Start Visible, 0 = Not available	Value: 0 = <body class="no-nav-left"> Value: 2 = <body class="nav-left-hide nav-left-start-hide">
`$navbar_left`	Change the sidebar navigation view, Value: 'navbar-tabs-menu' or 'navbar-tabs-profile' or 'navbar-tabs-tab' or 'navbar-email' or 'navbar-chat' or 'navbar-no-tab'. Files to edit in templates/navbars/	See the Nav Variations Example
`$navbar_left_start_width`	Change the sidebar navigation width, Value: '' = default width, 'nav-left-medium' = medium width, 'nav-left-small' = small width.	<body class="$navbar_left_start_width">
`$navbar_left_fixed`	Value: 1 = fixed position , 0 = normal, fixed position compatible with no footer layout	Value: 1 =<body class="nav-left-fixed">
`$navbar_left_menu`	Value: located at templates/navbars/menu- $navbar_left_menu .tpl.php	None
`$navbar_left_extra_class`	Put any class for left sidebar navigation, ex: vd_bg-blue vd_bg-black-80	Put inside <div class="vd_navbar $navbar_left_extra_class">
RIGHT SIDEBAR NAVIGATION SETTING
`$navbar_right_config`	Value: 2 = Available but Start Invisible, 1 = Available Start Visible, 0 = Not available	Value: 0 = <body class="no-nav-right"> Value: 2 = <body class="nav-right-hide nav-right-start-hide">
`$navbar_right`	Change the sidebar navigation view, Value: 'navbar-tabs-menu' or 'navbar-tabs-profile' or 'navbar-tabs-tab' or 'navbar-email' or 'navbar-chat' or 'navbar-no-tab'. Files to edit in templates/navbars/	See the Nav Variations Example
`$navbar_right_start_width`	Change the sidebar navigation width, Value: '' = default width, 'nav-right-medium' = medium width, 'nav-right-small' = small width.	<body class="$navbar_right_start_width">
`$navbar_right_fixed`	Value: 1 = fixed position , 0 = normal, fixed position compatible with no footer layout	Value: 1 =<body class="nav-right-fixed">
`$navbar_right_menu`	Value: located at templates/navbars/menu- $navbar_right_menu .tpl.php	None
`$navbar_right_extra_class`	Put any class for right sidebar navigation, ex: vd_bg-blue, vd_bg-black-80	Put inside <div class="vd_navbar $navbar_right_extra_class">
SIDEBAR MENU TOGGLE BUTTON SETTING
`$medium_nav_toggle`	Visibility of change sidebar menu width from large to medium button. Value: 1= visible, 0 = none	None
`$small_nav_toggle`	Visibility of change sidebar menu width from large to small or medium to small button. Value: 1= visible, 0 = none	None
`$enlarge_left_to_medium`	If small_nav_toggle clicked, enlarge left sidebar menu to: 1 = medium, 0 = default/large	Value: 1 =<body class="enlarge-left-to-medium">
`$enlarge_right_to_medium`	If small_nav_toggle clicked, enlarge right sidebar menu to 1 = medium, 0 = default/large	Value: 1 =<body class="enlarge-right-to-medium">
EXTRA CLASS SETTING
`$top_menu_extra_class`	Value: background class such as 'vd_bg-white', also 'light-top-menu', 'menu-search-style-2'	<div class="vd_top-menu-wrapper $top_menu_extra_class" >
`$logo_container_extra_class`	Value: background class such as 'vd_bg-white', also 'panel-menu-style-2'	<div class="vd_top-nav vd_nav-width $logo_container_extra_class">
`$bottom_extra_class`	Located inside footer value: background class such as 'vd_bg-white' padding or any other class	<div class="vd_bottom $bottom_extra_class">
`$body_extra_class`	Value: 'content-style-2', 'login-layout', 'front-layout', 'remove-navbar', or Other Extra Body Class for your own modification	<body class="$extra_class">
SPECIFIC PAGE CSS SETTING
`$specific_css (array)`	Add multiple external CSS via array, Example: `$specific_css[0] = 'plugins/dataTables/css/jquery.dataTables.min.css';` `$specific_css[1] = 'plugins/dataTables/css/dataTables.bootstrap.css';`	import css inside `<head>` tag
`$page_css`	Add CSS in a page inside `<head>`, Example: `$page_css = '.tab-right{margin-left:-30px; .tab-left{margin-left:-30px;}'`	Add styling css inside `<head>` tag
`$page_responsive_css`	Add CSS in a page inside `<head>` for responsive css code, Example: `$page_css = '@media (max-width: 767px) { .tab-right{margin-left:0; margin-top:0;}}`	Add styling css inside `<head>` tag for responsive css code

Content List Class

Content List class used to create a list. Can be a list of menu, list of tasks, list of blog, or even content grid. Content list fit perfectly combined with mega menu. Example: listtables-small-list.php, listtables-medium-list.php, listtables-blog-small-list.php, listtables-blog-large-list.php.

Basic structure:

<div class="content-list">
	<ul  class="list-wrapper">
		<li>
			<div class="menu-icon vd_yellow">
				<i class="fa fa-suitcase"></i>
			</div>
			<div class="menu-text"> Someone has give you a surprise
				<div class="menu-info">
					<span class="menu-date">12 Minutes Ago</span> 
					<span class="menu-action">
						<span class="menu-action-icon"> <i class="fa fa-eye"></i> </span>
					</span>
				</div>
			</div>
		</li>
	</ul>
</div>

Wrap in <a> tag:

<div class="content-list">
	<ul  class="list-wrapper">
		<li>
			<a href="#">
				<div class="menu-icon vd_yellow">
					<i class="fa fa-suitcase"></i>
				</div>
				<div class="menu-text"> Someone has give you a surprise
					<div class="menu-info">
						<span class="menu-date">12 Minutes Ago</span> 
						<span class="menu-action">
							<span class="menu-action-icon"> <i class="fa fa-eye"></i> </span>
						</span>
					</div>
				</div>
			</a>
		</li>
	</ul>
</div>

Content Menu

Used for menu. Add "content-menu" class beside content-list:

<div class="content-list content-menu">
	<ul class="list-wrapper">
		<li> 
			<a href="#"> 
				<div class="menu-icon vd_grey"><i class=" fa fa-envelope"></i></div> 
				<div class="menu-text">Messages</div>
				<div class="menu-badge"><div class="badge vd_bg-red">10</div></div> 
			</a> 
		</li>
	</ul>
</div>

Content Image

Used for medium size image. Add "content-image" class beside content-list:

<div class="content-list content-image">
	<ul class="list-wrapper">
		<li>
			<div class="menu-icon vd_yellow"><i class="fa fa-code"></i></div>
			<div class="menu-text"> Finish coding jquery plugin
				<div class="menu-info">
					<div class="progress progress-sm"><div class="progress-bar progress-bar-danger" style="width:20%"> 20% </div></div>
				</div>
			</div>
		</li>
		<li>
			<div class="menu-icon"><img src="img/avatar/avatar-3.jpg" alt="example image"></div>
			<div class="menu-text"> Client: Zoe Project
				<div class="menu-info"> 
					<span class="menu-date">Make a call</span> 
					<span class="menu-action"> <span class="menu-action-icon"> <i class="fa fa-phone"></i> </span> </span> 
				</div>
			</div>
		</li>
	</ul>
</div>

Content Blog Small

Used for blog with small image preview. Add "content-blog-small" class beside content-list:

<div class="content-list content-blog-small">
	<ul class="list-wrapper">
		<li>
			<div class="menu-icon"> <img src="img/blog/01-square-200.jpg" alt="example image"> </div>
			<div class="menu-text">
				<h2 class="blog-title font-bold letter-xs"><a href="#"> Some Significant Blog Title </a></h2>
				<div class="menu-info">
					<div class="menu-date font-xs">January 10th, 1987 </div>
				</div>
				<div class="menu-tags  mgbt-xs-15"> 
					Tags: <a href="#"><span class="label vd_bg-yellow">Sports</span></a> <a href="#"><span class="label vd_bg-yellow">Hobby</span></a>
				</div>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore...</p>
				<a href="#" class="btn vd_btn vd_bg-green btn-sm">Read More</a> 
			</div>
 		</li>
	</ul>
</div>

Content Blog Large

Used for blog with large image preview. Add "content-blog-large" class beside content-list:

<div class="content-list content-blog-large">
	<ul class="list-wrapper">
		<li>
			<div class="menu-icon"> <img src="img/blog/01-square-200.jpg" alt="example image"> </div>
			<div class="menu-text">
				<h2 class="blog-title font-bold letter-xs"><a href="#"> Some Significant Blog Title </a></h2>
				<div class="menu-info">
					<div class="menu-date font-xs">January 10th, 1987 </div>
				</div>
				<div class="menu-tags  mgbt-xs-15"> 
					Tags: <a href="#"><span class="label vd_bg-yellow">Sports</span></a> <a href="#"><span class="label vd_bg-yellow">Hobby</span></a>
				</div>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore...</p>
				<a href="#" class="btn vd_btn vd_bg-green btn-sm">Read More</a> 
			</div>
 		</li>
	</ul>
</div>

List Class Helper

Class to help style the list:

Class	Function	Placement
`align-right`	Set Aligned Right List	<li class="align-right"><!--content --></li>
`warning`	Set warning background on li	<li class="warning"><!--content --></li>
`menu-action-right`	Menu Action Position Absolute on the Right Top	<ul class="list-wrapper menu-action-right">
`no-bd-btm`	Remove border bottom separator on li	<ul class="list-wrapper no-bd-btm">
`pd-lr-10`	Add padding left and right 10px on li	<ul class="list-wrapper pd-lr-10">
`pd-lr-15`	Add padding left and right 15px on li	<ul class="list-wrapper pd-lr-15">
`pd-lr-20`	Add padding left and right 20px on li	<ul class="list-wrapper pd-lr-20">
`pd-lr-25`	Add padding left and right 25px on li	<ul class="list-wrapper pd-lr-25">
`wrap-10`	Add padding left and right: 10px and margin left and right: -10px on li	<ul class="list-wrapper wrap-10">
`wrap-15`	Add padding left and right: 15px and margin left and right: -15px on li	<ul class="list-wrapper wrap-15">
`wrap-20`	Add padding left and right: 20px and margin left and right: -20px on li	<ul class="list-wrapper wrap-20">
`wrap-25`	Add padding left and right: 25px and margin left and right: -25px on li	<ul class="list-wrapper wrap-25">

Content Grid Class

Content Grid class used to create a grid type list. Content grid fit perfectly combined with mega menu. Example: listtables-grid-list.php

Basic structure:

<div class="content-grid column-xs-3 column-sm-4 column-md-5 column-lg-6 height-xs-4">
	<ul class="list-wrapper">
		<li> 
                    <a href="#"> <div class="menu-icon"><img src="img/avatar/avatar.jpg" alt="example image"></div> </a>
			<div class="menu-text"> Gabriella Montagna
				<div class="menu-info">
					<div class="menu-date">San Diego</div>                                                                         
					<div class="menu-action">
						<span class="menu-action-icon vd_green vd_bd-green"><i class="fa fa-check"></i></span> 
						<span class="menu-action-icon vd_red vd_bd-red"><i class="fa fa-times"></i></span>
					</div>                                
				</div>
			</div> 
		</li>
	</ul>
</div>

Content Grid Class Option

This class can also be used as parent of "content-grid" class

Column qty	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
1 Column	`column-xs-1`	`column-sm-1`	`column-md-1`	`column-lg-1`
2 Columns	`column-xs-2`	`column-sm-2`	`column-md-2`	`column-lg-2`
3 Columns	`column-xs-3`	`column-sm-3`	`column-md-3`	`column-lg-3`
4 Columns	`column-xs-4`	`column-sm-4`	`column-md-4`	`column-lg-4`
5 Columns	`column-xs-5`	`column-sm-5`	`column-md-5`	`column-lg-5`
6 Columns	`column-xs-6`	`column-sm-6`	`column-md-6`	`column-lg-6`

Column height	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
60px	`height-xs-1`	`height-sm-1`	`height-md-1`	`height-lg-1`
180px	`height-xs-2`	`height-sm-2`	`height-md-2`	`height-lg-2`
240px	`height-xs-3`	`height-sm-3`	`height-md-3`	`height-lg-3`
320px	`height-xs-4`	`height-sm-4`	`height-md-4`	`height-lg-4`
480px	`height-xs-5`	`height-sm-5`	`height-md-5`	`height-lg-5`
720px	`height-xs-6`	`height-sm-6`	`height-md-6`	`height-lg-6`

Mega Menu

Basic Mega Menu Structure:

<div class="vd_mega-menu-wrapper">
	<div class="vd_mega-menu">
		<ul class="mega-ul">   
			<li class="mega-li"> 
				<a href="#"> 
					<span class="mega-text">Home</span>
				</a> 
			</li>
		</ul>
	</div>
</div>

List for one circle icon with badge:

<li class="one-icon mega-li"> 
	<a href="#" class="mega-link">
		<span class="mega-icon"><i class="fa fa-users"></i></span> 
		<span class="badge vd_bg-red">1</span>        
	</a>
</li>

List for one big icon with badge:

<li class="one-big-icon mega-li"> 
	<a href="#" class="mega-link">
		<span class="mega-icon"><i class="fa fa-users"></i></span> 
		<span class="badge vd_bg-red">1</span>        
	</a>
</li>

List for profile:

<li class="profile mega-li"> 
	<a href="#" class="mega-link">
            <span  class="mega-image">
                <img src="img/avatar/avatar.jpg" alt="example image" />               
            </span>
            <span class="mega-name">
                Caroline <i class="fa fa-caret-down fa-fw"></i> 
            </span>
	</a>
</li>

2nd Level Menu

Open by Mouse Click

add ( data-action="click-trigger" on "mega-link" <a> tag ) and ( data-action="click-target" on "vd_mega-menu-content" <div> tag ):

<li class="profile mega-li"> 
	<a href="#" class="mega-link">
            <span  class="mega-image">
                <img src="img/avatar/avatar.jpg" alt="example image" />               
            </span>
            <span class="mega-name">
                Caroline <i class="fa fa-caret-down fa-fw"></i> 
            </span>
	</a>
	<div class="vd_mega-menu-content  width-xs-2  left-xs left-sm" data-action="click-target">
		<div class="child-menu"> 
			<!-- Content (Explained in Content List Class Section) -->
		</div>
	</div>
</li>

Open by Mouse Hover

add ( "hover-trigger" class on "mega-li" <li> tag ) and ( "hover-target" on "vd_mega-menu-content" class <div> tag ):

<li class="profile mega-li hover-trigger"> 
	<a href="#" class="mega-link">
            <span  class="mega-image">
                <img src="img/avatar/avatar.jpg" alt="example image" />               
            </span>
            <span class="mega-name">
                Caroline <i class="fa fa-caret-down fa-fw"></i> 
            </span>
	</a>
	<div class="vd_mega-menu-content  width-xs-2  left-xs left-sm hover-target" data-action="click-target">
		<div class="child-menu"> 
			<!-- Content (Explained in Content List Class Section) -->
		</div>
	</div>
</li>

Above code is still non responsive, usually used for status, task management, grid, or chat drop down. To use it as menu, the menu need to be responsive, below are how to use it.

Responsive Horizontal Menu

Add ("horizontal-menu" class on "vd_mega-menu" <div> tag). On windows width <768px Menu will change to vertical

<div class="vd_mega-menu-wrapper horizontal-menu">
	<div class="vd_mega-menu">
		<!-- <ul> -->
	</div>
</div>

2nd and 3rd Level Horizontal Menu Example

Below are example on how 2nd and 3rd level horizontal menu by hover trigger strutured :

<ul class="mega-ul">
	<li class="hover-trigger mega-li"> 
		<a href="#" class="mega-link"  data-action="click-trigger"> 
			<span class="mega-text">Open on Hover <i class="fa fa-caret-down fa-fw"></i></span>
		</a> 
		<div class="vd_mega-menu-content  width-xs-2  right-xs hover-target" data-action="click-target">
			<div class="child-menu"> 
				<div class="content-list content-menu">
					<ul class="list-wrapper pd-lr-10">
						<li  class="hover-trigger"> 
							<a href="#" data-action="click-trigger"> Open Right 
								<span class="menu-badge"><span class="badge no-bg vd_grey"><i class="icon-uniE6D8"></i></span></span>
							</a> 
							<div class="vd_mega-menu-content  width-xs-2  open-right hover-target" data-action="click-target">
								<div class="child-menu"> 
									<div class="content-list content-menu">
										<ul class="list-wrapper pd-lr-10">
											<li> <a href="#"> Submenu Level</a> </li>  
											<li> <a href="#"> Submenu</a> </li>
											<li> <a href="#"> Submenu</a> </li>                                   
										</ul>
									</div> 
								</div> 
							</div>                         
						</li>
						<li> <a href="#"> Submenu</a> </li>  
						<li  class="hover-trigger">
							<a href="#" data-action="click-trigger"> Open Left 
								<span class="menu-badge"><span class="badge no-bg vd_grey"><i class="icon-uniE6D8"></i></span></span>
							</a> 
							<div class="vd_mega-menu-content  width-xs-2  open-left hover-target" data-action="click-target">
								<div class="child-menu"> 
									<div class="content-list content-menu">
										<ul class="list-wrapper pd-lr-10">
											<li> <a href="#"> Submenu Level</a> </li>  
											<li> <a href="#"> Submenu</a> </li>
											<li> <a href="#"> Submenu</a> </li>                                   
										</ul>
									</div> 
								</div> 
							</div>                           
						</li>
						<li> <a href="#"> Submenu</a> </li>                                   
					</ul>
				</div> 
			</div> 
		</div>        
	</li>   
</ul>

Mega Menu Content Class Options

Beside "vd_mega-menu-content" add class:

Mega Menu Content Width

Column Width	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
60px	`width-xs-1`	`width-sm-1`	`width-md-1`	`width-lg-1`
180px	`width-xs-2`	`width-sm-2`	`width-md-2`	`width-lg-2`
240px	`width-xs-3`	`width-sm-3`	`width-md-3`	`width-lg-3`
320px	`width-xs-4`	`width-sm-4`	`width-md-4`	`width-lg-4`
480px	`width-xs-5`	`width-sm-5`	`width-md-5`	`width-lg-5`
720px	`width-xs-6`	`width-sm-6`	`width-md-6`	`width-lg-6`
1130px / full-width	`width-xs-full`	`width-sm-full`	`width-md-full`	`width-lg-full`
Parent of full-width class	When using full-width class, add class `".parent-width-full"` on the parent class

Mega Menu Content Position

Position	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Left Bottom	`left-xs`	`left-sm`	`left-md`	`left-lg`
Right Bottom	`right-xs`	`right-sm`	`right-md`	`right-lg`
Center for Width: 60px	`center-xs-1`	`center-sm-1`	`center-md-1`	`center-lg-1`
Center for Width: 180px	`center-xs-2`	`center-sm-2`	`center-md-2`	`center-lg-2`
Center for Width: 240px	`center-xs-3`	`center-sm-3`	`center-md-3`	`center-lg-3`
Center for Width: 320px	`center-xs-4`	`center-sm-4`	`center-md-4`	`center-lg-4`
Center for Width: 480px	`center-xs-5`	`center-sm-5`	`center-md-5`	`center-lg-5`
Center for Width: 720px	`center-xs-6`	`center-sm-6`	`center-md-6`	`center-lg-6`
Center for Width: 1130px	`center-xs-full`	`center-sm-full`	`center-md-full`	`center-lg-full`
Open on Top	`open-top`
Open on Left (for horizontal menu )	`open-left`
Open on Right (for horizontal menu )	`open-right`

General Class Helper

Generally used class:

Class	Function	Placement
`font-light`	Font Weight: 300	Any tags
`font-normal`	Font Weight: 400	Any tags
`font-semibold`	Font Weight: 500	Any tags
`font-bold`	Font Weight: 700	Any tags
`font-extrabold`	Font Weight: 900	Any tags
`font-xs`	Font Size: 12px	Any tags
`font-sm`	Font Size: 18px	Any tags
`font-md`	Font Size: 26px	Any tags
`font-lg`	Font Size: 52px	Any tags
`profile-icon`	Font Size: 32px	Any tags
`space-xs`	letter-spacing: -0.5px	Any tags
`space-sm`	letter-spacing: 0.1px	Any tags
`space-md`	letter-spacing: 0.5px	Any tags
`space-lg`	letter-spacing: 1px	Any tags
`lh-sm`	line-height: 16px	Any tags
`append-icon`	line-height: 16px	Any tags
`rotate-min180`	rotate 180 degree	Any tags
`rotate-0`	rotate 0 degree	Any tags
`input-border`	Give border to input	<input> tags
`input-border-btm`	Give border bottom only to input	<input> tags
`vd_li`	Remove list style li	<ul> tags
`radius-10`	Border radius 10px	Any tags
`no-bd`	Border: none	Any tags
`no-bg`	Background: none	Any tags
`no-br`	Border Radius: none	Any tags
`pd-0`, `pd-5`, `pd-10`, `pd-15`, `pd-20`, `pd-25`	Padding: 0, until padding 25px	Any tags
`pdlr-10`	Padding-left 10px, padding right: 10px	Any tags
`pdlr-15`	Padding-left 15px, padding right: 15px	Any tags
`mgr-10`, `mgr-15`, `mgr-20`	Margin Right: 10px, Margin Right: 15px, Margin Right: 20px	Any tags
`mgl-10`, `mgl-15`, `mgl-20`	Margin Left: 10px, Margin Left: 15px, Margin Left: 20px	Any tags
`mgtp--10`, `mgtp--5`, `mgtp-0`, `mgtp-5`, `mgtp-10`, `mgtp-15`, `mgtp-20`	Margin Top: -10px, Margin Top: -5px, Margin Top: 0px, Margin Top: 5px, Margin Top: 10px, Margin Top: 15px, Margin Top: 20px	Any tags
`mgbt-xs-0`, `mgbt-xs-5`, `mgbt-xs-10`, `mgbt-xs-15`, `mgbt-xs-20`	Extra Small Screen Device (<768px): Margin-bottom:0px, 5px, 10px, 15px, 20px	Any tags
`mgbt-sm-0`, `mgbt-sm-5`, `mgbt-sm-10`, `mgbt-sm-15`, `mgbt-sm-20`	Small Screen Device (≥768px): Margin-bottom:0px, 5px, 10px, 15px, 20px	Any tags
`mgbt-md-0`, `mgbt-md-5`, `mgbt-sm-15`, `mgbt-md-15`, `mgbt-md-20`	Medium Screen Device (≥992px): Margin-bottom:0px, 5px, 10px, 15px, 20px	Any tags
`mgbt-lg-0`, `mgbt-lg-5`, `mgbt-sm-20`, `mgbt-lg-15`, `mgbt-lg-20`	Large Screen Device (≥1200px): Margin-bottom:0px, 5px, 10px, 15px, 20px	Any tags
`vd_hover`	Cursor Pointer on hover	Any tags
`vd_info-parent`	Position: relative	Any tags
`vd_info`, `vd_info-menu`	Position: absolute	Child of `vd_info-parent`
`tl`	Put position of vd_menu or vd_info-menu on top left	Beside `vd_info` or `vd_info-menu`
`tr`	Put position of vd_menu or vd_info-menu on top right	Beside `vd_info` or `vd_info-menu`
`bl`	Put position of vd_menu or vd_info-menu on bottom left	Beside `vd_info` or `vd_info-menu`
`br`	Put position of vd_menu or vd_info-menu on bottom left	Beside `vd_info` or `vd_info-menu`
`vd_red`, `vd_blue`, `vd_yellow`, `vd_green`, `vd_black`, `vd_grey`, `vd_soft-grey`, `vd_white`, `vd_facebook`, `vd_twitter`, `vd_googleplus`, `vd_linkedin`	Change text color	Any Tags
`vd_bg-red`, `vd_bg-blue`, `vd_bg-yellow`, `vd_bg-green`, `vd_bg-black`, `vd_bg-grey`, `vd_bg-soft-grey`, `vd_bg-facebook`, `vd_bg-twitter`, `vd_bg-googleplus`, `vd_bg-linkedin`,`vd_bg-dark-red`, `vd_bg-dark-blue`, `vd_bg-dark-yellow`, `vd_bg-dark-green`, `vd_bg-soft-red`, `vd_bg-soft-blue`, `vd_bg-soft-yellow`, `vd_bg-soft-green`	Change background color	Any Tags
`vd_bg-black-10`, `vd_bg-black-20`, `vd_bg-black-30`, `vd_bg-black-40`, `vd_bg-black-50`, `vd_bg-black-60`, `vd_bg-black-70`, `vd_bg-black-80`, `vd_bg-black-90`	Change black background color with opacity	Any Tags
`vd_bg-white-10`, `vd_bg-white-20`, `vd_bg-white-30`, `vd_bg-white-40`, `vd_bg-white-50`, `vd_bg-white-60`, `vd_bg-white-70`, `vd_bg-white-80`, `vd_bg-white-90`	Change white background color with opacity	Any Tags
`vd_bdt-red`, `vd_bdt-blue`, `vd_bdt-yellow`, `vd_bdt-green`, `vd_bdt-black`, `vd_bdt-grey`, `vd_bdt-white`	Change border top color	Any Tags
`vd_bdl-red`, `vd_bdl-blue`, `vd_bdl-yellow`, `vd_bdl-green`, `vd_bdl-black`, `vd_bdl-grey`, `vd_bdl-white`	Change border left color	Any Tags
`left-pos`	Put to the left position	Any Tags with position absolute style
`right-pos`	Put to the left position	Any Tags with position absolute style
`width-10`, `width-20`, `width-30`, `width-40`, `width-50`, `width-60`, `width-70`, `width-80`, `width-90`, `width-100`	Set width to 0% until 100%	Any Tags, usually used for input

Contact Setting

Contact page located at front-1.php or front-2.php. Used to contact the company for more detail informations. To use it just simply find below code or search using keyword "admin-email" :

<input type="hidden" id="admin-email" name="admin-email" value="info@venmond.com">
<input type="hidden" id="admin-name" name="admin-name" value="Venmond, Inc.">

Just replace the value info@venmond.com with your email, and Venmond, Inc. with your company name.

and then you are set to go !

Plugins List

3rd Party Plugins List to power up this template:

Name	Description	URL
Bootstrap	The most popular front-end framework for developing responsive, mobile first projects on the web.	http://getbootstrap.com/
JQuery	jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.	http://jquery.com/
JQuery UI	jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.	http://jqueryui.com/
Modernizr	Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.	http://modernizr.com/
HTML5 Shiv	The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.	https://code.google.com/p/html5shiv/
Respond.js	A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)	http://responsejs.com/
Open Sans Font	Open Sans web font from google fonts: http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700	http://fonts.googleapis.com/css?family=Open+Sans
Font Awesome	Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS	http://fortawesome.github.io/Font-Awesome/
Entypo Font	Entypo is a set of 250+ carefully crafted pictograms.	http://www.entypo.com/
ExCanvas	Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages	http://excanvas.sourceforge.net/
jQuery UI Touch Punch	A small hack that enables the use of touch events on sites using the jQuery UI user interface library	http://touchpunch.furf.com/
Pretty Photo	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.	http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
breakpoints.js	Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint	http://xoxco.com/projects/code/breakpoints/
CarouFredSel	CarouFredSel is quite simply the most powerful and flexible way to add carousels to your website	http://dev7studios.com/plugins/caroufredsel/
jQuery Validation Plugin	The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy	http://bassistance.de/jquery-plugins/jquery-plugin-validation/
DataTables	A plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table	http://datatables.net/
Jquery Custom Content Scrollbar	Custom scrollbar plugin that’s fully customizable with CSS.	http://manos.malihu.gr/jquery-custom-content-scroller/
jQuery BlockUI	The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser	http://jquery.malsup.com/block/
jQuery TagsInput	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.	http://xoxco.com/projects/code/tagsinput/
Bootstrap Switch	Turn checkboxes and radio buttons in toggle switches	http://www.bootstrap-switch.org/
pNotify	PNotify is a JavaScript notification plugin	http://sciactive.com/pnotify/
Bootstrap Timepicker	Easily select a time for a text input using your mouse or keyboards arrow keys.	http://jdewit.github.com/bootstrap-timepicker/
Bootstrap Wizard	builds a wizard using a formatted 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.	http://vadimg.com/twitter-bootstrap-wizard-example/
CKeditor	CKEditor is a ready-for-use HTML text editor designed to simplify web content creation	http://ckeditor.com/
Colorpicker JS	A simple component to select color in the same way you select color in Adobe Photoshop	http://www.eyecon.ro/colorpicker/
Date Range Picker for Bootstrap	Creates a dropdown menu from which a user can select a range of dates	https://github.com/dangrossman/bootstrap-daterangepicker
Flot	Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.	http://www.flotcharts.org/
Fullcalendar	FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar	http://arshaw.com/fullcalendar/
Google Code Prettify	A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.	http://code.google.com/p/google-code-prettify/
IntroJS	Better introductions for websites and features with a step-by-step guide for your projects.	http://usablica.github.io/intro.js/
Isotope	Filter & sort magical layouts	http://isotope.metafizzy.co/
Jquery Easing	A jQuery plugin from GSGD to give advanced easing options	http://gsgd.co.uk/sandbox/jquery/easing/
Jquery File Upload	File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery.	http://blueimp.github.io/jQuery-File-Upload/
JVector Map	JQuery plugin that renders Vector Maps. It uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML. No Flash or any other proprietary browser plug-in is required. This allows jVectorMap to work in all modern mobile browsers.	http://jvectormap.com/
Layer Slider	LayerSlider is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects. It uses cutting edge technologies to provide the smoothest experience that’s possible, and it comes with more than 200 preset 2D and 3D slide transitions.	http://codecanyon.net/item/layerslider-responsive-jquery-slider-plugin/922100
Morris Chart	Good-looking charts shouldn't be difficult	http://www.oesmith.co.uk/morris.js/
Raphael	Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.	http://raphaeljs.com/
Skycons	Skycons is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag.	http://darkskyapp.github.io/skycons/
Sparkline Chart	This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.	http://omnipotent.net/jquery.sparkline/#s-about
Jquery Stellar	Parallax has never been easier	http://markdalgleish.com/projects/stellar.js/
JQuery Waypoint	Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.	http://imakewebthings.com/jquery-waypoints/
JQuery Tabdrop	Very usefull script when your tabs do not fit in a single row. This script takes the not fitting tabs and makes a new dropdown tab. In the dropdown there are all the tabs that do not fit.	http://www.eyecon.ro/bootstrap-tabdrop/

Changelog

Version 1.1.4

Update Layer Slider 5.4.0
Update PrettyPhoto 3.1.6

Version 1.1.3

Added Event Management Dashboard
Added Forms Inline Editing
Update to Bootstrap 3.2.0
Update to Full Calendar 2.0.3
Update Layer Slider 5.2.0
Minor bug fixes

Version 1.1.2

Added Ecommerce Products List
Added Ecommerce Product Add
Add Tabdrop Plugin, see demo in: UI Tabs and Accordion Page
Add $page_css and $page_responsive_css variables, to write css directly in a page, inside <head> tag
Update to dataTable 1.10
Minor bug fixes

Version 1.1

Added Lockscreen Page
Added Timeline Page
Added Compose Email Page
Added Calendar Page
Smoother Dropdown Menu
Added .no-menu class to vd_title-section
Using Scroll down on Go To Menu on Form Elements Page
Added Bootstrap Wysiwyg HTML 5 on Form Elements Page
Update to Font Awesome 4.1.0
Update to Full Calendar 2.0
Minor bug fixes

Version 1

Initial Release

Thank You

How can i do this, how can i do that?
Go to our forum http://www.venmond.com We will be gladly to help you as best as we can. Just keep following us to get the latest news on:
twitter
facebook
themeforest

Once again, thank you so much for purchasing this theme. We would be glad to help you if you have any questions relating to this theme. No guarantees, but We'll do our 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.