Alpona

A Clean Responsive Flat B3 Admin Template


Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email by my profile email form.
Thanks so much!

I have launched my support forum to give you better support. For any more help Please go http://goo.gl/E1auh here. I will reply there. Thanks

For this theme follwing files must require for all pages. Here I have used lots of jquery plugins and lots of js functions those I included with individually with every pages. You can use those as your own way.

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Alpona - A Clean Responsive Flat B3 Admin Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Admin Panel Template">
        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/font-alpona.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
        <link href="css/bootstrap-reset.css" rel="stylesheet">
        <!--fav and touch icons -->
        <link rel="shortcut icon" href="ico/favicon.ico">
        <script src="js/jquery.js"></script>
    </head>
    <body>
        <div class="main-wrapper">
            <!--CONTENT HERE-->
        </div>
        <script src="js/bootstrap.min.js"></script>
        <!--jQuery touch scroll -->
        <script src="js/jquery.nicescroll.js"></script>
        <script src='js/jquery.cookie.js'></script>
        <script src='js/jquery.hoverIntent.minified.js'></script>
        <!--jQuery leftbar navigation accordion -->
        <script src='js/jquery.dcjqaccordion.2.7.js'></script>
        <!-- Theme common script -->
        <script src='js/common-script.js'></script>
        <!--[if lte IE 7]>
        <script src="js/font-alpona-ie7.js"></script>
        <![endif]-->
    </body>
</html>

Requires HTML5 doctype

This is basic startup of this tmeplate

<!DOCTYPE HTML>
<html lang="en">
    <!--BODY-->
</html>

Requires Meta Tag

Following meta tag must require to ensure devices display responsive pages properly:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Alpona - A Clean Responsive Flat B3 Admin Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Admin Panel Template">
        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/font-alpona.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
        <link href="css/bootstrap-reset.css" rel="stylesheet">
        <!--fav and touch icons -->
        <link rel="shortcut icon" href="ico/favicon.ico">
        <script src="js/jquery.js"></script>
    </head>
    <body>
        <div class="main-wrapper">
            <div class="scroll-top">
            <!-- Sroll Top -->
            </div>
            <!-- TOP BAR -->
            <div class="top-bar">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-4 col-md-4">
                        <!-- Responsive Toggle Icon for Sidebar-->
                            <a href="#" class="left-toggle"><i class="icon-menu-2 "></i></a>
                            <!-- LOGO -->
                            <div class="branding">
                                <!-- LOGO -->
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4 responsive-notification-mnu">
                           <!-- Notification Dropdown -->
                        </div>
                        <div class="col-sm-4 col-md-4 clearfix responsive-log-mnu">
                            <!-- ADMIN DRODOWN MENU -->
                            <div class="loged-nav pull-right">
                                <!-- ADMIN NAV -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- LEFT BAR -->
            <div class="left-bar merge-left">
                <!-- SEARCH BAR -->
                <div class="search-bar">
                    
                </div>
                <!-- LEFT NAV -->
                <div class="left-nav">
                   
                </div>
            </div>
            <!-- SITE CONTAINER -->
            <div class="main-container">
                <div class="container">
                <!--Content Here -->
                </div>
                <div class="container">
                    <!--Content Here -->
                </div>
            </div>
        </div>
        <script src="js/bootstrap.min.js"></script>
        <!--jQuery touch scroll -->
        <script src="js/jquery.nicescroll.js"></script>
        <script src='js/jquery.cookie.js'></script>
        <script src='js/jquery.hoverIntent.minified.js'></script>
        <!--jQuery leftbar navigation accordion -->
        <script src='js/jquery.dcjqaccordion.2.7.js'></script>
        <!-- Theme common script -->
        <script src='js/common-script.js'></script>
        <!--[if lte IE 7]>
                        <script src="js/font-alpona-ie7.js"></script>
                        <![endif]-->
    </body>
</html>

Widgets

This template have used two type widgets one is boxy type widget and another one is non boxy type widgets

Boxy Widget

alpona
<div class="box-widget widget-module">
  <div class="widget-head clearfix"> <span class="h-icon"><i class="icon-arrow-right-8"></i></span>
    <h4 class="pull-left">Widget Heading</h4>
    <div class="pull-right widget-action">
      <ul>
        <li><a class="widget-collapse" href="#"><i class="icon-arrow-down"></i></a></li>
        <li><a class="widget-remove" href="#"><i class=" icon-remove-sign"></i></a></li>
      </ul>
    </div>
  </div>
  <div class="widget-container">
    <div class="widget-block">
      <div class="widget-content box-padding">
      <!--Content Here-->
      </div>
    </div>
  </div>
</div>

Non Boxy Widget

alpona
<div class="square-widget">
  <div class="widget-head clearfix">
    <h4 class="pull-left"><i class="icon-arrow-right-8"></i> Widget Head</h4>
    <span class="pull-right widget-action">
    <a class="widget-collapse" href="#"><i class="icon-arrow-down"></i></a>
    <a class="widget-remove" href="#"><i class=" icon-remove-sign"></i></a>
    </span>
  </div>
  <div class="widget-container">
    <!--Content Here-->
  </div>
</div>

CSS Structure

This template I have used well structured and obejct oriented CSS, that is easy to use and manageable. All common style of this tmeplate is in styles.css files. This template is uesd following css structure:

body {
    background: #ccc;
    font-size: 12px;
}
/*==============HOVER TRANSITIONS===============*/
/*a {
        transition:all 0.4s ease-out 0s;
}
a:hover, a:active {
        outline:0;
        transition: all 0.4s ease-in-out;
}*/
/*==============MAIN WRAPPER===============*/
.main-wrapper {
    margin: auto;
}
/*==============MAIN CONTAINER===============*/
.main-container {
    background:#fff;
    overflow:hidden;
    min-height: 800px;
}
/*=============TOP BAR================*/
.top-bar {
    min-height:40px;
    background:#6f7683;/*margin-left:-20px;margin-right: -20px;*/
}

