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>
This is basic startup of this tmeplate
<!DOCTYPE HTML> <html lang="en"> <!--BODY--> </html>
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>
This template have used two type widgets one is boxy type widget and another one is non boxy type widgets
<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>
<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>
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; }
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 -->
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]-->
Name | Source |
IcoMoon Ulitimate Pack | Devloper Licensed purchased |