MetroAdmin documentation version 1.4
First of all, Thank you so much for purchasing this template and for being my loyal customer.
You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.
This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.
You will need the following sofwares to customize this template.
Be careful while editing the template. If not edited properly, the design layout may break completely.
No support is provided for faulty customization.
This section guides you to install all required software and libraries in order to fully utilize Metronic for your proje
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js is required in order to run the Metronic build tools. Download the latest version of Node and install it: nodejs.org/en/download/
Npm is the package manager for JavaScript and the world’s largest software registry. Npm is a separate project from Node.js, and tends to update more frequently. As a result, even if you’ve just downloaded Node.js (and therefore npm), you’ll probably need to update your npm.
npm install --global npm@latest
If you want to update or develop this theme, you need to install all dependencies by running:
npm install
Add Travel Dashboard
Add Education Dashboard
Add Medical Dashboard
You may want to update the plugins used in this template
If you haven't yet run the
npm installcommand, please run this command on this project root directory to install all dependencies
Install gulp-cli to make Gulp perform cli actions. To install gulp-cli, run this command
npm install gulp-cli --global
You have to copy all updated plugins to your project folder from node_modules. To copy all plugins together, run this comment:
gulp plugin
In order to simplify common scripts, we accumuluted the common scripts together. So you need to run a simple command to generate common.js. common.js contains jquery.min.js, bootstrap.bundle.min.js, metisMenu.min.js, jquery.slimscroll.min.js, bootstrap-select.min.js
gulp common_js
Now your plugins and scripts are updated. Enjoy!
You may want to build your SASS in order to change any layout or update. If you haven't run
npm installyet, please run it first. Then follow next step.
Run following command to watch and build SASS
npm run watch
You may want to change your folder destination of outputed CSS or input SASS. In order to do that, just open the package.json file and update the script command's path as yours.
"watch": "node-sass --watch src/main/scss/main.scss src/main/css/style.css --source-map src/main/css/style.css.map"
This template uses unit rem in all context as user can change the browser default and have user experience much better.
remThis template assumes 1rem = 16px, and if you want to change this value, you may change this by changing html font size in CSS
In the deznav.js file, you can change your theme layout as you want to. Initialize the plugin
new dezSettings()and pass the options into this function.
Theme background can be toggled between light and dark
version: "light" //theme background will be "light"
For dark background
version: "dark" //theme background will be "dark"
Theme layout can be toggled between vertical and horizontal
layout: "vertical"
For horizontal layout:
layout: "horizontal"
This theme has four types of sidebar, Full, Mini, Compact, Overlay
For full sidebar:
sidebarStyle: "full"
For compact sidebar:
sidebarStyle: "compact"
For mini sidebar:
sidebarStyle: "mini"
For overlay sidebar:
sidebarStyle: "overlay"
Sidebar position can be toggled between two options. static and fixed
For static sidebar
sidebarPosition: 'static'
For fixed sidebar
sidebarPosition: 'fixed'
Header position can be toggled between two options. static and fixed
For static header
headerPosition: 'static'
For fixed header
headerPosition: 'fixed'
Theme box container can be toggled between three options. wide, boxed, wide-boxed
For wide container
containerLayout: 'wide'
For boxed container
containerLayout: 'boxed'
For wide-boxed container
containerLayout: 'wide-boxed'
This template supports two directions, LTR and RTL.
For ltr support
direction: 'ltr'
For rtl support
direction: 'rtl'
Nav header color can be toggled among 10 diffrent colors.
Change nav header color:
navheaderBg: 'color_1' //color value can be extended to 'color_2', 'color_3', 'color_4', 'color_5', 'color_6', 'color_7', 'color_8', 'color_9', 'color_10'
Header color can be toggled among 10 diffrent colors.
Change header color:
headerBg: 'color_1' //color value can be extended to 'color_2', 'color_3', 'color_4', 'color_5', 'color_6', 'color_7', 'color_8', 'color_9', 'color_10'
Sidebar color can be toggled among 10 diffrent colors.
Change Sidebar color:
sidebarBg: 'color_1' //color value can be extended to 'color_2', 'color_3', 'color_4', 'color_5', 'color_6', 'color_7', 'color_8', 'color_9', 'color_10'
BlockUI is a plugin that blocks webpage's regular activity for certain time. It can be used very easily!
CSS
No plugin CSS required
JS
<script src="../../assets/plugins/block-ui/jquery.blockUI.js"></script>
HTML
It applies on whole HTML body
JS
$.blockUI({ message: 'Just a moment...
' })
Bootstrap Notify is a plugin that helps you to provide any instant message to user at any time. It's very easy to initialize.
CSS
No plugin CSS required
JS
<script src="../../assets/plugins/bootstrap4-notify/bootstrap-notify.min.js"></script>
HTML
I dosen't need any mark-up as it works on whole HTML document
JS
$.notify({
// options
message: 'Congratulations! You\'ve succcessfully completed the task.'
},{
// settings
type: 'primary',
offset: 20,
spacing: 5,
z_index: 1031,
delay: 5000,
timer: 1000,
placement: {
from: 'top',
align: 'left'
},
animate: {
enter: 'animated fadeInDown',
exit: 'animated fadeOutUp'
}
});
Clipboard.js is a JavaScript plugin that let you to copy/cut something from webpage to your clipboard
CSS
No plugin css file required
JS
<script src="../../assets/plugins/clipboard/clipboard.min.js"></script>
HTML
JS
new ClipboardJS('.clipboard-btn');
CSS
<link href="../../assets/plugins/pg-calendar/css/pignose.calendar.min.css" rel="stylesheet">
JS
<script src="../../assets/plugins/pg-calendar/js/pignose.calendar.min.js"></script>
HTML
JS
$(".year-calendar").pignoseCalendar({theme:"blue"});
CSS
No plugin stylesheet required
JS
<script src="../../assets/plugins/d3v3/index.js"></script>
<script src="../../assets/plugins/topojson/topojson.min.js"></script>
<script src="../../assets/plugins/datamaps/datamaps.world.min.js"></script>
HTML
JS
var i=new Datamap( {
scope: "world", element: document.getElementById("world-datamap"), responsive: !0, geographyConfig: {
popupOnHover: !1, highlightOnHover: !1, borderColor: "rgba(0,123,255,0.5)", borderWidth: 1, highlightBorderWidth: 3, highlightFillColor: "rgba(0,123,255,0.5)", highlightBorderColor: "rgba(255,255,255,0.1)", borderWidth: 1
}
, bubblesConfig: {
popupTemplate: function (e, i) {
return '' + i.country + '' + i.sold + ""
}
, borderWidth: 1, highlightBorderWidth: 3, highlightFillColor: "rgba(0,123,255,0.5)", highlightBorderColor: "rgba(255,255,255,0.1)", fillOpacity: .75
}
, fills: {
Visited: "#f5f5f5", neato: "rgba(0,123,255,1)", white: "rgba(0,123,255,1)", defaultFill: "transparent"
}
});
i.bubbles([ {
centered: "USA", fillKey: "white", radius: 5, sold: "$500", country: "United States"
}
, {
centered: "SAU", fillKey: "white", radius: 5, sold: "$900", country: "Saudia Arabia"
}
, {
centered: "RUS", fillKey: "white", radius: 5, sold: "$250", country: "Russia"
}
, {
centered: "CAN", fillKey: "white", radius: 5, sold: "$1000", country: "Canada"
}
, {
centered: "IND", fillKey: "white", radius: 5, sold: "$50", country: "India"
}
, {
centered: "AUS", fillKey: "white", radius: 5, sold: "$700", country: "Australia"
}
, {
centered: "BGD", fillKey: "white", radius: 5, sold: "$1500", country: "Bangladesh"
}
]),
window.addEventListener("resize", function (e) {
i.resize()
});
CSS
CSS
<link rel="stylesheet" href="../../assets/plugins/bootstrap-select/dist/css/bootstrap-select.min.css">
JS
<script src="./src/assets/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
HTML
JS
$('.selectpicker').selectpicker();
CSS
<link href="../../assets/plugins/nestable2/css/jquery.nestable.min.css" rel="stylesheet">
JS
<script src="../../assets/plugins/nestable2/js/jquery.nestable.min.js"></script>
HTML
-
Item 1
-
Item 2
-
Item 3
-
Item 4
-
Item 5
-
Item 6
-
Item 7
-
Item 8
-
Item 9
-
Item 10
JS
var e = function (e) {
var t = e.length ? e : $(e.target), a = t.data("output");
window.JSON ? a.val(window.JSON.stringify(t.nestable("serialize"))) : a.val("JSON browser support required for this demo.")
};
$("#nestable").nestable({ group: 1 }).on("change", e)
CSS
<link rel="stylesheet" href="../../assets/plugins/nouislider/nouislider.min.css">
JS
<script src="../../assets/plugins/nouislider/nouislider.min.js"></script>
<script src="../../assets/plugins/wnumb/wNumb.js"></script>
HTML
JS
let basicSlide = document.getElementById('basic-slider');
noUiSlider.create(basicSlide, {
start: [20, 80],
connect: true,
range: {
'min': 0,
'max': 100
}
});
CSS
<link href="../../assets/plugins/sweetalert2/dist/sweetalert2.min.css" rel="stylesheet">
JS
<script src="../../assets/plugins/sweetalert2/dist/sweetalert2.min.js"></script>
HTML
No markup required as it works on html body
JS
sweetAlert("Oops...", "Something went wrong !!", "error")
CSS
No plugin stylesheet required
JS
<script src="../../assets/plugins/webticker/jquery.webticker.min.js"></script>
HTML
JS
if ($('#webticker-dark-icons').length) {
$("#webticker-dark-icons").webTicker({
height: 'auto',
duplicate: true,
startEmpty: false,
rssfrequency: 5
});
}
CSS
<link href="../../assets/plugins/toastr/css/toastr.min.css" rel="stylesheet">
JS
<script src="../../assets/plugins/toastr/js/toastr.min.js"></script>
HTML
JS
toastr.success("This Is Success Message", "Top Right", {
timeOut: 5e3,
closeButton: !0,
debug: !1,
newestOnTop: !0,
progressBar: !0,
positionClass: "toast-top-right",
preventDuplicates: !0,
onclick: null,
showDuration: "300",
hideDuration: "1000",
extendedTimeOut: "1000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut",
tapToDismiss: !1
});
MetroAdmin - Bootstrap Admin Dashboard HTML Template
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/images/favicon.png">
<link href="../css/style.css" rel="stylesheet">
-
Messages
View All
-
<img class="pull-left mr-3 avatar-img" src="../../assets/images/avatar/1.jpg" alt="">
Druid Wensleydale
A wonderful serenit has take possession08 Hours ago
-
<img class="pull-left mr-3 avatar-img" src="../../assets/images/avatar/2.jpg" alt="">
Fig Nelson
A wonderful serenit has take possession08 Hours ago
-
<img class="pull-left mr-3 avatar-img" src="../../assets/images/avatar/3.jpg" alt="">
Bailey Wonger
A wonderful serenit has take possession08 Hours ago
-
<img class="pull-left mr-3 avatar-img" src="../../assets/images/avatar/4.jpg" alt="">
Bodrum Salvador
A wonderful serenit has take possession08 Hours ago
-
-
Druid Wensleydale
A wonderful serenit of my entire soul.
20 May 2018, 15:32
- Inverness McKenzieA wonderful serenit of my entire soul. 20 May 2018, 15:32
- McKenzie InvernessA wonderful serenit of my entire soul. 20 May 2018, 15:32
- Inverness McKenzieA wonderful serenit of my entire soul. 20 May 2018, 15:32
- Show All Notifications
-
<img src="../../assets/images/avatar/1.jpg" alt=""> George Martin
Hello, Welcome here
<script src="../../assets/plugins/common/common.min.js"></script>
<script src="../js/custom.min.js"></script>
<script src="../js/settings.js"></script>
<script src="../js/deznav.js"></script>
<script src="../js/styleSwitcher.js"></script>
In this template we used "Segoe UI" font which is provided by Bootstrap default. That's why we didn't have to import any font anymore. But font can be added and changed by following ways.
Import the font into font.scss
//import your font like this
@import url('Your font URL');
Now change the template font-family in the _variable.scss file
//change the font family name
$pf: "Roboto";
Following icon fonts used in this template
| Icon Name | Example | URL |
|---|---|---|
| Font Awesome |
<i class="fa fa-address-book"></i>
|
https://fontawesome.com/v4.7.0/icons/ |
| Simple line icons |
<i class="icon-user icons"></i>
|
https://github.com/thesabbir/simple-line-icons |
| Weather icons |
<i class="wi wi-night-sleet"></i>
|
https://erikflowers.github.io/weather-icons/ |
| Crypto icons |
<i class="cc BTC"></i>
|
https://github.com/AllienWorks/cryptocoins |
| Linea icons |
<i class="cc BTC"></i>
|
http://www.linea.io/ |
| Ionicons |
<i class="icon ion-md-heart"></i>
|
https://ionicons.com/ |
| Themify Icons |
<i class="ti-arrow-right"></i>
|
https://themify.me/themify-icons |
| Material design Icons |
<i class="mdi mdi-name"></i>
|
https://materialdesignicons.com/cdn/2.0.46/ |
| Pixeden Icons |
<i class="pe-is-w-blizzard"></i>
|
http://themes-pixeden.com/font-demos/the-icons-set/weather/ |
Basic table structure
| # | Heading 1 | Heading 2 | Heading 3 |
|---|---|---|---|
| Data 1 | Data 2 | Data 3 | Data 4 |
CSS
<link href="../../assets/plugins/datatables/css/jquery.dataTables.min.css" rel="stylesheet">
JS
<script src="../../assets/plugins/datatables/js/jquery.dataTables.min.js"></script>
HTML
JS
$('.example').DataTable();
CSS
<link rel="stylesheet" href="../../assets/plugins/jsgrid/css/jsgrid.min.css">
<link rel="stylesheet" href="../../assets/plugins/jsgrid/css/jsgrid-theme.min.css">
JS
<script src="../../assets/plugins/jsgrid/js/jsgrid.min.js"></script>
HTML
JS
(function($){
'use strict'
//basic jsgrid table
let clients = [
{ "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
{ "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
{ "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
];
let countries = [
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "Canada", Id: 2 },
{ Name: "United Kingdom", Id: 3 }
];
$("#jsGrid-basic").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: clients,
fields: [
{ name: "Name", type: "text", width: 150, validate: "required" },
{ name: "Age", type: "number", width: 50, css:"text-center" },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
CSS
<link rel="stylesheet" href="../../assets/plugins/footable/css/footable.core.min.css">
JS
<script src="../../assets/plugins/footable/dist/footable.min.js"></script>
HTML
| ID | First Name | Last Name | Job Title | Started On | Date of Birth |
|---|---|---|---|---|---|
| 1 | Dennise | Fuhrman | High School History Teacher | November 8th 2011 | July 25th 1960 |
JS
$('#table').footable();
CSS
<link rel="stylesheet" href="../../assets/plugins/jquery-bootgrid/dist/jquery.bootgrid.min.css">
JS
<script src="../../assets/plugins/jquery-bootgrid/dist/jquery.bootgrid.min.js"></script>
HTML
| ID | Sender | Received |
|---|---|---|
| 10231 | eduardo@pingpong.com | 14.10.2013 |
JS
$("#bootgrid-basic").bootgrid();
CSS
<link href="../../assets/plugins/jquery-steps//css/jquery.steps.css" rel="stylesheet">
JS
<script src="../../assets/plugins/jquery-steps/build/jquery.steps.min.js"></script>
HTMl
JS
var form = $("#step-form-horizontal");
form.children('div').steps({
headerTag: "h4",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true,
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex)
{
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
}
});
CSS
<link href="../../assets/plugins/summernote/summernote.css" rel="stylesheet">
JS
<script src="../../assets/plugins/summernote/js/summernote.min.js"></script>
HTML
JS
$(".summernote").summernote({
height: 350,
minHeight: null,
maxHeight: null,
focus: !1
})
CSS
<link href="../../assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
JS
<script src="../../assets/plugins/moment/moment.min.js"></script>
<script src="../../assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
HTML
<input class="form-control input-daterange-datepicker" type="text" name="daterange" value="01/01/2015 - 01/31/2015">
JS
$('.input-daterange-datepicker').daterangepicker({
buttonClasses: ['btn', 'btn-sm'],
applyClass: 'btn-danger',
cancelClass: 'btn-inverse'
});
CSS
<link href="../../assets/plugins/clockpicker/css/bootstrap-clockpicker.min.css" rel="stylesheet">
JS
<script src="../../assets/plugins/moment/moment.min.js"></script>
<script src="../../assets/plugins/clockpicker/js/bootstrap-clockpicker.min.js"></script>
HTML
<input class="form-control" id="single-input" value="" placeholder="Now">
JS
var input = $('#single-input').clockpicker({
placement: 'bottom',
align: 'left',
autoclose: true,
'default': 'now'
});
CSS
<link href="../../assets/plugins/jquery-asColorPicker/css/asColorPicker.min.css" rel="stylesheet">
JS
<script src="../../assets/plugins/moment/moment.min.js"></script>
<script src="../../assets/plugins/jquery-asColor/jquery-asColor.min.js"></script>
<script src="../../assets/plugins/jquery-asGradient/jquery-asGradient.min.js"></script>
<script src="../../assets/plugins/jquery-asColorPicker/js/jquery-asColorPicker.min.js"></script>
HTML
<input type="text" class="colorpicker form-control" value="#7ab2fa">
JS
$(".colorpicker").asColorPicker();
CSS
<link href="../../assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css" rel="stylesheet">
JS
<script src="../../assets/plugins/moment/moment.min.js"></script>
<script src="../../assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"></script>
HTML
<input type="text" class="form-control" placeholder="2017-06-04" id="mdate">
JS
$('#mdate').bootstrapMaterialDatePicker({
weekStart: 0,
time: false
});
CSS
<link rel="stylesheet" href="../../assets/plugins/pickadate/themes/default.css">
<link rel="stylesheet" href="../../assets/plugins/pickadate/themes/default.date.css">
JS
<script src="../../assets/plugins/pickadate/picker.js"></script>
<script src="../../assets/plugins/pickadate/picker.time.js"></script>
<script src="../../assets/plugins/pickadate/picker.date.js"></script>
HTML
JS
$('.datepicker-default').pickadate();
CSS
<link href="../../assets/plugins/dropzone/css/dropzone.min.css" rel="stylesheet">
JS
<script src="../../assets/plugins/dropzone/js/dropzone.min.js"></script>
HTML
JS
No additional JS code required
CSS
<link rel="stylesheet" href="../../assets/plugins/bootstrap-touchspin/css/jquery.bootstrap-touchspin.min.css">
JS
<script src="../../assets/plugins/bootstrap-touchspin/js/jquery.bootstrap-touchspin.min.js"></script>
HTML
JS
$("input[name='demo_vertical']").TouchSpin( {
verticalbuttons: !0
}
CSS
<link rel="stylesheet" href="../../assets/plugins/select2/css/select2.min.css">
JS
<script src="../../assets/plugins/select2/js/select2.full.min.js"></script>
HTML
JS
$("#single-select").select2();
CSS
<link rel="stylesheet" href="../../assets/plugins/jasny-bootstrap/dist/css/jasny-bootstrap.min.css">
JS
<script src="../../assets/plugins/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"></script>
HTML
999-99-999-9999-9
JS
No additional script required
CSS
<link href="../../assets/plugins/innoto-switchery/dist/switchery.min.css" rel="stylesheet"/>
JS
<script src="../../assets/plugins/innoto-switchery/dist/switchery.min.js"></script>
HTML
JS
new Switchery(html, {
color: '#2290FF',
secondaryColor: '#2290FF'
});
CSS
<link rel="stylesheet" href="../../assets/plugins/bootstrap-tagsinput/css/bootstrap-tagsinput.css">
JS
<script src="../../assets/plugins/bootstrap-tagsinput/js/bootstrap-tagsinput.min.js"></script>
HTML
JS
$("#tags_1").tagsinput()
CSS
<link rel="stylesheet" href="../../assets/plugins/typeahead/style.css">
JS
<script src="../../assets/plugins/typeahead.js/dist/typeahead.jquery.min.js"></script>
<script src="../../assets/plugins/typeahead.js/dist/typeahead.bundle.min.js"></script>
<script src="../../assets/plugins/typeahead.js/dist/bloodhound.min.js"></script>
HTML
JS
//Basic setup
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substringRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substringRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
};
};
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
$('.typeahead-basic').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: substringMatcher(states)
});
CSS
<link href="../../assets/plugins/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">
JS
<script src="../../assets/plugins/moment/moment.min.js"></script>
<script src="../../assets/plugins/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
HTML
superuser
JS
$("#username").editable({
type:"text",
pk:1,
name:"username",
title:"Enter username"
});
CSS
<link rel="stylesheet" href="../../assets/plugins/dropify/dist/css/dropify.min.css">
JS
<script src="../../assets/plugins/dropify/dist/js/dropify.min.js"></script>
HTML
JS
$('.dropify').dropify();
CSS
<link rel="stylesheet" href="../../assets/plugins/cropperjs/dist/cropper.min.css">
JS
<script src="../../assets/plugins/cropperjs/dist/cropper.min.js"></script>
<script src="../../assets/plugins/jquery-cropper/dist/jquery-cropper.min.js"></script>
HTML
CSS
No plugin stylesheet required
JS
<script src="../../assets/plugins/jquery-validation/jquery.validate.min.js"></script>
HTML
JS
jQuery(".form-valide").validate({
rules: {
"val-username": {
required: !0,
minlength: 3
}
},
messages: {
"val-username": {
required: "Please enter a username",
minlength: "Your username must consist of at least 3 characters"
}
}
});
CSS
No plugins stylesheet dependencies
JS
<script src="../../assets/plugins/flot/jquery.flot.js"></script>
<script src="../../assets/plugins/flot/jquery.flot.pie.js"></script>
<script src="../../assets/plugins/flot/jquery.flot.resize.js"></script>
<script src="../../assets/plugins/flot-spline/jquery.flot.spline.min.js"></script>
HTML
JS
$.plot("#flotBar1", [{
data: [[0, 3], [2, 8], [4, 5], [6, 13], [8, 5], [10, 7], [12, 4], [14, 6]]
}], {
series: {
bars: {
show: true,
lineWidth: 0,
fillColor: '#9EE5A1'
}
},
grid: {
borderWidth: 1,
borderColor: 'transparent'
},
yaxis: {
tickColor: 'transparent',
font: {
color: '#fff',
size: 10
}
},
xaxis: {
tickColor: 'transparent',
font: {
color: '#fff',
size: 10
}
}
});
CSS
No plugins stylesheet dependencies
JS
<script src="../../assets/plugins/raphael/raphael.min.js"></script>
<script src="../../assets/plugins/morris/morris.min.js"></script>
HTML
JS
// LINE CHART
let line = new Morris.Line({
element: 'morris-line-chart',
resize: true,
data: [{
y: '2011 Q1',
item1: 2666
},
{
y: '2011 Q2',
item1: 2778
},
{
y: '2011 Q3',
item1: 4912
},
{
y: '2011 Q4',
item1: 3767
},
{
y: '2012 Q1',
item1: 6810
},
{
y: '2012 Q2',
item1: 5670
},
{
y: '2012 Q3',
item1: 4820
},
{
y: '2012 Q4',
item1: 15073
},
{
y: '2013 Q1',
item1: 10687
},
{
y: '2013 Q2',
item1: 8432
}
],
xkey: 'y',
ykeys: ['item1'],
labels: ['Item 1'],
gridLineColor: 'transparent',
lineColors: ['#0000FF'], //hrere
lineWidth: 1,
hideHover: 'auto',
pointSize: 0,
axes: false
});
CSS
No plugin stylesheet required
JS
<script src="../../assets/plugins/chart.js/Chart.bundle.min.js"></script>
HTML
JS
var ctx = document.getElementById("team-chart");
ctx.height = 100;
new Chart(ctx, {
type: 'line',
data: {
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
type: 'line',
defaultFontFamily: 'Montserrat',
datasets: [{
data: [0, 15, 7, 12, 85, 10, 50],
label: "Saiful",
backgroundColor: 'rgba(0, 162, 255, .8)',
borderColor: 'rgba(0, 162, 255, .8)',
borderWidth: 0.5,
pointStyle: 'circle',
pointRadius: 5,
pointBorderColor: 'transparent',
pointBackgroundColor: '#00A2FF',
}, {
label: "Saikot",
data: [0, 14, 5, 3, 15, 5, 0],
backgroundColor: 'rgba(52, 199, 59, .8)',
borderColor: 'rgba(52, 199, 59, .8)',
borderWidth: 0.5,
pointStyle: 'circle',
pointRadius: 5,
pointBorderColor: 'transparent',
pointBackgroundColor: '#87de75',
}]
},
options: {
responsive: true,
tooltips: {
mode: 'index',
titleFontSize: 12,
titleFontColor: '#000',
bodyFontColor: '#000',
backgroundColor: '#fff',
titleFontFamily: 'Montserrat',
bodyFontFamily: 'Montserrat',
cornerRadius: 3,
intersect: false,
},
legend: {
position: 'top',
labels: {
usePointStyle: true,
fontFamily: 'Montserrat',
},
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false,
drawBorder: false
},
scaleLabel: {
display: false,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
gridLines: {
display: false,
drawBorder: false
},
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
},
title: {
display: false,
}
}
});
CSS
<link rel="stylesheet" href="../../assets/plugins/chartist/css/chartist.min.css">
JS
<script src="../../assets/plugins/chartist/js/chartist.min.js"></script>
<script src="../../assets/plugins/chartist-plugin-tooltips/js/chartist-plugin-tooltip.min.js"></script>
HTML
JS
var chart = new Chartist.Line('#smil-animations', {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
series: [
[12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
[4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
[5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
[3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
]
}, {
low: 0,
plugins: [
Chartist.plugins.tooltip()
]
});
// Let's put a sequence number aside so we can use it in the event callbacks
var seq = 0,
delays = 80,
durations = 500;
// Once the chart is fully created we reset the sequence
chart.on('created', function() {
seq = 0;
});
// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
chart.on('draw', function(data) {
seq++;
if(data.type === 'line') {
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
data.element.animate({
opacity: {
// The delay when we like to start the animation
begin: seq * delays + 1000,
// Duration of the animation
dur: durations,
// The value where the animation should start
from: 0,
// The value where it should end
to: 1
}
});
} else if(data.type === 'label' && data.axis === 'x') {
data.element.animate({
y: {
begin: seq * delays,
dur: durations,
from: data.y + 100,
to: data.y,
// We can specify an easing function from Chartist.Svg.Easing
easing: 'easeOutQuart'
}
});
} else if(data.type === 'label' && data.axis === 'y') {
data.element.animate({
x: {
begin: seq * delays,
dur: durations,
from: data.x - 100,
to: data.x,
easing: 'easeOutQuart'
}
});
} else if(data.type === 'point') {
data.element.animate({
x1: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
x2: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
opacity: {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
}
});
} else if(data.type === 'grid') {
// Using data.axis we get x or y which we can use to construct our animation definition objects
var pos1Animation = {
begin: seq * delays,
dur: durations,
from: data[data.axis.units.pos + '1'] - 30,
to: data[data.axis.units.pos + '1'],
easing: 'easeOutQuart'
};
var pos2Animation = {
begin: seq * delays,
dur: durations,
from: data[data.axis.units.pos + '2'] - 100,
to: data[data.axis.units.pos + '2'],
easing: 'easeOutQuart'
};
var animations = {};
animations[data.axis.units.pos + '1'] = pos1Animation;
animations[data.axis.units.pos + '2'] = pos2Animation;
animations['opacity'] = {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
};
data.element.animate(animations);
}
});
// For the sake of the example we update the chart every time it's created with a delay of 10 seconds
chart.on('created', function() {
if(window.__exampleAnimateTimeout) {
clearTimeout(window.__exampleAnimateTimeout);
window.__exampleAnimateTimeout = null;
}
window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 12000);
});
CSS
No plugin stylesheet required
JS
<script src="../../assets/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
HTML
JS
$("#sparklinedash").sparkline([10, 15, 26, 27, 28, 31, 34, 40, 41, 44, 49, 64, 68, 69, 72], {
type: "bar",
height: "50",
barWidth: "4",
resize: !0,
barSpacing: "5",
barColor: "#00A2FF"
});
CSS
No plugin stylesheet dependencies
JS
<script src="../../assets/plugins/easy-pie-chart/jquery.easypiechart.min.js"></script>
HTML
JS
$(''.chart').easyPieChart({
barColor: function(parcent) {
return parcent > 75 ? 'rgb(0, 171, 197)' : parcent > 50 ? 'rgb(117, 180, 50)' : parcent > 25 ? 'rgb(7, 135, 234)' : 'rgb(192, 10, 39)';
},
lineWidth: 2
});
CSS
No plugin stylesheet required
JS
<script src="../../assets/plugins/peity/jquery.peity.min.js"></script>
HTML
JS
$(".bar-colours-1").peity("bar", {
fill: ["#F44336", "#34C73B", "#0000FF"],
width: "100",
height: "100"
});
Following are the general buttons
This template has RTL support. It's very ease to turn this template into RTL by following steps.
In the deznav.js file, just change the direction property into 'rtl'
direction: "rtl"
That's it, now you are good to go with RTL version.
If you want to write any style for RTL layout, you may write them into rtl.scss file. This file is located at
scss/layout/rtl/rtl.scss
Or if you want to style it via CSS file, you can write all of your css nested by this selector
[direction="rtl"] your_selector {
}
[direction="rtl"] this is an attribute in the body tag.
Code released under the Un License License.
For more information about copyright and license check choosealicense.com.
If you need theme customization or custom web development, please provide your project details using below form and one of our well established development partners will get back to you with a free quote
Send me qouteCode released under the ThemeForest License.
Development credit: DexignZone