Support, all rights reserved. 2018 ©
Material Able v1.0 documentation.

Getting started

Material able is fully responsive bootstrap 4 admin template for your complete need.

What's included

  • files/
    • assets/
      • css/
        • style.css
        • pages.css
        • widget.css
        • ...- More
      • icon/
        • feather/css/feather.css
        • icofont/css/icofont.css
        • themify-icons/themify-icons.css
        • ...- More
      • images/
        • logo.png
        • avatar-1.png
        • avatar-2.png
        • avatar-3.png
        • ...-More
      • js/
        • vertical/
          • vertical-layout.js
          • horizontal-layout.js
        • script.js
        • pcoded.js
        • SmoothScroll.js
        • ...- More
      • Pages/
        • dashboard/
          • custom-dashboard.js
          • project-dashboard.js
          • ...-More
        • widget/
          • widget-chart.js
          • widget-chart-advanced.js
        • flag-icon.js
        • form-validation.js
        • ...-More
      • scss/
        • partial/
          • menu/. .
          • pages/. .
          • element/. .
          • _genral.scss
        • style.scss
      HTML/
      • index.html
      • dashboard-project.html
      • dashboard-crm.html
      • widget-statistic.html
      • button.html

Install-template

How to Use templates?

Here are described various ways of using this sidebar, you can read and adapt them to your website's requirements. Below are described all options with details.

CSS Files to Include

copy 

<!-- framework -->
<link rel="stylesheet" type="text/css" href="../files/bower_components/bootstrap/css/bootstrap.min.css">

<!-- waves.css -->
<link rel="stylesheet" href="../files/assets/pages/waves/css/waves.min.css" type="text/css" media="all">

<!-- feather icon -->
<link rel="stylesheet" type="text/css" href="../files/assets/icon/font-awesome/css/font-awesome.min.css">

<!-- main style -->
<link rel="stylesheet" type="text/css" href="../files/assets/css/style.css">

JS Files to Include

copy 

<!-- Required Jquery -->
<script type="text/javascript" src="../files/bower_components/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="../files/bower_components/jquery-ui/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../files/bower_components/popper.js/js/popper.min.js"></script>
<script type="text/javascript" src="../files/bower_components/bootstrap/js/bootstrap.min.js"></script>

<!-- waves js -->
<script src="../files/assets/pages/waves/js/waves.min.js"></script>

<!-- jquery slimscroll js -->
<script type="text/javascript" src="../files/bower_components/jquery-slimscroll/js/jquery.slimscroll.js"></script>

<!-- Custom js -->
<script src="../files/assets/js/pcoded.min.js"></script>
<script src="../files/assets/js/vertical/vertical-layout.min.js"></script>
<script type="text/javascript" src="../files/assets/js/script.min.js"></script>

Simple Use with Default Menu

copy 

<body>

	<!-- [ Pre-loader ] start -->
	<div class="loader-bg">
		<div class="loader-bar"></div>
	</div>
	<!-- [ Pre-loader ] end -->

	<div id="pcoded" class="pcoded">
		<div class="pcoded-overlay-box"></div>
		<div class="pcoded-container navbar-wrapper">

    		<!-- [ Header ] start -->
			<nav class="navbar header-navbar pcoded-header">
				<div class="navbar-wrapper">
					<div class="navbar-logo">

                        <a class="mobile-menu waves-effect waves-light" id="mobile-collapse" href="#!">
							<i class="feather icon-toggle-right"></i>
						</a>

                        <a href="index.html">
							<img class="img-fluid" src="../files/assets/images/logo.png" alt="Theme-Logo" />
						</a>

                        <a class="mobile-options waves-effect waves-light">
							<i class="feather icon-more-horizontal"></i>
						</a>
					</div>
					<div class="navbar-container container-fluid">

                        <ul class="nav-left">
							<!-- . . . header left content hear . . .  -->
						</ul>

                        <ul class="nav-right">
							<!-- . . . header right content hear . . .  -->
						</ul>

					</div>
				</div>
			</nav>
			<!-- [ Header ] end -->

			<!-- [ chat user list ] start -->
			<div id="sidebar" class="users p-chat-user showChat">
				<!-- . . . chat user list content hear . . .  -->
			</div>
			<!-- [ chat user list ] end -->

			<!-- [ chat message ] start -->
			<div class="showChat_inner">
				<!-- . . . chat user message content hear . . .  -->
			</div>
			<!-- [ chat message ] end -->

            <div class="pcoded-main-container">
				<div class="pcoded-wrapper">

            		<!-- [ navigation menu ] start -->
					<nav class="pcoded-navbar">
						<div class="pcoded-inner-navbar main-menu">
							<!-- . . . Sidebar menu content hear . . .  -->
						</div>
					</nav>
					<!-- [ navigation menu ] end -->

            		<div class="pcoded-content">

                        <!-- [ breadcrumb ] start -->
						<div class="page-header">
							<!-- . . . breadcrumb content hear . . .  -->
						</div>
						<!-- [ breadcrumb ] end -->

                        <div class="pcoded-inner-content">
							<div class="main-body">
								<div class="page-wrapper">
									<div class="page-body">

                                        <!-- [ page content ] start -->
										<div class="row">
											<!-- . . . . . . . . . . . . . .  . . .  -->
											<!-- . . . Main body content hear . . .  -->
											<!-- . . . . . . . . . . . . . .  . . .  -->
										</div>
										<!-- [ page content ] end -->

									</div>
								</div>
							</div>
						</div>
					</div>

                    <!-- [ style Customizer ] start -->
					<div id="styleSelector">
						<!-- . . . Live Customizer hear . . .  -->
					</div>
					<!-- [ style Customizer ] end -->

				</div>
			</div>
		</div>
	</div>

