Flash Able Logo
Flash Able - Documentation

Flash Able Documentation for your easy development.

Version :
v1.0
Last Update :
19-02-2019
Author :
CodedThemes
Support :
Contact us
Quick Start

Create test.html file in quick-start/default/ directory.

Just Copy below code in your page and run it in your browser. It is the simple way to Getting Started with Flash Able.

CLICK TO EXPAND / COLLAPSE CODE 
<!DOCTYPE html>
<html lang="en">

<head>
    <title></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">
    <!-- 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 menupos-fixed menu-light brand-blue">
        <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="fas fa-bolt"></i>
                </div>
                <span class="b-title">Flash Able</span> -->
                <img src="../assets/images/logo.png" alt="" class="logo images">
                <img src="../assets/images/logo-icon.png" alt="" class="logo-thumb images">
            </a>
            <a class="mobile-menu" id="mobile-collapse" href="#!"><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="#!" 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="#!" 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="#!" 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/flash-able/bootstrap/default/../doc/docs.html" class="nav-link" ><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="#" class="nav-link" ><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="#!"><span></span></a>
            <a href="index.html" class="b-brand">
                <div class="b-bg">
                    A
                </div>
                <span class="b-title">Flash Able</span>
            </a>
        </div>
        <a class="mobile-menu" id="mobile-header" href="#!">
            <i class="feather icon-more-horizontal"></i>
        </a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <li>
                    <!-- [ 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">Demo Layout</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="#!">Demo Layout</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- [ breadcrumb ] end -->
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <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="#!" 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>
                <li>
                    <div class="dropdown">
                        <a class="dropdown-toggle" href="#" 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="#!" class="m-r-10">mark as read</a>
                                    <a href="#!">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>5 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>10 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>12 min</span></p>
                                            <p>currently login</p>
                                        </div>
                                    </div>
                                </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>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>1 hour</span></p>
                                            <p>currently login</p>
                                        </div>
                                    </div>
                                </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>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>2 hour</span></p>
                                            <p>Prchace New Theme and make payment</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="noti-footer">
                                <a href="#!">show all</a>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="#!" class="displayChatbox"><i class="icon feather icon-mail"></i></a></li>
                <li>
                    <div class="dropdown drp-user">
                        <a href="#" 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-signin.html" class="dud-logout" title="Logout">
                                    <i class="feather icon-log-out"></i>
                                </a>
                            </div>
                            <ul class="pro-body">
                                <li><a href="#!" class="dropdown-item"><i class="feather icon-settings"></i> Settings</a></li>
                                <li><a href="#!" class="dropdown-item"><i class="feather icon-user"></i> Profile</a></li>
                                <li><a href="message.html" class="dropdown-item"><i class="feather icon-mail"></i> My Messages</a></li>
                                <li><a href="auth-signin.html" 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">
        <a href="#!" class="h-close-text"><i class="feather icon-x"></i></a>
        <ul class="nav nav-tabs" id="chatTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active text-uppercase" id="chat-tab" data-toggle="tab" href="#chat" role="tab" aria-controls="chat" aria-selected="true"><i class="feather icon-message-circle mr-2"></i>Chat</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-uppercase" id="user-tab" data-toggle="tab" href="#user" role="tab" aria-controls="user" aria-selected="false"><i class="feather icon-users mr-2"></i>User</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-uppercase" id="setting-tab" data-toggle="tab" href="#setting" role="tab" aria-controls="setting" aria-selected="false"><i class="feather icon-settings mr-2"></i>Setting</a>
            </li>
        </ul>
        <div class="tab-content" id="chatTabContent">
            <div class="tab-pane fade show active" id="chat" role="tabpanel" aria-labelledby="chat-tab">
                <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">
                    <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="#!"><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="#!"><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="#!"><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="#!"><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="#!"><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="#!"><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="#!"><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="#!"><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="#!"><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="#!"><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="#!"><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="#!"><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="#!"><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>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="user" role="tabpanel" aria-labelledby="user-tab">
                <div class="h-list-body">
                    <div class="main-friend-cont scroll-div">
                        <div class="main-friend-list">
                            <div class="media px-3 d-flex align-items-center mt-3">
                                <a class="media-left m-r-15" href="#!">
                                    <div class="hei-50 wid-50 bg-primary img-radius d-flex text-white f-22 align-items-center justify-content-center"><i class="icon feather icon-users"></i></div>
                                </a>
                                <div class="media-body">
                                    <p class="chat-header f-w-600 mb-0">New Group</p>
                                </div>
                            </div>
                            <div class="media p-3 d-flex align-items-center">
                                <a class="media-left m-r-15" href="#!">
                                    <div class="hei-50 wid-50 bg-primary img-radius d-flex text-white f-22 align-items-center justify-content-center"><i class="icon feather icon-user-plus"></i></div>
                                </a>
                                <div class="media-body">
                                    <p class="chat-header f-w-600 mb-0">New Contact</p>
                                </div>
                            </div>
                            <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                                <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image "></a>
                                <div class="media-body">
                                    <p class="chat-header">Josephin Doe<small class="d-block">i am not what happened . .</small></p>
                                </div>
                            </div>
                            <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                                <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
                                <div class="media-body">
                                    <h6 class="chat-header">Lary Doe<small class="d-block">available</small></h6>
                                </div>
                            </div>
                            <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                                <a class="media-left" href="#!"><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">hear using Flash Able</small></h6>
                                </div>
                            </div>
                            <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                                <a class="media-left" href="#!">
                                    <div class="hei-50 wid-50 img-radius bg-success d-flex text-white f-22 align-items-center justify-content-center">A</div>
                                </a>
                                <div class="media-body">
                                    <h6 class="chat-header">Alia<small class="d-block text-muted">available</small></h6>
                                </div>
                            </div>
                            <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                                <a class="media-left" href="#!"><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">available</small></h6>
                                </div>
                            </div>
                            <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                                <a class="media-left" href="#!">
                                    <div class="hei-50 wid-50 bg-danger img-radius d-flex text-white f-22 align-items-center justify-content-center">JD</div>
                                </a>
                                <div class="media-body">
                                    <h6 class="chat-header">Josephin Doe<small class="d-block text-muted">Don't send me image</small></h6>
                                </div>
                            </div>
                            <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                                <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
                                <div class="media-body">
                                    <h6 class="chat-header">Lary Doe<small class="d-block text-muted">not send free msg</small></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="setting" role="tabpanel" aria-labelledby="setting-tab">
                <div class="p-4 main-friend-cont scroll-div">
                    <h6 class="mt-2"><i class="feather icon-monitor mr-2"></i>Desktop settings</h6>
                    <hr>
                    <div class="form-group mb-0">
                        <div class="switch switch-primary d-inline m-r-10">
                            <input type="checkbox" id="cn-p-1" checked>
                            <label for="cn-p-1" class="cr"></label>
                        </div>
                        <label class="f-w-600">Allow desktop notification</label>
                    </div>
                    <p class="text-muted ml-5">you get lettest content at a time when data will updated</p>
                    <div class="form-group mb-0">
                        <div class="switch switch-primary d-inline m-r-10">
                            <input type="checkbox" id="cn-p-5">
                            <label for="cn-p-5" class="cr"></label>
                        </div>
                        <label class="f-w-600">Store Cookie</label>
                    </div>
                    <h6 class="mb-0 mt-5"><i class="feather icon-layout mr-2"></i>Application settings</h6>
                    <hr>
                    <div class="form-group mb-0">
                        <div class="switch switch-primary d-inline m-r-10">
                            <input type="checkbox" id="cn-p-3" checked>
                            <label for="cn-p-3" class="cr"></label>
                        </div>
                        <label class="f-w-600">Backup Storage</label>
                    </div>
                    <p class="text-muted mb-0 ml-5">Automaticaly take backup as par schedule</p>
                    <div class="form-group mb-4">
                        <div class="switch switch-primary d-inline m-r-10">
                            <input type="checkbox" id="cn-p-4" checked>
                            <label for="cn-p-4" class="cr"></label>
                        </div>
                        <label class="f-w-600">Allow guest to print file</label>
                    </div>
                    <h6 class="mb-0 mt-5"><i class="feather icon-globe mr-2"></i>System settings</h6>
                    <hr>
                    <div class="form-group mb-0">
                        <div class="switch switch-primary d-inline m-r-10">
                            <input type="checkbox" id="cn-p-2">
                            <label for="cn-p-2" class="cr"></label>
                        </div>
                        <label class="f-w-600">View other user chat</label>
                    </div>
                    <p class="text-muted ml-5">Allow to show public user message</p>
                </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="#!" 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="#!"><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 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>
                        <a class="media-right photo-table" href="#!"><img class="media-object img-radius img-radius m-t-5" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image"></a>
                    </div>
                    <div class="media chat-messages">
                        <a class="media-left photo-table" href="#!"><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="#!" 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">
                    <div class="main-body">
                        <div class="page-wrapper">
                        <!-- [ 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">Demo Layout</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="#!">Demo Layout</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- [ breadcrumb ] end -->
                            <!-- [ Main Content ] start -->
                            <div class="row">

                            </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>
Copy
Bootstrap Implementation
Elite-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
Copy
Structure
Elite-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
Copy
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Flash 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>
Copy
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-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="#!" 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 -->
Copy
<!-- [ 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="#!" 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>
Copy

add container & box-layout class in <body> tag

<body class="container box-layout">
</body>
Copy

add rtl stylesheet link is below the style.css

<!-- rtl layouts -->
<link rel="stylesheet" href="../assets/css/layouts/rtl.css">
Copy

add menu-light class in <nav> tag

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

add dark stylesheet link is below the style.css

<!-- dark layouts -->
<link rel="stylesheet" href="../assets/css/layouts/dark.css">
Copy

add navbar-dark class in <nav> tag

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

add icon-colored class in <nav> tag

<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar icon-colored">
</nav>
<!-- [ navigation menu ] end -->
Copy
Menu background
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar">
</nav>
<!-- [ navigation menu ] end -->
Copy

add navbar-blue class in <nav> to set Blue navigation

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

add navbar-red class in <nav> to set Red navigation

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

add navbar-purple class in <nav> to set Purple navigation

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

add navbar-info class in <nav> to set info navigation

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

add navbar-Dark class in <nav> to set Dark navigation

<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar navbar-dark">
</nav>
<!-- [ navigation menu ] end -->
Copy
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 -->
Copy

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

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

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

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 -->
Copy
Menu background [ gradient ]

add navbar-gradient-blue class in <nav> to set background as blue gradient in menu

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

add navbar-gradient-red class in <nav> to set background as red gradient in menu

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

add navbar-gradient-purple class in <nav> to set background as purple gradient in menu

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

add navbar-gradient-info class in <nav> to set background as info gradient in menu

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

add navbar-gradient-dark class in <nav> to set background as dark gradient in menu

<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar navbar-gradient-dark">
</nav>
<!-- [ navigation menu ] end -->
Copy
Menu background [ Pattern ]

add navbar-pattern-1 class in <nav> to set background pattern 1 in menu

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

add navbar-pattern-2 class in <nav> to set background pattern 2 in menu

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

add navbar-pattern-3 class in <nav> to set background pattern 3 in menu

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

add navbar-pattern-4 class in <nav> to set background pattern 4 in menu

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

add navbar-pattern-5 class in <nav> to set background pattern 5 in menu

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

add navbar-pattern-6 class in <nav> to set background pattern 6 in menu

<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar navbar-pattern-6">
</nav>
<!-- [ navigation menu ] end -->
Copy
Menu Active item background
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar">
</nav>
<!-- [ navigation menu ] end -->
Copy

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

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

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

add active-info class in <nav> to set info color in active item

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

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 -->
Copy
Menu caption ( title ) color
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar">
</nav>
<!-- [ navigation menu ] end -->
Copy

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

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

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

add title-info class in <nav> to set info color in Menu caption

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

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 -->
Copy
Menu brand background
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar">
</nav>
<!-- [ navigation menu ] end -->
Copy

add brand-blue class in <nav> to set Blue color in Menu caption

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

add brand-red class in <nav> to set Red color in Menu caption

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

add brand-purple class in <nav> to set Purple color in Menu caption

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

add brand-info class in <nav> to set info color in Menu caption

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

add brand-dark class in <nav> to set Dark color in Menu caption

<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar brand-dark">
</nav>
<!-- [ navigation menu ] end -->
Copy
Menu List Icon
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar">
</nav>
<!-- [ navigation menu ] end -->
Copy

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

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

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

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

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 -->
Copy
Menu dropdown icon
<!-- [ navigation menu ] start -->
<nav class="pcoded-navbar">
</nav>
<!-- [ navigation menu ] end -->
Copy

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

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 -->
Copy
SCSS

How to Compile SCSS?

You need to compile scss when you change scss using koala scss Compiler

List of variables for Flash 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: 70px;

// Color list for Flash Able Admin Templet
$primary-color: #2196f3;
$warning-color: #FF9800;
$danger-color: #f44336;
$success-color: #4caf50;
$purple-color: #7759de;
$info-color: #00ACC1;
$secondary-color: #748892;
$dark-color: #263238;
$inverse-color: $dark-color;
$theme-border: #e2e5e8;

// header colors
$header-dark-background: #242e3e;
$header-dark-text-color: #fff;
$header-light-background: #fff;
$header-light-text-color: #242e3e;

// Sidebar colors
$menu-dark-background: #242e3e;
$menu-dark-text-color: #b5bdca;
$menu-light-background: #fff;
$menu-light-text-color: #242e3e;
$menu-active-color: $primary-color;

// dark layout colors
$dark-layout: darken(#242e3e,8%);
$dark-layout-font: #adb7be;

// Menu icon
$menu-icon-color: #2196f3, #f44336, #01a9ac ,#7759de , #00ACC1, $warning-color;

// Header background
$color-header-name: blue, red, purple, info, dark;
$color-header-color: #2196f3, #f44336, #7759de ,#00ACC1,#242e3e;

// Menu background
$color-menu-name: blue, red, purple, info, dark;
$color-menu-color: #2196f3, #f44336, #7759de ,#00ACC1,#242e3e;

// Menu background gradient
$color-menu-gradient-name: blue, red, purple, info, dark;
$color-menu-gradient-color: linear-gradient(to bottom, #7759de 0%, #2196f3 100%),
linear-gradient(to bottom, rgb(164, 69, 178) 0%, rgb(212, 24, 114) 52%, rgb(255, 0, 102) 100%),
linear-gradient(to top, rgb(178, 117, 240) 0%, rgb(117, 117, 240) 100%) ,
linear-gradient(to bottom, rgb(1, 169, 172) 0%, rgb(1, 219, 223) 100%),
linear-gradient(to bottom, rgb(36, 46, 62) 0%, rgb(58, 76, 103) 100%);

// Active background color
$color-active-name: blue, red, purple, info, dark;
$color-active-color: #2196f3, #f44336, #7759de ,#00ACC1,$dark-color;

// Menu title color
$color-title-name: blue, red, purple, info, dark;
$color-title-color: #2196f3, #f44336, #7759de ,#00ACC1,$dark-color;

// basic variable
$theme-font-family: "Mada",sans-serif;
$theme-font-size: 14px;
$theme-background: #eff3f6;
$theme-font-color: #686c71;
$theme-heading-color: #111;
Copy
Plugins
Plugins Name Plugins page use Link
Bootstrap default.html View Resource
Animation animation.html View Resource
Am chart chart-am.html View Resource
Calender full-calendar.html View Resource
Charts chart-chartjs.html View Resource
Ck-Editor editor-classic.html View Resource
Color-Picker form-picker.html View Resource
Clipboard layout-static.html View Resource
Ekko-lightbox ac_lightbox.html View Resource
Data-Table tbl_datatable.html View Resource
Date Picker ac-datepicker-componant.html View Resource
E-Charts chart-echart.html View Resource
Highchart chart-highchart.html View Resource
knob chart chart-knob.html View Resource
Morris chart chart-morris.html View Resource
Nvd3 chart chart-nvd3.html View Resource
Peity chart chart-peity.html View Resource
Float chart widget-chart.html View Resource
File-Upload file-upload.html View Resource
Foo-Table tbl_foo.html View Resource
Form-Mask form-masking.html View Resource
Form-validation form-validation.html View Resource
Forms Wizard form-wizard.html View Resource
Gridstack ac_gridstack.html View Resource
Gallery gallery-advance.html View Resource
JQuery Default.html View Resource
JQuery ui ac_gridstack.html View Resource
Syntax Highlighter ac_syntax_highlighter.html View Resource
Light-Box2 ac_lightbox.html View Resource
Material-datetimepicker form-picker.html View Resource
Modal-window-effects ac_modal.html View Resource
Moment notes.html View Resource
Map-Google map-google.html View Resource
Map-Vector map-vector.html View Resource
Max-length form-elements-advance.html View Resource
Multi-select form-select.html View Resource
Nestable ac_nestable.html View Resource
Notification ac_notification.html View Resource
Owl-carousel ac_slider.html View Resource
Offline ec-offline.html View Resource
Pnotify ac_pnotify.html View Resource
Radial chart-radial.html View Resource
Range-Slider ac_rangeslider.html View Resource
Rating ac_rating.html View Resource
Store js notes.html View Resource
Session-idle-timeout form-select.html
Select2 form-select.html View Resource
Scroll js All Page ( Menu ) View Resource
Sweet Alert ac_alert.html View Resource
Tags form-elements-advance.html View Resource
Tinymce editor-tinymce.html View Resource
Toolbar ac_toolbar.html View Resource
Enjoyhint ac_tour.html View Resource
Tree-View ac_treeview.html View Resource
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 Flash Able?

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

Why choose Flash Able?

Flash Able is made by Codedthemes's experience coders and designers. Well tested bug free code, easy to use flexible structure makes Flash 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 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
v1.0
-----------
14-02-2019
-----------

- Initial release
- PSD, XD, SKETCH, Starter/Full version folders included in download package.
Copy