Layout

Choose your preferred layout


Navigation

Menu comes in two modes: dark & light


Top Nav

Choose your liked color mode


Scrollable Header
brand brand

User Manual

Introduction

SeaKB ...

Structure
							Site
							  ├── 
							  │   └── Map
							  │     └── Layers
							  │     └── Markers							  
							  │   └── Contents
							  │     └──HTML
							  
							
Logging In

Use of these tools are completely optional.

  • Node.js and NPM. You can download Node.js from here https://nodejs.org. Npm comes bundled with Node.js
  • Next you need to install bower.
  • At last install grunt using npm install -g grunt-cli and npm install grunt --save-dev

After installing all the required frameworks, components and dependencies, go to the root folder of and run the following commands from the command line:

  • npm install
  • grunt dist
  • grunt

If everything was installed correctly, you should see the jQuery version of Deepor running in http://localhost:9000/


Above all procedures are optional you can directly use the compiled file which we provided you.

Menu Style

For vertical navigation you have to first add hk-vertical-nav class with hk-wrapper.

For Horizontal navigation you have to first add hk-horizontal-nav class with hk-wrapper.

For vertical alt navigation you have to first add hk-alt-nav class with hk-wrapper.

For this menu style you have to add hk-navbar-alt class with navbar

For light & dark menu you can add hk-nav-light or hk-nav-dark with hk-nav class.

For Scrollable Navigation please add scrollable-nav class with hk-wrapper.

Twitter Feed

We implemented live Twitter Feed on Deepor, for that we used twitterFetcher third party plugin.

How to Setup
HTML Structure
								<div class="card bg-primary text-center">
									<div class="twitter-slider-wrap card-body">
										<div class="twitter-icon text-center mb-15">
											<i class="fa fa-twitter"></i>
										</div>
										<div id="tweets_fetch" class="owl-carousel owl-theme"></div>
									</div>
								</div>
							
CSS
								<!-- Lightgallery CSS -->
								<link href="../HTML/vendors/lightgallery/dist/css/lightgallery.min.css" rel="stylesheet" type="text/css">
							
JS
								<!-- twitter JavaScript -->
								<script src="../HTML/dist/js/twitterFetcher.js"></script>
								<script src="../HTML/dist/js/widgets-data.js"></script>
								​
								<!-- Owl JavaScript -->
								<script src="../HTML/vendors/owl.carousel/dist/owl.carousel.min.js"></script>
								​
								<!-- Owl Init JavaScript -->
								<script src="../HTML/dist/js/owl-data.js"></script>
								​
							
Initialize Twitter Feed
								if( $('#tweets_fetch').length > 0 ){
										var configList = {
										  "profile": {"screenName": 'templatemonster'},
										  "domId": 'tweets_fetch',		 
										  "maxTweets": 2,
										  "enableLinks": true, 
										  "showUser": false,
										  "showTime": true,
										  "showImages": false,
										  "showInteraction":false,
										  "lang": 'en'
										};
										twitterFetcher.fetch(configList);
									}	
								});
								​
								$(window).on('load', function () {
									setTimeout(function(){
										$('#tweets_fetch').owlCarousel({
											loop:true,
											margin:0,
											autoplay:true,
											responsiveClass:true,
											autoHeight:true,
											autoplayTimeout:4000,
											responsive:{
												0:{
													items:1
												}
											}
										});
									},2000);
								});
								​
							
Chat

Chat spp is exclusive design for Deepor users , it provide you rich user experience.There are no external plugin dependencies.

How to Setup
HTML Structure
								<div class="chatapp-wrap">
									<div class="chatapp-left">
										<header>
											 <!--Chat app left header content-->
										</header>
										<form role="search" class="chat-search">
											 <!--Chat app search form-->
										</form>
										<div class="chatapp-users-list">
										   <!--Chat app user list-->
										</div>
									</div>
									<div class="chatapp-right">
										<header>
											<!--Chat app right header content-->
										</header>
										<div class="chat-body">
											<!--Chat body-->
										</div>
										<footer>
											<!--Chat Input field-->
										</footer>
									</div>
								 </div>  
							
Calendar

Calendar app is based on Fullcallendar js https://fullcalendar.io/. We have customized it a bit to give more interactive experience.

How to Setup
HTML Structure
								<div class="calendar-wrap">
									 <div id="calendar"></div>
								</div>
							
CSS
								<!-- Calendar CSS -->
								<link href="../HTML/vendors/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" type="text/css" />
							
JS
								<!-- Fullcalendar JavaScript -->
								<script src="../HTML/vendors/moment/min/moment.min.js"></script>
								<script src="../HTML/vendors/jquery-ui.min.js"></script>
								<script src="../HTML/vendors/fullcalendar/dist/fullcalendar.min.js"></script>
								<script src="../HTML/dist/js/fullcalendar-data.js"></script>
								​
							
Initialize
								$('#calendar').fullCalendar({
									----
								});
							
Email

Deepor Email app is a web-based email client designed and developed exclusively for Deepor framework. It has a responsive design to work flawlessly across many devices.

How to Setup
HTML Structure
								<div class="emailapp-wrap">
								<div class="emailapp-sidebar">
									<div class="nicescroll-bar">
										<div class="emailapp-nav-wrap">
											<!--Email app sidebar content-->
										</div>
									</div>
								</div>
								<div class="email-box">
									<div class="emailapp-left">
										<header>
											<!--Email app left content-->
										</header>
										<form role="search" class="email-search">
											<!--Email app left content-->
										</form>
										<div class="emailapp-emails-list">
										</div>
									</div>
									<div class="emailapp-right">
										<header>
											<!--Email app right content-->
										</header>
										<div class="email-body">
											<!--Email app body content-->
										</div>
									</div>
								</div>
								<!-- Compose email -->
								<div class="modal fade" id="exampleModalEmail" tabindex="-1" role="dialog" aria-labelledby="exampleModalEmail" aria-hidden="true">
									<!--Email app compose email content-->
								</div>
								<!-- /Compose email -->
							</div>
							
JS
								<!-- Tinymce JavaScript -->
								<script src="../HTML/vendors/tinymce/tinymce.min.js"></script>
								​
								<!-- Tinymce Wysuhtml5 Init JavaScript -->
								<script src="../HTML/dist/js/tinymce-data.js"></script>
							
Credits