</body>

Menu Settings

How to initiate Pcoded plugin with default option

copy 

$("#pcoded" ).pcodedmenu();

How to initiate Pcoded plugin with default option

copy 

var Navbarbg = "themelight1";           //  navbar color                themelight1 / theme1
var headerbg = "theme1";                //  header color                theme1 / theme2 / theme3 / theme4 / theme5 / theme6
var menucaption = "theme1";             //  menu caption color          theme1 / theme2 / theme3 / theme4 / theme5 / theme6 / theme7 / theme8 / theme9
var bgpattern = "theme1";               //  background color            theme1 / theme2 / theme3 / theme4 / theme5 / theme6
var activeitemtheme = "theme1";         //  menu active color           theme1 / theme2 / theme3 / theme4 / theme5 / theme6 / theme7 / theme8 / theme9 / theme10 / theme11 / theme12
var frametype = "theme1";               //  preset frame color          theme1 / theme2 / theme3 / theme4 / theme5 / theme6
var layout_type = "light";              //  theme layout color          dark / light
var layout_width = "wide";              //  theme layout size           wide / box
var menu_effect_desktop = "shrink";     //  navbar effect in desktop    shrink / overlay / push
var menu_effect_tablet = "overlay";     //  navbar effect in tablet     shrink / overlay / push
var menu_effect_phone = "overlay";      //  navbar effect in phone      shrink / overlay / push
var menu_icon_style = "st2";            //  navbar menu icon            st1 / st2

Menu Options

Default Option is True

