Heya ! Download KARMANTA Full version in just 8$ : DEMO | BUY NOW!

Documentation v1.0

Karmanta Logo Big

Welcome To Karmanta Theme Documentation

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to create a support thread on our support forum. Thanks so much!

Support Contact Us Live Demo Purchase Now
Karmanta - Bootstrap 3 Responsive Admin Template

Karmanta is the excellent responsive and multipurpose Admin Theme powered with Twitter Bootstrap 3.0 Framework. Karmanta can be used for any type of web applications dashboard: custom admin panels, admin dashboards, CMS, CRM, SAAS and websites: CMSs, SAAS, CRM, HRMS, Support & Social portal, e-commerce, personal business, corporate. Karmanta has a minimal, sleek, clean and intuitive design which makes your next project look awesome and yet user friendly.

Karmanta is minimal, sleek, clean and lightweight which makes your next project look awesome and yet user friendly. Karmanta has a huge collection of UI Elements, jQuery plugins and works seamlessly on all major web browsers, tablets and phones. User friendly, intuitive, and fun to use, Have look Karmanta today!

Features
  • Bootstrap 3 Framework
  • Responsive Design
  • Html5 Markup & CSS3
  • Fully customizable
  • Flat UI with clean style
  • Dashboard with profile widget, stats, charts and many more...
  • 10+ Custom widgets
  • Custom UI Tabs and Accordions
  • Charts and Graphs (Morris, ChartJs and Sparkline)
  • Circle Dials (jQuery Knob)
  • Advance Form Validation (jQuery Form Validation Plug-in)
  • Data Tables (jQuery Data Tables)
  • Full Calendar (jQuery Full Calendar)
  • Custom Radio Buttons and Checkboxes
  • Nice Scrollbar For Vertical Scrollable Contents
  • Sticky Notifications (jQuery Gritter)
  • Colorpicker for Bootstrap
  • Datepicker for Bootstrap
  • Date Range Picker
  • Elegant Line icon
  • Font Awesome icons
  • Lato and Open Sans Google fonts
  • Form Wizards
  • WYSIWYG Editors
  • User Profile page
  • Mail page
  • Login pages
  • Timeline page
  • Invoice page
  • Chat Page
  • 404 Error pages
  • Well structured code
  • Detailed Documentation
Using Theme

After unzip Theme Files, you will found Admin Theme & Documentation Folder.

You can view this Theme in any web browser from your desktop computer. Open admin-template/index.html in your web browser. Because the files are written in HTML, you do not need an Internet connection in order to display or edit the Theme.

Folder Structure

  • Karmanta/
  • ../css
  • ../js
  • ../fonts
  • ../img
  • ../assets

