Quick Start
Copy code in your page. It just the simple way to getting start with Datta Able.
CLICK TO EXPAND / COLLAPSE CODEQUICK START TUTORIAL VIDEO<!DOCTYPE html><html lang="en"><head><title>Datta Able | Admin template</title><!-- HTML5 Shim and Respond.js IE10 support of HTML5 elements and media queries --><!-- WARNING:Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 10]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Datta Able Bootstrap admin template made using Bootstrap 4 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
<meta name="keywords" content="flat ui, admin Admin , Responsive, Landing, Bootstrap, App, Template, Mobile, iOS, Android, apple, creative app">
<meta name="author" content="Codedthemes" />
<!-- Favicon icon -->
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<!-- fontawesome icon -->
<link rel="stylesheet" href="assets/fonts/fontawesome/css/fontawesome-all.min.css">
<!-- animation css -->
<link rel="stylesheet" href="assets/plugins/animation/css/animate.min.css">
<!-- vendor css -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- [ Pre-loader ] start -->
<div class="loader-bg">
<div class="loader-track">
<div class="loader-fill"></div>
</div>
</div>
<!-- [ Pre-loader ] End -->
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar">
<div class="navbar-wrapper">
<!-- put Logo is hear -->
<div class="navbar-brand header-logo">
<a href="index.html" class="b-brand">
<div class="b-bg">
<i class="feather icon-trending-up"></i>
</div>
<span class="b-title">Datta Able</span>
</a>
<a class="mobile-menu" id="mobile-collapse" href="javascript:"><span></span></a>
</div>
<!-- end Logo is hear -->
<div class="navbar-content scroll-div">
<ul class="nav pcoded-inner-navbar">
<li class="nav-item pcoded-menu-caption">
<label>Navigation</label>
</li>
<li data-username="dashboard Default Ecommerce CRM Analytics Crypto Project" class="nav-item">
<a href="index.html" class="nav-link "><span class="pcoded-micon"><i class="feather icon-home"></i></span><span class="pcoded-mtext">Dashboard</span></a>
</li>
<li class="nav-item pcoded-menu-caption">
<label>Other</label>
</li>
<li data-username="Menu levels Menu level 2.1 Menu level 2.2" class="nav-item pcoded-hasmenu">
<a href="javascript:" class="nav-link "><span class="pcoded-micon"><i class="feather icon-menu"></i></span><span class="pcoded-mtext">Menu levels</span></a>
<ul class="pcoded-submenu">
<li class=""><a href="" class="">Menu Level 2.1</a></li>
<li class="pcoded-hasmenu">
<a href="javascript:" class="">Menu level 2.2</a>
<ul class="pcoded-submenu">
<li class=""><a href="" class="">Menu level 3.1</a></li>
<li class=""><a href="" class="">Menu level 3.2</a></li>
</ul>
</li>
</ul>
</li>
<li data-username="Disabled Menu" class="nav-item disabled"><a href="javascript:" class="nav-link"><span class="pcoded-micon"><i class="feather icon-power"></i></span><span class="pcoded-mtext">Disabled menu</span></a></li>
<li data-username="Sample Page" class="nav-item active"><a href="sample-page.html" class="nav-link"><span class="pcoded-micon"><i class="feather icon-sidebar"></i></span><span class="pcoded-mtext">Sample page</span></a></li>
<li class="nav-item pcoded-menu-caption">
<label>Support</label>
</li>
<li data-username="Documentation" class="nav-item"><a href="http://html.codedthemes.com/datta-able/bootstrap/default/docs.html" class="nav-link" target="_blank"><span class="pcoded-micon"><i class="feather icon-book"></i></span><span class="pcoded-mtext">Documentation</span></a></li>
<li data-username="Need Support" class="nav-item"><a href="http://www.dedemao.com" class="nav-link" target="_blank"><span class="pcoded-micon"><i class="feather icon-help-circle"></i></span><span class="pcoded-mtext">Need
support ?</span></a></li>
</ul>
</div>
</div>
</nav>
<!-- [ navigation menu ] end -->
<!-- [ Header ] start -->
<header class="navbar pcoded-header navbar-expand-lg navbar-light">
<div class="m-header">
<a class="mobile-menu" id="mobile-collapse1" href="javascript:"><span></span></a>
<a href="index.html">
<img class="img-fluid" src="assets/images/logo.png" alt="Theme-Logo" />
</a>
</div>
<a class="mobile-menu" id="mobile-header" href="javascript:">
<i class="feather icon-more-horizontal"></i>
</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li><a href="javascript:" class="full-screen" onclick="javascript:toggleFullScreen()"><i class="feather icon-maximize"></i></a></li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" href="javascript:" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:">Action</a></li>
<li><a class="dropdown-item" href="javascript:">Another action</a></li>
<li><a class="dropdown-item" href="javascript:">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<div class="main-search">
<div class="input-group">
<input type="text" id="m-search" class="form-control" placeholder="Search . . .">
<a href="javascript:" class="input-group-append search-close">
<i class="feather icon-x input-group-text"></i>
</a>
<span class="input-group-append search-btn btn btn-primary">
<i class="feather icon-search input-group-text"></i>
</span>
</div>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li>
<div class="dropdown">
<a class="dropdown-toggle" href="javascript:" data-toggle="dropdown"><i class="icon feather icon-bell"></i></a>
<div class="dropdown-menu dropdown-menu-right notification">
<div class="noti-head">
<h6 class="d-inline-block m-b-0">Notifications</h6>
<div class="float-right">
<a href="javascript:" class="m-r-10">mark as read</a>
<a href="javascript:">clear all</a>
</div>
</div>
<ul class="noti-body">
<li class="n-title">
<p class="m-b-0">NEW</p>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>John Doe</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
<p>New ticket Added</p>
</div>
</div>
</li>
<li class="n-title">
<p class="m-b-0">EARLIER</p>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
<p>Prchace New Theme and make payment</p>
</div>
</div>
</li>
<li class="notification">
<div class="media">
<img class="img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
<div class="media-body">
<p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
<p>currently login</p>
</div>
</div>
</li>
</ul>
<div class="noti-footer">
<a href="javascript:">show all</a>
</div>
</div>
</div>
</li>
<li><a href="javascript:" class="displayChatbox"><i class="icon feather icon-mail"></i></a></li>
<li>
<div class="dropdown drp-user">
<a href="javascript:" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon feather icon-settings"></i>
</a>
<div class="dropdown-menu dropdown-menu-right profile-notification">
<div class="pro-head">
<img src="assets/images/user/avatar-1.jpg" class="img-radius" alt="User-Profile-Image">
<span>John Doe</span>
<a href="auth-sign-in-social.html" class="dud-logout" title="Logout">
<i class="feather icon-log-out"></i>
</a>
</div>
<ul class="pro-body">
<li><a href="javascript:" class="dropdown-item"><i class="feather icon-settings"></i> Settings</a></li>
<li><a href="javascript:" class="dropdown-item"><i class="feather icon-user"></i> Profile</a></li>
<li><a href="javascript:" class="dropdown-item"><i class="feather icon-mail"></i> My Messages</a></li>
<li><a href="javascript:" class="dropdown-item"><i class="feather icon-lock"></i> Lock Screen</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</header>
<!-- [ Header ] end -->
<!-- [ chat user list ] start -->
<section class="header-user-list">
<div class="h-list-header">
<div class="input-group">
<input type="text" id="search-friends" class="form-control" placeholder="Search Friend . . .">
</div>
</div>
<div class="h-list-body">
<a href="javascript:" class="h-close-text"><i class="feather icon-chevrons-right"></i></a>
<div class="main-friend-cont scroll-div">
<div class="main-friend-list">
<div class="media userlist-box " data-id="1" data-status="online" data-username="Josephin Doe">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
<div class="live-status">3</div>
</a>
<div class="media-body">
<h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
</div>
</div>
<div class="media userlist-box " data-id="2" data-status="online" data-username="Lary Doe">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="live-status">1</div>
</a>
<div class="media-body">
<h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="3" data-status="online" data-username="Alice">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="4" data-status="offline" data-username="Alia">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="live-status">1</div>
</a>
<div class="media-body">
<h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="5" data-status="offline" data-username="Suzen">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="1" data-status="online" data-username="Josephin Doe">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
<div class="live-status">3</div>
</a>
<div class="media-body">
<h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
</div>
</div>
<div class="media userlist-box " data-id="2" data-status="online" data-username="Lary Doe">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="live-status">1</div>
</a>
<div class="media-body">
<h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="3" data-status="online" data-username="Alice">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="4" data-status="offline" data-username="Alia">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="live-status">1</div>
</a>
<div class="media-body">
<h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="5" data-status="offline" data-username="Suzen">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="1" data-status="online" data-username="Josephin Doe">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
<div class="live-status">3</div>
</a>
<div class="media-body">
<h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
</div>
</div>
<div class="media userlist-box " data-id="2" data-status="online" data-username="Lary Doe">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="live-status">1</div>
</a>
<div class="media-body">
<h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="3" data-status="online" data-username="Alice">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="4" data-status="offline" data-username="Alia">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="live-status">1</div>
</a>
<div class="media-body">
<h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="5" data-status="offline" data-username="Suzen">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="1" data-status="online" data-username="Josephin Doe">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
<div class="live-status">3</div>
</a>
<div class="media-body">
<h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
</div>
</div>
<div class="media userlist-box " data-id="2" data-status="online" data-username="Lary Doe">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
<div class="live-status">1</div>
</a>
<div class="media-body">
<h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="3" data-status="online" data-username="Alice">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="4" data-status="offline" data-username="Alia">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
<div class="live-status">1</div>
</a>
<div class="media-body">
<h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
</div>
</div>
<div class="media userlist-box " data-id="5" data-status="offline" data-username="Suzen">
<a class="media-left" href="javascript:"><img class="media-object img-radius" src="assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- [ chat user list ] end -->
<!-- [ chat message ] start -->
<section class="header-chat">
<div class="h-list-header">
<h6>Josephin Doe</h6>
<a href="javascript:" class="h-back-user-list"><i class="feather icon-chevron-left"></i></a>
</div>
<div class="h-list-body">
<div class="main-chat-cont scroll-div">
<div class="main-friend-chat">
<div class="media chat-messages">
<a class="media-left photo-table" href="javascript:"><img class="media-object img-radius img-radius m-t-5" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
<div class="media-body chat-menu-content">
<div class="">
<p class="chat-cont">hello Datta! Will you tell me something</p>
<p class="chat-cont">about yourself?</p>
</div>
<p class="chat-time">8:20 a.m.</p>
</div>
</div>
<div class="media chat-messages">
<div class="media-body chat-menu-reply">
<div class="">
<p class="chat-cont">Ohh! very nice</p>
</div>
<p class="chat-time">8:22 a.m.</p>
</div>
</div>
<div class="media chat-messages">
<a class="media-left photo-table" href="javascript:"><img class="media-object img-radius img-radius m-t-5" src="assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
<div class="media-body chat-menu-content">
<div class="">
<p class="chat-cont">can you help me?</p>
</div>
<p class="chat-time">8:20 a.m.</p>
</div>
</div>
</div>
</div>
</div>
<div class="h-list-footer">
<div class="input-group">
<input type="file" class="chat-attach" style="display:none">
<a href="javascript:" class="input-group-prepend btn btn-success btn-attach">
<i class="feather icon-paperclip"></i>
</a>
<input type="text" name="h-chat-text" class="form-control h-send-chat" placeholder="Write hear . . ">
<button type="submit" class="input-group-append btn-send btn btn-primary">
<i class="feather icon-message-circle"></i>
</button>
</div>
</div>
</section>
<!-- [ chat message ] end -->
<!-- [ Main Content ] start -->
<div class="pcoded-main-container">
<div class="pcoded-wrapper">
<div class="pcoded-content">
<div class="pcoded-inner-content">
<!-- [ breadcrumb ] start -->
<div class="page-header">
<div class="page-block">
<div class="row align-items-center">
<div class="col-md-12">
<div class="page-header-title">
<h5 class="m-b-10">Sample Page</h5>
</div>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html"><i class="feather icon-home"></i></a></li>
<li class="breadcrumb-item"><a href="javascript:">Sample Page</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- [ breadcrumb ] end -->
<div class="main-body">
<div class="page-wrapper">
<!-- [ Main Content ] start -->
<div class="row">
<!-- [ sample-page ] start -->
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>Hello card</h5>
<div class="card-header-right">
<div class="btn-group card-option">
<button type="button" class="btn dropdown-toggle btn-icon" data-toggle="dropdown" aria-haspopup="true" aria-Expand="false">
<i class="feather icon-more-horizontal"></i>
</button>
<ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
<li class="dropdown-item full-card"><a href="javascript:"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
<li class="dropdown-item minimize-card"><a href="javascript:"><span><i class="feather icon-minus"></i>Collapse</span><span style="display:none"><i class="feather icon-plus"></i> Expand</span></a></li>
<li class="dropdown-item reload-card"><a href="javascript:"><i class="feather icon-refresh-cw"></i> reload</a></li>
<li class="dropdown-item close-card"><a href="javascript:"><i class="feather icon-trash"></i>Remove</a></li>
</ul>
</div>
</div>
</div>
<div class="card-block">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
<!-- [ sample-page ] end -->
</div>
<!-- [ Main Content ] end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- [ Main Content ] end -->
<!-- Warning Section Starts -->
<!-- Older IE warning message -->
<!--[if lt IE 11]>
<div class="ie-warning">
<h1>Warning!!</h1>
<p>You are using an outdated version of Internet Explorer, please upgrade
<br/>to any of the following web browsers to access this website.
</p>
<div class="iew-container">
<ul class="iew-download">
<li>
<a href="http://www.google.com/chrome/">
<img src="assets/images/browser/chrome.png" alt="Chrome">
<div>Chrome</div>
</a>
</li>
<li>
<a href="https://www.mozilla.org/en-US/firefox/new/">
<img src="assets/images/browser/firefox.png" alt="Firefox">
<div>Firefox</div>
</a>
</li>
<li>
<a href="http://www.opera.com">
<img src="assets/images/browser/opera.png" alt="Opera">
<div>Opera</div>
</a>
</li>
<li>
<a href="https://www.apple.com/safari/">
<img src="assets/images/browser/safari.png" alt="Safari">
<div>Safari</div>
</a>
</li>
<li>
<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">
<img src="assets/images/browser/ie.png" alt="">
<div>IE (11 & above)</div>
</a>
</li>
</ul>
</div>
<p>Sorry for the inconvenience!</p>
</div>
<![endif]-->
<!-- Warning Section Ends -->
<!-- Required Js -->
<script src="assets/js/vendor-all.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/pcoded.min.js"></script>
</body>
</html>
Bootstrap Implementation
Datta-able/
├── assets/
│ ├── css/
│ │ ├── style.css 4) i.e. compiled style.scss
│ ├── plugins/
│ │ ├── bootstrap/
│ │ │ ├── css/
│ │ │ │ ├── bootstrap.min.css 1) bootstrap.min.css v4.1.3
│ │ │ ├── js/
│ │ │ │ ├── bootstrap.min.js
│ ├── scss/
│ │ ├── partial/
│ │ │ ├── _general.scss 2) bootstrap.min.css file included in this file
│ │ ├── style.scss 3) compile this style.scss file using koala SCSS compiler
├── index.html
Structure
Datta-able/
├── assets/
│ ├── css/
│ │ ├── style.css
│ ├── fonts/
│ │ ├── feather/css/feather.css
│ │ ├── fontawesome/css/fontawesome-all.min.css
│ │ ├── datta/datta-icon.css
│ │ ├── ...- More
│ ├── images/
│ │ ├── user/
│ │ │ ├── avatar-1.jpg
│ │ │ ├── avatar-2.jpg
│ │ │ ├── ...-More
│ │ ├── logo.png
│ │ ├── ...-More
│ ├── js/
│ │ ├── pages/
│ │ │ ├── chart-highchart-custom.js
│ │ │ ├── ac-alert.js
│ │ │ ├── map-vector.js
│ │ │ ├── ...- More
│ │ ├── vendor-all.js
│ │ ├── pcoded.js
│ │ ├── ...- More
│ ├── plugins/
│ │ ├── jquery/
│ │ │ ├── js/
│ │ │ │ ├── jquery.min.js
│ │ ├── bootstrap/
│ │ │ ├── css/
│ │ │ │ ├── bootstrap.min.css
│ │ │ ├── js/
│ │ │ │ ├── bootstrap.min.js
│ │ ├── owl-carousel/
│ │ │ ├── css/
│ │ │ │ ├── owl.carousel.min.css
│ │ │ │ ├── owl.theme.default.min.css
│ │ │ ├── js/
│ │ │ │ ├── owl.carousel.min.js
│ │ ├── ...-More
│ ├── scss/
│ │ ├── partial/
│ │ │ ├── menu/. .
│ │ │ ├── mixins/. .
│ │ │ ├── other/. .
│ │ │ ├── theme-elements/. .
│ │ │ ├── widget/. .
│ │ │ ├── _variables.scss
│ │ │ ├── _general.scss
│ │ │ ├── ...-More
│ │ ├── style.scss
├── index.html
├── widget.html
├── Dashboard-analytics.html
├── ...- More
<!DOCTYPE html>
<html lang="en">
<head>
<title>Datta Able | Admin template</title>
<!-- HTML5 Shim and Respond.js IE10 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 10]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]--><!-- Meta --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui"><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="description" content="" /><meta name="keywords" content=""><meta name="author" content=""/><!-- Favicon icon --><link rel="icon" href="assets/images/favicon.ico" type="image/x-icon"><!-- vendor css --><link rel="stylesheet" href="assets/css/style.css"></head><body><!-- [navigation menu] start --><nav class="pcoded-navbar"></nav><!-- [navigation menu] end --><!-- [Header] start --><header class="navbar pcoded-header navbar-expand-lg navbar-light"></header><!-- [Header] end --><!-- [chat user list] start --><section class="header-user-list"></section><!-- [chat user list] end --><!-- [chat message] start --><section class="header-chat"></section><!-- [chat message] end --><!-- [Main Content] start --><div class="pcoded-main-container"><div class="pcoded-wrapper"><div class="pcoded-content"><div class="pcoded-inner-content"><!-- [breadcrumb] start --><div class="page-header"></div><!-- [breadcrumb] end --><div class="main-body"><div class="page-wrapper"><!-- [Main Content] start --><div class="row"></div><!-- [Main Content] end --></div></div></div></div></div></div><!-- [Main Content] end --><!-- Required Js --><script src="assets/js/vendor-all.min.js"></script><script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script><script src="assets/js/pcoded.min.js"></script></body></html>
Layouts
Everything about page layout and its extra options. Copy and check code snippet for each options carefully.
HOW TO SET PAGE LAYOUTEVERYTHING ABOUT LIVE CUSTOMIZERThis table contains all classes related to the vertical layout.
| Layout | Description | Page link |
|---|---|---|
| navbar Static |
add menupos-staticclass in <nav>tag
|
more detail |
| Navbar fixed |
This is default layout so you don't need to put any settings
|
more detail |
| Header Fixed |
add headerpos-fixed class in <header> fa-tagsyou have compulsory add header background color class if you want fixed header position examples: header-blue
|
more detail |
| Collapse menu |
add navbar-collapsed class in <nav> tag
|
more detail |
This snippet contains HTML Markup to create vertical layout.
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar">
<div class="navbar-wrapper">
<div class="navbar-brand header-logo">
<!-- Your Logo is hear -->
</div>
<div class="navbar-content scroll-div">
<ul class="nav pcoded-inner-navbar">
<li class="nav-item pcoded-menu-caption"><label>Menu Title</label></li>
<li class="nav-item"><a href="javascript:" class="nav-link "><span class="pcoded-micon"><i class="feather icon-menu"></i></span><span class="pcoded-mtext">Single Link</span></a></li>
<li class="nav-item pcoded-hasmenu">
<a href="javascript:" class="nav-link "><span class="pcoded-micon"><i class="feather icon-sidebar"></i></span><span class="pcoded-mtext">Menu Levels 1.1</span></a>
<ul class="pcoded-submenu">
<li class="pcoded-hasmenu"><a href="javascript:" class="">Menu Levels 2.1</a>
<ul class="pcoded-submenu">
<li class=""><a href="javascript:" class="">Menu Levels 3.1</a></li>
<li class=""><a href="javascript:" class="">Menu Levels 3.2</a></li>
<li class=""><a href="javascript:" class="">Menu Levels 3.3</a></li>
<li class=""><a href="javascript:" class="">Menu Levels 3.4</a></li>
</ul>
</li>
<li class="pcoded-hasmenu"><a href="javascript:" class="">Menu Levels 2.2</a>
<ul class="pcoded-submenu">
<li class=""><a href="javascript:" class="">Menu Levels 3.1</a></li>
<li class=""><a href="javascript:" class="">Menu Levels 3.2</a></li>
</ul>
</li>
<li class=""><a href="javascript:" class="">Menu Levels 2.3</a></li>
<li class=""><a href="javascript:" class="">Menu Levels 2.4</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- [ navigation menu ] end -->
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar theme-horizontal">
<div class="navbar-wrapper">
<div class="navbar-brand header-logo">
<!-- Your Logo is hear -->
</div>
<div class="navbar-content sidenav-horizontal" id="layout-sidenav">
<ul class="nav pcoded-inner-navbar sidenav-inner">
<li class="nav-item pcoded-menu-caption"><label>Menu Title</label></li>
<li class="nav-item"><a href="javascript:" class="nav-link "><span class="pcoded-micon"><i class="feather icon-menu"></i></span><span class="pcoded-mtext">Single Link</span></a></li>
<li class="nav-item pcoded-hasmenu">
<a href="javascript:" class="nav-link "><span class="pcoded-micon"><i class="feather icon-sidebar"></i></span><span class="pcoded-mtext">Menu Levels 1.1</span></a>
<ul class="pcoded-submenu">
<li class="pcoded-hasmenu"><a href="javascript:" class="">Menu Levels 2.1</a>
<ul class="pcoded-submenu">
<li class=""><a href="javascript:" class="">Menu Levels 3.1</a></li>
<li class=""><a href="javascript:" class="">Menu Levels 3.2</a></li>
<li class=""><a href="javascript:" class="">Menu Levels 3.3</a></li>
<li class=""><a href="javascript:" class="">Menu Levels 3.4</a></li>
</ul>
</li>
<li class="pcoded-hasmenu"><a href="javascript:" class="">Menu Levels 2.2</a>
<ul class="pcoded-submenu">
<li class=""><a href="javascript:" class="">Menu Levels 3.1</a></li>
<li class=""><a href="javascript:" class="">Menu Levels 3.2</a></li>
</ul>
</li>
<li class=""><a href="javascript:" class="">Menu Levels 2.3</a></li>
<li class=""><a href="javascript:" class="">Menu Levels 2.4</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- [ navigation menu ] end -->
// ***************************************************************
// Add Below Line of code at bottom of page when body tag in over
// ***************************************************************
<script src="assets/js/horizontal-menu.js"></script>
<script type="text/javascript">
//Collapse menu
(function() {
if ($('#layout-sidenav').hasClass('sidenav-horizontal') || window.layoutHelpers.isSmallScreen()) {
return;
}
try {
window.layoutHelpers.setCollapsed(
localStorage.getItem('layoutCollapsed') === 'true',
false
);
} catch (e) {}
})();
$(function() {
// Initialize sidenav
$('#layout-sidenav').each(function() {
new SideNav(this, {
orientation: $(this).hasClass('sidenav-horizontal') ? 'horizontal' : 'vertical'
});
});
// Initialize sidenav togglers
$('body').on('click', '.layout-sidenav-toggle', function(e) {
e.preventDefault();
window.layoutHelpers.toggleCollapsed();
if (!window.layoutHelpers.isSmallScreen()) {
try {
localStorage.setItem('layoutCollapsed', String(window.layoutHelpers.isCollapsed()));
} catch (e) {}
}
});
});
$(document).ready(function() {
$("#pcoded").pcodedmenu({
themelayout: 'horizontal',
MenuTrigger: 'hover',
SubMenuTrigger: 'hover',
});
});
</script>
add container & box-layout class in <body> tag
<body class="container box-layout">
</body>
add rtl stylesheet link is below the style.css
<!-- rtl layouts -->
<link rel="stylesheet" href="assets/css/layouts/rtl.css">
add menu-light class in <nav> tag
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar menu-light">
</nav>
<!-- [ navigation menu ] end -->
add dark stylesheet link is below the style.css
<!-- dark layouts -->
<link rel="stylesheet" href="assets/css/layouts/dark.css">
add navbar-dark & brand-dark class in <nav> tag
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar navbar-dark brand-dark">
</nav>
<!-- [ navigation menu ] end -->
add icon-colored class in <nav> tag
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar icon-colored">
</nav>
<!-- [ navigation menu ] end -->
Menu background
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar">
</nav>
<!-- [ navigation menu ] end -->
add navbar-blue class in <nav> to set Blue navigation
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar navbar-blue">
</nav>
<!-- [ navigation menu ] end -->
add navbar-red class in <nav> to set Red navigation
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar navbar-red">
</nav>
<!-- [ navigation menu ] end -->
add navbar-purple class in <nav> to set Purple navigation
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar navbar-purple">
</nav>
<!-- [ navigation menu ] end -->
add navbar-lightblue class in <nav> to set Lightblue navigation
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar navbar-lightblue">
</nav>
<!-- [ navigation menu ] end -->
add navbar-Dark class in <nav> to set Dark navigation
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar navbar-dark">
</nav>
<!-- [ navigation menu ] end -->
Menu background image
add navbar-image-1 class in <nav> to set Menu background image-1
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar navbar-image-1">
</nav>
<!-- [ navigation menu ] end -->
add navbar-image-2 class in <nav> to set Menu background image-2
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar navbar-image-2">
</nav>
<!-- [ navigation menu ] end -->
add navbar-image-3 class in <nav> to set Menu background image-3
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar navbar-image-3">
</nav>
<!-- [ navigation menu ] end -->
add navbar-image-4 class in <nav> to set Menu background image-4
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar navbar-image-4">
</nav>
<!-- [ navigation menu ] end -->
add navbar-image-5 class in <nav> to set Menu background image-5
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar navbar-image-5">
</nav>
<!-- [ navigation menu ] end -->
Menu Active item background
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar">
</nav>
<!-- [ navigation menu ] end -->
add active-blue class in <nav> to set Blue color in active item
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar active-blue">
</nav>
<!-- [ navigation menu ] end -->
add active-red class in <nav> to set Red color in active item
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar active-red">
</nav>
<!-- [ navigation menu ] end -->
add active-purple class in <nav> to set Purple color in active item
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar active-purple">
</nav>
<!-- [ navigation menu ] end -->
add active-lightblue class in <nav> to set Lightblue color in active item
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar active-lightblue">
</nav>
<!-- [ navigation menu ] end -->
add active-dark class in <nav> to set Dark color in active item
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar active-dark">
</nav>
<!-- [ navigation menu ] end -->
Menu caption ( title ) color
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar">
</nav>
<!-- [ navigation menu ] end -->
add title-blue class in <nav> to set Blue color in Menu caption
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar title-blue">
</nav>
<!-- [ navigation menu ] end -->
add title-red class in <nav> to set Red color in Menu caption
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar title-red">
</nav>
<!-- [ navigation menu ] end -->
add title-purple class in <nav> to set Purple color in Menu caption
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar title-purple">
</nav>
<!-- [ navigation menu ] end -->
add title-lightblue class in <nav> to set Lightblue color in Menu caption
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar title-lightblue">
</nav>
<!-- [ navigation menu ] end -->
add title-dark class in <nav> to set Dark color in Menu caption
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar title-dark">
</nav>
<!-- [ navigation menu ] end -->
Menu brand background
add brand-blue class in <nav> to set Blue color in Menu caption
add brand-red class in <nav> to set Red color in Menu caption
add brand-purple class in <nav> to set Purple color in Menu caption
add brand-lightblue class in <nav> to set Lightblue color in Menu caption
Menu List Icon
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar">
</nav>
<!-- [ navigation menu ] end -->
add menu-item-icon-style2 class in <nav> to set Menu list icon-2
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar menu-item-icon-style2">
</nav>
<!-- [ navigation menu ] end -->
add menu-item-icon-style3 class in <nav> to set Menu list icon-3
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar menu-item-icon-style3">
</nav>
<!-- [ navigation menu ] end -->
add menu-item-icon-style4 class in <nav> to set Menu list icon-4
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar menu-item-icon-style4">
</nav>
<!-- [ navigation menu ] end -->
add menu-item-icon-style5 class in <nav> to set Menu list icon-5
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar menu-item-icon-style5">
</nav>
<!-- [ navigation menu ] end -->
add menu-item-icon-style6 class in <nav> to set Menu list icon-6
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar menu-item-icon-style6">
</nav>
<!-- [ navigation menu ] end -->
Menu dropdown icon
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar">
</nav>
<!-- [ navigation menu ] end -->
add drp-icon-style2 class in <nav> to set Menu dropdown icon-2
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar drp-icon-style2">
</nav>
<!-- [ navigation menu ] end -->
add drp-icon-style3 class in <nav> to set Menu dropdown icon-3
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar drp-icon-style3">
</nav>
<!-- [ navigation menu ] end -->
SCSS
How to Compile SCSS?
You need to compile scss when you change scss using koala scss Compiler
List of variables for Datta able design
You can edit this file at [ assets/scss/partials/_variables.scss ]
// Top bar height
$header-height: 70px;
// Sidebar menu width
$Menu-width: 264px;
// Small menu width
$Menu-collapsed-width: 80px;
// Color list for Datta Able Admin Templet
// theme color variables
$theme-color: linear-gradient(-135deg, #1de9b6 0%, #1dc4e9 100%);
$theme-color2: linear-gradient(-135deg, #899FD4 0%, #A389D4 100%);
$primary-color: #04a9f5;
$warning-color: #f4c22b;
$danger-color: #f44236;
$success-color: #1de9b6;
$purple-color: #a389d4;
$info-color: #3ebfea;
$dark-color: #37474f;
$theme-border: #eaeaea;
// header colors
$brand-background: #3f4d67;
$header-dark-background: #3f4d67;
$header-dark-text-color: #fff;
$header-light-background: #fff;
$header-light-text-color: #3f4d67;
// Sidebar colors
$menu-caption-color: #14171d;
$menu-dark-background: #3f4d67;
$menu-dark-text-color: #a9b7d0;
$menu-light-background: #fff;
$menu-light-text-color: #3f4d67;
$menu-active-color: #04a9f5;
// dark layout colors
$dark-layout: #212224;
$dark-layout-font: #adb7be;
// Menu icon
$menu-icon-color: $primary-color, #ff5252, #01a9ac ,#9575CD , #23b7e5, $warning-color;
// Header background
$color-header-name: blue, red, purple, lightblue, dark;
$color-header-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);
// Menu background
$color-menu-name: blue, red, purple, lightblue, dark;
$color-menu-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);
// Active background color
$color-active-name: blue, red, purple, lightblue, dark;
$color-active-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);
// Menu title color
$color-title-name: blue, red, purple, lightblue, dark;
$color-title-color: $primary-color, #ff5252, #9575CD ,#23b7e5,lighten($dark-layout,7%);
// basic variable
$theme-font-family: 'Open Sans', sans-serif;
$theme-font-size: 14px;
$theme-background: #f4f7fa;
$theme-font-color: #888;
$theme-heading-color: #111;
Plugins
Extra Assets References
Used Font
| Font | Description | Link |
|---|---|---|
| Google Font | Open-sans | View Resource |
Font Icons
| Font Icon | Description | Link |
|---|---|---|
| Feather Icon | i.e. default font icon icon-feather.html | View Resource |
| Font Awesome Icon | icon-fontawsome.html | View Resource |
| Flag Icon | icon-flag.html | View Resource |
| Material Icon | icon-material.html | View Resource |
| Simple Line Icon | icon-simple-line.html | View Resource |
| Themify Icon | icon-themify.html | View Resource |
Images reference
| Link |
|---|
| Icon Finder |
| Unsplash Images |
| Elements Photos (i.e. not included in package) |
FAQ
What is Datta Able?
Why choose Datta Able?
Datta Able is made by codedthemes's experience coders and designers. Well tested bug free code,easy to use flexible structure makes Datta Able a really differ to other templates. We almost cover every possible plugins,components which helps you start immediately on your project.
What about Item Support?
6 month item support for any bugs,design issue in current version of template. We are not provide support for any custom work implementation.
What is Support Turnaround time?
When you comment or submit the ticket for support. Our team takes it seriously and respond it within a Half or Full day.
Browser Support?
Well tested on IE=>11,Edge,Chrome,Mozilla,Safari,Opera
Change Log
v2.0 ----------- 16-01-2019 ----------- - new bootstrap 4.2.1 updated - new spinners and Toasts pages added in basic components - new different border class added in basic component(bc_extra.html) - new authentication new pages added - button size improved - new tab layout added - tabs and pills shadow change - collapsed menu active color change - menu background image version active menu design make improvement - chart issue for safari mac will solve How to Migrate v1.1 to v2.0? ----------- - Replace assets/ - js,css,plugins folder into your directory. - if you want to use new added components and pages in your project,get from the new updated theme package v1.1 ----------- 07-12-2018 ----------- - Change Sidebar Menu toggle icon position change in small media(i.e. align right side) - Change Right side Header display below to top bar in small media - Make search input visible in small media - Box layout responsive bug fix - RTL layout change menu toggler position in small media - Dark vertion header search color change - Advance layout header bug improvement in small media - Change and replace(i.e. slim scroll)scroll Plugin(i.e. Perfect scroll) throughout theme How to Migrate v1.0 to v1.1? ----------- - Replace assets/ - js,css,plugins folder into your directory. v1.0 ----------- 07-11-2018 ----------- - Initial release - PSD,XD,SKETCH,Starter/Full version folders included in download package.