Sr. No. Option Discription
1 themelayout: Plugins Provide horizontal and vertical navigation. you can adapt them to your website's requeriments. value should be 'vertical' , 'horizontal'
2 MenuTrigger: Plugins Provide Click and Hover trigger on different level. This Menu trigger option work only first level. you can adapt them to your website's requeriments. value should be 'click' , 'hover'
3 SubMenuTrigger: This option working same as MenuTrigger: option. but its work on all menu level rather then first level. This option is most useful in vertical navigation you can adapt them to your website's requeriments. value should be 'click' , 'hover'
4 activeMenuClass: This option place active class on clicked menu item and its parent menu item . value should be 'active'
5 freamtype: Use this option to set background of header on pcoded class. value should be 'theme1', 'theme2', 'theme3', 'theme4', 'theme5', 'theme6'
6 menutype: Use this option to set single color or multicolor icon on navbar icon. value should be 'st1', 'st2'
7 layouttype: Use this option to set light or dark layout of theme. value should be 'light', 'dark'
8 ThemeBackgroundPattern: Use this option to set background pattern on body.value should be 'theme1', 'theme2', 'theme3', 'theme4', 'theme5', 'theme6'
this option will only work if you have selected verticalMenulayout:"box"
9 HeaderBackground: Use this option to set background color on Right Header. Plugins provide 9 header background. value should be 'theme1', 'theme2', 'theme3', 'theme4', 'theme5', 'theme6'
10 LHeaderBackground : Use this option to set background color on Left Header. Plugins provide 9 left header background. value should be 'theme1', 'theme2', 'theme3', 'theme4', 'theme5', 'theme6'
11 NavbarBackground: Use this option to set background color on Navigation. Plugins provide 9 navigation background.
value should be 'theme1', 'themelight1'
12 ActiveItemBackground: Use this option to set background color on Active Menu Item. Plugins provide 9 background 9 on Active Menu Item.
value should be 'theme1', 'theme2', 'theme3', 'theme4', 'theme5', 'theme6', 'theme7', 'theme8', 'theme9', 'theme10', 'theme11', 'theme12'
This option will only work if you have selected ActiveItemStyle:"style1" Option.
13 SubItemBackground: Still this features not working
14 ActiveItemStyle: You can change Active Item Style by use this option. value should be 'style0', 'style1'
if you choose 'style0' then default option style will work.
15 ItemBorder: Use this option to set or remove border on menu item .on value should be 'true', 'false'
Default option is 'true'
16 ItemBorderStyle: Use this option to set border style . Plugin provide 3 border style.value should be 'solid/dotted/dashed'
Default Option is 'solid'
This option will work if you have choose ItemBorder:"true".
17 DropDownIconStyle: Plugin provide 3 style to change drop down menu item icons. value should be 'style1/style2/style3'
Default option value is 'style1'
18 FixedNavbarPosition: Use this option to fix navigation. value should be 'true', 'false'
Default option value is 'false'
19 FixedHeaderPosition: Use this option to fix header. value should be 'true', 'false'
Default option value is 'false'
This Option work only vertical navigation.
20 verticalMenuplacement: Use this option to place sidebar on left and right side. value should be 'left', 'right'
Default option value is 'left'
21 verticalMenulayout: Plugin provide three type menu layout . value should be 'wide', 'box'
Default option value is 'wide'
22 VerticalSubMenuItemIconStyle: This option provide ability to change the sub menu item icons style on vertical navigation. value should be 'style1' to 'style6' or 'no icon'
Default option value is 'style1'
23 verticalMenueffect:{
   desktop : " ",
   tablet : " ",
   phone : " ",
}, 		Plugin provide three navigation effect. you can set menu effect according to device. value should be 'shrink','push','overlay'
Default option value on desktop is 'shrink'
Default option value on tablet is 'push'
Default option value on phone is 'overlay'
24 defaultVerticalMenu: {
   desktop : "expanded",
   tablet : "collapsed",
   phone : "offcanvas",
}, 		Plugin provide multi vertical navigation style. you can set defalult navigation style accoding to device. value should be 'expanded','collapsed','offcanvas','compact','fullpage','ex-popover','sub-expanded'
Default option value on desktop is 'expanded'
Default option value on tablet is 'collapsed'
Default option value on phone is 'offcanvas'
25 onToggleVerticalMenu : {
   desktop : "collapsed",
   tablet : "expanded",
   phone : "expanded",
}, 		Plugin provide change vertical navigation on toggle according to different device and size. value should be 'expanded','collapsed','offcanvas','compact','fullpage','ex-popover','sub-expanded'
Default option value on desktop is 'collapsed'
Default option value on tablet is 'expanded'
Default option value on phone is 'expanded'

SCSS

SCSS Basics

Please note that all Detail main Web Site.. Click Here..

_variable.scss files

copy 
// General variables
										// General variables
$theme-bg-color: #f3f3f3;
$theme-font-size:0.875em;
$theme-font-color: #455a64;
$theme-font-family:'Open Sans', sans-serif;
$p-color:#78909c;

// Theme colors variables;
$primary-color:#448aff;
$warning-color:#ffe100;
$default-color:#d6d6d6;
$danger-color: #ff5252;
$success-color:#11c15b;
$inverse-color:#37474f;
$info-color :#00bcd4;
$disabled-color:#448aff;
$white-txt: #fff;
$theme-border:#d6d6d6;
$light-color:#666;

_menu.scss files

copy 

// menu caption colors variables;
$menu-title: #448aff,#5D4037,#4CAF50,#d84315,#4527a0,#37474f,#000,#999,#fff;

// header colors variables;
$header-theme: #448aff,#5D4037,#4CAF50,#d84315,#4527a0,#37474f;

// background pattern color [ used in box layout ]  variables;
$box-bg-color: #448aff,#5D4037,#4CAF50,#d84315,#4527a0,#37474f;

// Dark navbar color variables;
$left-navbar-theme: #37474f;

// light navbar color variables;
$left-navbar-light-theme: #fff;

// menu active item color variables;
$active-item: #448aff,#5D4037,#4CAF50,#d84315,#4527a0,#37474f,#11c788,#FF5252,#ff784f,#38a9f9,#038f9e,#39ADB5;

// menu item icon color variables;
$icon-color: #448aff,#5D4037,#4CAF50,#d84315,#4527a0;

Plugins

