Ablepro v8.0 - Documentation

Helper Documentation of Able Pro Bootstrap Admin Template.

Version :
v8.0.0
Last Update :
12-08-2019
Author :
Phoenixcoded
Support :
Ticksy
Structure

Following is default directory structure along with page structure. That helps you understanding the entire Ablepro v8.0 template structure.


    src/
    ├── assets/
    │   ├── fonts/
    │   ├── images/
    │   ├── js/
    │   ├── json/
    │   ├── scss/
    │   ├── html/
    ├── .babelrc
    ├── gulpfile.js
    ├── package.json
    ├── package-lock.json
	├── README.MD


                                                


    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Ablepro v8.0 bootstrap admin template by Phoenixcoded</title>
        <!-- HTML5 Shim and Respond.js IE11 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 11]>
        	<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="Phoenixcoded" />

        <!-- 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>

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

        <!-- [ navigation menu ] start -->
        <nav class="pcoded-navbar menu-light ">
        </nav>
        <!-- [ navigation menu ] end -->

        <!-- [ Header ] start -->
        <header class="navbar pcoded-header navbar-expand-lg navbar-light header-blue">
        </header>
        <!-- [ Header ] end -->

        <!-- [ Main Content ] start -->
        <div class="pcoded-main-container">
            <div class="pcoded-content">

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

                <!-- [ Main Content ] start -->
                <div class="row">
                </div>
                <!-- [ Main Content ] end -->

            </div>
        </div>
        <!-- [ Main Content ] end -->

        <!-- Warning Section start -->
        <!-- Older IE warning message -->
        <!--[if lt IE 11]>
            <div class="ie-warning">
            </div>
        <![endif]-->
        <!-- Warning Section Ends -->

        <!-- Required Js -->
        <script src="assets/js/vendor-all.min.js"></script>
        <script src="assets/js/plugins/bootstrap.min.js"></script>
        <script src="assets/js/ripple.js"></script>
        <script src="assets/js/pcoded.min.js"></script>

    </body>

    </html>


                                                
Layouts

This Section explains everything about Page Layouts with its extra available options. Copy code snippet for each options carefully.

This table contains all classes related to the vertical layout.

Layout Description Page link
navbar Static This is default layout so you don't need to put any settings more detail
Navbar fixed add menupos-fixed class in <nav> tag more detail
Header Fixed add headerpos-fixed class in <header> tag 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-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="#!" 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="#!" 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="#!" class="">Menu Levels 2.1</a>
    							<ul class="pcoded-submenu">
    								<li class=""><a href="#!" class="">Menu Levels 3.1</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.2</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.3</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.4</a></li>
    							</ul>
    						</li>
    						<li class="pcoded-hasmenu"><a href="#!" class="">Menu Levels 2.2</a>
    							<ul class="pcoded-submenu">
    								<li class=""><a href="#!" class="">Menu Levels 3.1</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.2</a></li>
    							</ul>
    						</li>
    						<li class=""><a href="#!" class="">Menu Levels 2.3</a></li>
    						<li class=""><a href="#!" 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-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="#!" 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="#!" 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="#!" class="">Menu Levels 2.1</a>
    							<ul class="pcoded-submenu">
    								<li class=""><a href="#!" class="">Menu Levels 3.1</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.2</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.3</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.4</a></li>
    							</ul>
    						</li>
    						<li class="pcoded-hasmenu"><a href="#!" class="">Menu Levels 2.2</a>
    							<ul class="pcoded-submenu">
    								<li class=""><a href="#!" class="">Menu Levels 3.1</a></li>
    								<li class=""><a href="#!" class="">Menu Levels 3.2</a></li>
    							</ul>
    						</li>
    						<li class=""><a href="#!" class="">Menu Levels 2.3</a></li>
    						<li class=""><a href="#!" 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/layout-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/layout-dark.css">


                                                

add navbar-dark class in <nav> tag


    <!-- [ header menu ] start -->
    <nav class="pcoded-header header-blue">
    </nav>
    <!-- [ header menu ] end -->


                                                
Background gradient

add background-grd-blue class in <body> to set Blue background


    <body class="background-grd-blue">
    </body>


                                                        

add background-grd-red class in <body> to set Red background


    <body class="background-grd-red">
    </body>


                                                        

add background-grd-purple class in <body> to set Purple background


    <body class="background-grd-purple">
    </body>


                                                        

add background-grd-info class in <body> to set Info background


    <body class="background-grd-info">
    </body>


                                                        

add background-grd-green class in <body> to set Green background


    <body class="background-grd-green">
    </body>


                                                        

add background-grd-dark class in <body> to set Dark background


    <body class="background-grd-dark">
    </body>


                                                        
Background image

add background-img-1 class in <body> to set image 1 as background


    <body class="background-img-1">
    </body>


                                                        

add background-img-2 class in <body> to set image 2 as background


    <body class="background-img-2">
    </body>


                                                        