Start your FTP client (I persoanlly use Filezila which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.

Locate the domain folder you wish to upload your Theme files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .php, .js into your FTP client.

As Karmata designed for backend panel of your web platform, You need to implement yourself backend code in JAVA, PHP, .NET ,Ruby or any other as per your standers to view dynamic data and layout.

Once the files are done uploading, rename the file you want to be your home page as 'index.html'.

HTML Stracture

After unzip the Theme files you can see Karmanta/blank.html folder. That file contain the following common structure.

By using blank.html you are free to modify depending on the customization you require.
If you would like to add/edit UI elements, Widget, Data Tables or charts.

pop-uptext
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="description" content="Karmanta - Bootstrap 3 Responsive Admin Template">
  7.     <meta name="author" content="GeeksLabs">
  8.     <meta name="keyword" content="Karmanta, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal">
  9.     <link rel="shortcut icon" href="img/favicon.png">
  11.     <title>Blank | Karmanta - Bootstrap 3 Responsive Admin Template</title>
  13.     <!-- Bootstrap CSS -->    
  14.     <link href="css/bootstrap.min.css" rel="stylesheet">
  15.     <!-- bootstrap theme -->
  16.     <link href="css/bootstrap-theme.css" rel="stylesheet">
  17.     <!--external css-->
  18.     <!-- font icon -->
  19.     <link href="css/elegant-icons-style.css" rel="stylesheet" />
  20.     <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
  21.     <!-- Custom styles -->
  22.     <link href="css/style.css" rel="stylesheet">
  23.     <link href="css/style-responsive.css" rel="stylesheet" />
  25.     <!-- HTML5 shim and Respond.js IE8 support of HTML5 -->
  26.     <!--[if lt IE 9]>
  27.       <script src="js/html5shiv.js"></script>
  28.       <script src="js/respond.min.js"></script>
  29.       <script src="js/lte-ie7.js"></script>
  30.     <![endif]-->
  31.   </head>
  33.   <body>
  34.   <!-- container section start -->
  35.   <section id="container" class="">
  36.       <!--header start-->
  37.       <header class="header white-bg">
  38.       </header>      
  39.       <!--header end-->
  41.       <!--sidebar start-->
  42.       <aside>
  43.       </aside>
  44.       <!--sidebar end-->
  46.       <!--main content start-->
  47.       <section id="main-content">
  48.           <section class="wrapper">
  49.               <!-- page start-->
  50.               Page content goes here
  51.               <!-- page end-->
  52.           </section>
  53.       </section>
  54.       <!--main content end-->
  55.     </section>
  56.     <!-- container section end -->
  57.     <!-- javascripts -->
  58.     <script src="js/jquery.js"></script>
  59.     <script src="js/bootstrap.min.js"></script>
  60.     <!-- nice scroll -->
  61.     <script src="js/jquery.scrollTo.min.js"></script>
  62.     <script src="js/jquery.nicescroll.js" type="text/javascript"></script><!--custome script for all page-->
  63.     <script src="js/scripts.js"></script>
  64.   </body>
  65. </html>
CSS Files and Structure

After unzip the Theme files you can see Karmanta/css folder. That css folder contains color,lib,pre-load.css & style.css

I am using one main CSS file name is style.css in this theme which you are free to modify depending on the customization you require.
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

pop-uptext
  1. /*
  2. Template Name: Karmanta Bootstrap 3 Responsive Admin Template
  3. Template Version: 1.0
  4. Author: GeeksLabs
  5. Website: http://geekslabs.com/
  6. */
  8. /* Import fonts */
  9. @import url(http://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
  10. @import url(line-icons.css);
  12. body {
  13.     color: #797979;
  14.     background: #eeeeee;
  15.     font-family: 'Lato', sans-serif;
  16.     padding: 0px !important;
  17.     margin: 0px !important;
  18.     font-size:14px !important;    
  19. }
  20. h1,h2,h3,h4,h5{
  21.     font-weight: 300;
  22. }
  23. label{
  24.     font-weight: 300;   
  25. }
  26. ul li {
  27.     list-style: none;
  28. }
JavaScript Structure

After unzip the Theme files you can see Karmanta/js folder. That js folder contains jQuery, bootstrap & different jQuery plugin js file & scripts.js (custom js for this theme).

This theme custom js file name is scripts.js. If you have enough jQuery knowledge, you are free to modify depending on the customization you require.

pop-uptext
  1. function initializeJS() {
  3.     //tool tips
  4.     jQuery('.tooltips').tooltip();
  6.     //popovers
  7.     jQuery('.popovers').popover();
  9.     //custom scrollbar
  10.         //for html
  11.     jQuery("html").niceScroll({styler:"fb",cursorcolor:"#007AFF", cursorwidth: '6', cursorborderradius: '10px', background: '#F7F7F7', cursorborder: '', zindex: '1000'});
  12.         //for sidebar
  13.     jQuery("#sidebar").niceScroll({styler:"fb",cursorcolor:"#007AFF", cursorwidth: '3', cursorborderradius: '10px', background: '#F7F7F7', cursorborder: ''});
  14.         // for scroll panel
  15.     jQuery(".scroll-panel").niceScroll({styler:"fb",cursorcolor:"#007AFF", cursorwidth: '3', cursorborderradius: '10px', background: '#F7F7F7', cursorborder: ''});
  16.     
  17.     //sidebar dropdown menu
  18.     jQuery('#sidebar .sub-menu > a').click(function () {
  19.         var last = jQuery('.sub-menu.open', jQuery('#sidebar'));        
  20.         jQuery('.menu-arrow').removeClass('arrow_carrot-right');
  21.         jQuery('.sub', last).slideUp(200);
  22.         var sub = jQuery(this).next();
  23.         if (sub.is(":visible")) {
  24.             jQuery('.menu-arrow').addClass('arrow_carrot-right');            
  25.             sub.slideUp(200);
  26.         } else {
  27.             jQuery('.menu-arrow').addClass('arrow_carrot-down');            
  28.             sub.slideDown(200);
  29.         }
  30.         var o = (jQuery(this).offset());
  31.         diff = 200 - o.top;
  32.         if(diff>0)
  33.             jQuery("#sidebar").scrollTo("-="+Math.abs(diff),500);
  34.         else
  35.             jQuery("#sidebar").scrollTo("+="+Math.abs(diff),500);
  36.     });
  38.     // sidebar menu toggle
  39.     jQuery(function() {
  40.         function responsiveView() {
  41.             var wSize = jQuery(window).width();
  42.             if (wSize <= 768) {
  43.                 jQuery('#container').addClass('sidebar-close');
  44.                 jQuery('#sidebar > ul').hide();
  45.             }
  47.             if (wSize > 768) {
  48.                 jQuery('#container').removeClass('sidebar-close');
  49.                 jQuery('#sidebar > ul').show();
  50.             }
  51.         }
  52.         jQuery(window).on('load', responsiveView);
  53.         jQuery(window).on('resize', responsiveView);
  54.     });
  56.     jQuery('.toggle-nav').click(function () {
  57.         if (jQuery('#sidebar > ul').is(":visible") === true) {
  58.             jQuery('#main-content').css({
  59.                 'margin-left': '0px'
  60.             });
  61.             jQuery('#sidebar').css({
  62.                 'margin-left': '-180px'
  63.             });
  64.             jQuery('#sidebar > ul').hide();
  65.             jQuery("#container").addClass("sidebar-closed");
  66.         } else {
  67.             jQuery('#main-content').css({
  68.                 'margin-left': '180px'
  69.             });
  70.             jQuery('#sidebar > ul').show();
  71.             jQuery('#sidebar').css({
  72.                 'margin-left': '0'
  73.             });
  74.             jQuery("#container").removeClass("sidebar-closed");
  75.         }
  76.     });
  78.     //bar chart
  79.     if (jQuery(".custom-custom-bar-chart")) {
  80.         jQuery(".bar").each(function () {
  81.             var i = jQuery(this).find(".value").html();
  82.             jQuery(this).find(".value").html("");
  83.             jQuery(this).find(".value").animate({
  84.                 height: i
  85.             }, 2000)
  86.         })
  87.     }
  89. }
  91. jQuery(document).ready(function(){
  92.     initializeJS();
  93. });
Credits

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the support forums and asking your question in the Item Discussion section.