Plugins Name Plugins page use Plugins css customize js Link
Ace-editor ace-editor.html ____ ____ View Resource
Animation animation.html style.css assets/pages/animation.js View Resource
Calender full-calender.html fullcalendar.css assets/pages/animation.js View Resource
Charts chartjs.html c3.css chart-chartjs.js View Resource
Ck-Editor ck-editor.html editor.css assets/pages/ckeditor-custom.js View Resource
Color-Picker form-elements-advance.html spectrum.css assets/pages/advance-form.js View Resource
Count Down coming-soon.html ___ assets/pages/countdown.js View Resource
Data-Table data-table.html buttons.dataTables.min.css assets/pages/data-table.js View Resource
Date Picker form-elements-advance.html bootstrap-material-datetimepicker.css assets/pages/advance-form.js View Resource
E-Charts echart.html assets/pages/echart.js View Resource
Edit-Table editable-table.html ____ assets/pages/editable.js View Resource
File-Upload file-upload.html dropzone.css __ View Resource
Foo-Table foo-table.html footable.standalone.min.css assets/pages/foo-table.js View Resource
Form-Mask form-mask.html __ assets/pages/form-mask.js View Resource
Forms-Wizard-Validation forms-validation.html jquery.steps.css assets/pages/form-validation.js View Resource
Gallery gallery.html lightgallery.css assets/pages/gallery.js View Resource
Grid Stack gridstack.html __ assets/pages/gridstack.js View Resource
High lighter All Pages shThemeDefault.css assets/pages/gridstack.js View Resource
Image-Crop image-cropper.html cropper.css assets/pages/croper.js View Resource
Isotope landing-page.html __ assets/pages/landing-page.js View Resource
Jq Pagination other.html jqpagination.css assets/pages/other.js View Resource
Jquery-Fab button-fab.html jquery-fab.css assets/pages/button-fab.js View Resource
Light-Box gallery.html lightbox.css assets/pages/gallery.js View Resource
Light-Box2 gallery.html lightbox.css assets/pages/gallery.js View Resource
list list.html __ assets/pages/list-custom.js View Resource
List-Scroll list.html stroll.css assets/pages/list-custom.js View Resource
Map-Google map-google.html __ assets/pages/google-maps.js View Resource
Map-Vector map-vector.html jquery-jvectormap.css assets/pages/map-vector.js View Resource
Max-length form-elements-advance.html __ assets/pages/advance-form.js View Resource
Modal modal.html component.css assets/pages/modal.js View Resource
Multi-select form-elements-advance.html bootstrap-multiselect.css assets/pages/advance-form.js View Resource
Nestable nestable.html nestable.css assets/pages/nestable.js View Resource
Notification notification.html notification.css assets/pages/notification.js View Resource
Pricing pricing.html style.css __ View Resource
Radial pricing.html style.css __ View Resource
Range-Slider range-slider.html bootstrap-slider.css assets/pages/range-slider.js View Resource
Rating rating.html rating.css __ View Resource
Responsive-Table responsive-table.html rwd-table.min.css __ View Resource
Search responsive-table.html rwd-table.min.css assets/js/main.js View Resource
Select2 form-elements-advance.html select2.min.css assets/pages/advance-form.js View Resource
Slim Scroll menu.html __ assets/js/menu.js View Resource
Sortable draggable.html __ assets/js/menu.js View Resource
Sticky sticky.html jquery.postitall.css assets/pages/sticky.js View Resource
Sweet Alert modal.html sweetalert.css assets/pages/modal.js View Resource
Switchery form-elements-advance.html switchery.min.css assets/pages/advance-form.js View Resource
Tags form-elements-advanc.html bootstrap-tagsinput.css assets/pages/advance-form.js View Resource
Task-Detail task-detailed.html __ assets/pages/task-detail.js View Resource
TimeLine timeline.html style.css __ View Resource
Todo todo.html __ assets/plugins/todo/js/todo.js View Resource
Tour tour.html enjoyhint.css assets/pages/tour.js View Resource
Tree-View treeview.html treeview.css __ View Resource
Waves button.html waves.min.css __ View Resource
Wysiwyg-Editor wysiwyg-editor.html __ assets/pages/wysiwyg-editor.js View Resource
X-Editable x-editable.html __ assets/pages/xeditable.js View Resource

FAQ

Begin typing your question. If we don't have an answer for it in our FAQ, please leave us a message on our contact page.

  • What is Material able?

    Material able is responsive admin template/dashboard which useful for your complete entire projects like CRM system - Task System - User Management System - Social Dashboard etc. Without any trouble Material able gives the perfect outcome with tons of ready made plugins which helps you at every step while creating any project.

  • Why chooseMaterial able?

    Material able built using bootstrap's latest version 4 which have complete compatibility on bootstrap4. It is fully crafted for every one's need and its fullfilled those need too. Tons of Plugins, Forms, Charts, Tables, Custom Pages gives extra smoothness in project.

  • Licence terms?

    Material able comes with single license usage and support for every single purchase. If you want to use Material able for multiple project you must buy the extra licence for that.

  • What about Item Support?

    We only support those purchaser who purchased Material able. 6 months included support comes with every single purchase of Material able.

  • What is Support Turnaround time ?

    When you comment or submit the ticket for support. Our team takes it very seriously and respond it within a Half or Full day.

  • How i rate the Material able ?

    It just a simple. Go to your account. Then check your download section where you found Material able Template. Click on start ratings. Simple !!!

Version Change Log

Detailed version change log describe below.


v1.0
-----------

27-03-2019 - v1.0 Release