add background-img-3 class in <body> to set image 3 as background


    <body class="background-img-3">
    </body>


                                                        

add background-img-4 class in <body> to set image 4 as background


    <body class="background-img-4">
    </body>


                                                        

add background-img-5 class in <body> to set image 5 as background


    <body class="background-img-5">
    </body>


                                                        

add background-img-6 class in <body> to set image 6 as background


    <body class="background-img-6">
    </body>


                                                        
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
Images reference
Link
Icon Finder
Unsplash Images
Elements Photos (i.e. not included in package)
FAQ
What is Ablepro v8.0?

Ablepro v8.0 is premium dashboard template comes with tons of layout options, widgets, ready to use pages which completely suitable for any complex project.


Why choose Ablepro v8.0?

Ablepro v8.0 is made by Phoenixcoded's experience coders and designers. Well tested bug free code, easy to use flexible structure makes Ablepro v8.0 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 provides 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

	19-5-2020 - Release v8.1
	-----------------------------------
    - New bootstrap 4.5.0 was updaated.


	13-8-2019 - Release v8.0
	-----------------------------------
    - New Menu Layouts + Versions available.
    - It's completely  different from v7.3.3
    - Documentation changes for v8.0

    19-06-2019 - Release v7.3.3
    -----------------------------------
    HTML
    ----------
    - No change

    Angular
    ----------
    - Upgrade to Angular 8+ with CLI 8.0.1
    - Fix horizontal menu structure bug
    - Fix IE Support bug
    - Change Lazy loading with import
    - Remove animation
    - Add new extension modules tinymac and wyasing editor and remove quill editor.
    - Change style for task board abd invoice list card
    - Change Full event calendar.
    - Remove ngx-chip.
    - Update Light box module
    - Add more App modules like, help-desk, todo
    - Add Advance UI module like, Sweetalert, datepicker
    - Remove basic color module

    07-01-2019 - Release v7.3.2
    -----------------------------------
    HTML
    ----------
    - Bug fixs.
    - No need to migrate from v7.3.1 to v7.3.2

    Angular
    ----------
    - Release Angular 7 compatible version

    21-08-2018 - Release v7.3.1
    -----------------------------------
    HTML
    ----------
    - No change

    Angular
    ----------
    - upgrade to angular cli 6.0.7
    - for easy setup add new package skeleton for vertical and horizontal
    - error 404 for amchart SVG images
    - horizontal menu overlay problem solved
    - mobile and tablet device spacing problem solved
    - amchart zoom to index solved

    10-05-2018 - Release v7.3
    -----------------------------------
    - Note - skip version v7.2
    - Major changes in both HTML & Angular versions.
    - older version v6.1 is still available in the download package.
    - Angular 4 & 5 version also still available in the download package.

    HTML
    --------
    - Added documentation in the download package.
    - Menu hover transition remove.
    - Menu hover & active radius reduce
    - Authentication Pages change
    - File upload page change.
    - Box layout improved.
    - Few of bugs fixes

    Angular
    ---------
    - Release Angular 6 compatible version.
    - The horizontal version available for Angular 5 & 6 too.
    - Added more components. Check to attach documentation for that.
    - Responsive bugs solve.
    - Apply all HTML version changes in Angular

    12-02-2018 - Release v7.1
    -----------------------------------
    - Angular 5 version for newer Able pro 7.0
    - No change in the HTML version.

    30-01-2018 - Release v7.0
    ------------------------------------
    - Remove support of Angular 1 Version
    - New Menu Layouts + Versions available.
    - Angular 4 Version Available now for older version v6.1
    - It's completely  different from v6.0
    - Documentation changes for v7.0

    28-09-2017 - Release v6.0
    ------------------------------------
    - Bootstrap 4 Beta version compatible
    - Bower Components folder structure changed. Changes made on every HTML Pages which contain bower components.
    - Bower installation through bower-installer
    - visit https://github.com/rquadling/bower-installer for more info
    - Bugs fixes on Menus
    - No change in Angular version
    - note:- It's not recommended to use Able pro v5.0 with 6.0 OR you may replace CSS / JS assets/ files for a new update.

    01/05/2017 - Release v5.0
    ------------------------------------
    - Bug fixes

    03/04/2017 - Release v4.0
    ------------------------------------
    - The angular version included in the package with Bower, Grunt compatible

    09/01/2017 - Release v3.0
    ------------------------------------
    - RTL - Boxed Version included in Package.
    - PHP version Horizontal mobile menu fix.
    - Changes in all .html files for better performance.
    - Detailed changelog provided in Documentation.
    - Kindly replace all CSS / JS files for better effect.
    ------------------------------------

    24/01/2017 - Release v2.0
    ------------------------------------
    - Separate folder for Horizontal - Vertical Layouts with light and dark version separate too.
    - Separate folder for PHP version.
    ------------------------------------

    21/01/2017 - Release v1.0 Initially