.fixed-topbar {
    margin-top: 40px;
    
}
.fixed-topbar .top-bar{
    position: fixed;
    top:0px;
    width: 100%;
    z-index: 9999;
}
/*============LEFT BAR==============*/
.left-bar {
    width:220px;
    float: left;
}
.fixed-leftbar .left-bar {
    position: fixed;
    z-index:  9999;
    background: #ccc;
}
.fixed-leftbar .main-container{
    margin-left: 220px;
}


/*==============LOGO================*/
.branding {
    height: 40px;
}
/*=============ADMIN USER NAV================*/
.loged-nav {
    height:40px;
}

Included CSS

I have included following css files. You can easily customized any css:

<!-- styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-alpona.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<!--Bootstarp Datepicker -->
<link href="css/datepicker.css" rel="stylesheet">
<!--Bootstarp Date Range picker -->
<link href="css/daterangepicker.css" rel="stylesheet">
<!--fav and touch icons -->

Files and Folders Structure

alpona

Above image define this template files and folder structures. All css files is in css folder. Data folder contain all colorbox ajax related files and images. Files folder contain all uploaded file form elfinder file manager. ico contain favico. img contain all images/icons of this template. js contain all javascript file of this template.

I used jquery, jquery UI and twitter bootstarp for this template. And I included some nice plugins also. I used following Plugins

<!--jQuery-->
<script src="js/jquery.js"></script>
<!--jQuery UI -->
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<!--Bootstrap-->
<script src="js/bootstrap.min.js"></script>
<!--jQuery Code Hylighter -->
<script src="js/prettify.js"></script>
<!--jQuery touch scroll -->
<script src="js/jquery.nicescroll.js"></script>
<!--Sidebar Cookie-->
<script src='js/jquery.cookie.js'></script>
<!--Navigation Hover-->
<script src='js/jquery.hoverIntent.minified.js'></script>
<!--jQuery leftbar navigation accordion -->
<script src='js/jquery.dcjqaccordion.2.7.js'></script>
<!--jQuery bootstarp Datepicker -->
<script src='js/bootstrap-datepicker.js'></script>
<!--jQuery bootstarp Date Range picker -->
<script src='js/daterangepicker.js'></script>
<!-- Jquery Validation -->
<script src="js/jquery.validate.js"></script>
<!-- Stepy Wizard -->
<script src='js/jquery.stepy.js'></script>
<!--jQuery styled checkbox and radio -->
<script src="js/jquery.icheck.js"></script>
<!--jQuery atags input -->
<script src="js/jquery.tagsinput.js"></script>
<!--jQuery advanced select box -->
<script src="js/jquery-select.js"></script>
<!--jQuery inpiut mask -->
<script src="js/jquery.maskedinput.js"></script>
<!--Notifications-->
<script src='js/jquery.gritter.js'></script>
<!--Color Picker-->
<script src="js/jquery.minicolors.js"></script>
<!--Data Tables -->
<script src="js/jquery.dataTables.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
<script src="js/TableTools.js"></script>
<!-- Full Calendar -->
<script src='js/fullcalendar.min.js'></script>
<!-- Flot Chart -->
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.selection.js"></script>
<script src="js/excanvas.js"></script>
<script src="js/jquery.flot.pie.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.time.js"></script>
<script src="js/jquery.flot.tooltip.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<!-- Google JsApi -->
<script src="https://www.google.com/jsapi"></script>
<!--Table Themes-->
<script src="js/jquery.metadata.js"></script>
<!--jQuery Table Theme -->
<script src="js/jquery.tablecloth.js"></script>
<!--jQuery Responsive Table -->
<script src="js/responsive-tables.js"></script>
<!-- Text Editor -->
<script src="js/tiny_mce/jquery.tinymce.js"></script>
<script src='js/moment.js'></script>
<!-- Theme common script -->
<script src='js/common-script.js'></script>
<!--[if lte IE 7]>
<script src="js/font-alpona-ie7.js"></script>
<![endif]-->

Plugins

Plugins Source
jQuery Chosen http://harvesthq.github.com/chosen/
jQuery Uniform http://uniformjs.com/
Bootstrap http://twitter.github.com/bootstrap/
jQuery Noty http://needim.github.com/noty/
Tags Input http://xoxco.com/clickable/jquery-tags-input
Text Editor http://premiumsoftware.net/cleditor
Min Chart sparkline
colorBox http://www.jacklmoore.com/colorbox
iOS orientationchange https://github.com/scottjehl/iOS-Orientationchange-Fix
UI Touch Punch http://touchpunch.furf.com/
NIce Scroll http://areaaperta.com/nicescroll
css3 mediaquery.js http://code.google.com/p/css3-mediaqueries-js/
Multi Field Extender http://code.google.com/p/jquery-dynamic-form/
eLfinder http://elfinder.org/
Check All https://github.com/mjball/jQuery-CheckAll
Data Table http://datatables.net/
Full Calendar http://arshaw.com/fullcalendar/
Input Mask http://digitalbush.com/projects/masked-input-plugin/
Raty http://www.wbotelhos.com/raty/
Smart Wizard http://techlaboratory.net/products.php?product=smartwizard
Accordion http://jquery.bassistance.de/accordion/demo/
jQuery Validation http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Chart http://www.jqplot.com/
Multi File Upload http://www.plupload.com/
Few CSS inspiration http://www.webinterfacelab.com
Sliding Actions Menu http://tympanus.net/codrops/

Icons

Name Source
IcoMoon Ulitimate Pack Devloper Licensed purchased