213 lines
9.6 KiB
HTML
213 lines
9.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
|
||
|
|
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
|
||
|
|
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
|
||
|
|
<!--[if (gt IE 7)|!(IE)]><!-->
|
||
|
|
<html lang="en-us"><!--<![endif]-->
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
|
||
|
|
<title>Charisma - a fully featured admin template</title>
|
||
|
|
|
||
|
|
<meta name="author" content="Muhammad Usman">
|
||
|
|
<meta name="copyright" content="Muhammad Usman">
|
||
|
|
<meta name="date" content="2012-07-22T00:00:00+02:00">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="css/documenter_style.css" media="all">
|
||
|
|
|
||
|
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
|
||
|
|
|
||
|
|
<script src="js/jquery.1.6.4.js"></script>
|
||
|
|
|
||
|
|
<script src="js/jquery.scrollTo-1.4.2-min.js"></script>
|
||
|
|
<script src="js/jquery.easing.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<script>document.createElement('section');var duration=500,easing='swing';</script>
|
||
|
|
<script src="js/script.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
html{background-color:#FFFFFF;color:#383838;}
|
||
|
|
::-moz-selection{background:#444444;color:#DDDDDD;}
|
||
|
|
::selection{background:#444444;color:#DDDDDD;}
|
||
|
|
#documenter_sidebar #documenter_logo{background-image:url(assets/images/image_1.png);}
|
||
|
|
a{color:#0000FF;}
|
||
|
|
hr{border-top:1px solid #EBEBEB;border-bottom:1px solid #FFFFFF;}
|
||
|
|
#documenter_sidebar, #documenter_sidebar ol a{background-color:#FFE3E3;color:#222222;}
|
||
|
|
#documenter_sidebar ol a{-webkit-text-shadow:1px 1px 0px #EEEEEE;-moz-text-shadow:1px 1px 0px #EEEEEE;text-shadow:1px 1px 0px #EEEEEE;}
|
||
|
|
#documenter_sidebar ol{border-top:1px solid #AAAAAA;}
|
||
|
|
#documenter_sidebar ol a{border-top:1px solid #EEEEEE;border-bottom:1px solid #AAAAAA;color:#444444;}
|
||
|
|
#documenter_sidebar ol a:hover{background:#444444;color:#DDDDDD;border-top:1px solid #444444;}
|
||
|
|
#documenter_sidebar ol a.current{background:#444444;color:#DDDDDD;border-top:1px solid #444444;}
|
||
|
|
#documenter_copyright{display:block !important;visibility:visible !important;}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="documenter_sidebar">
|
||
|
|
<a href="#documenter_cover" id="documenter_logo"></a>
|
||
|
|
<ol id="documenter_nav">
|
||
|
|
<li><a class="current" href="#documenter_cover">Start</a></li>
|
||
|
|
<li><a href="#intro">Intro</a></li>
|
||
|
|
<li><a href="#features">Features</a></li>
|
||
|
|
<li><a href="#folder_structure">Folder Structure</a></li>
|
||
|
|
<li><a href="#html_structure">HTML Structure</a></li>
|
||
|
|
<li><a href="#styling">Styling</a></li>
|
||
|
|
<li><a href="#plugins_used">Plugins Used</a></li>
|
||
|
|
<li><a href="#sources_and_credits">Sources and Credits</a></li>
|
||
|
|
|
||
|
|
</ol>
|
||
|
|
<div id="documenter_copyright">Copyright Muhammad Usman 2012</div>
|
||
|
|
</div>
|
||
|
|
<div id="documenter_content">
|
||
|
|
<section id="documenter_cover"><h1>Charisma</h1><h2>free, responsive, multiple skin admin template</h2><hr><ul><li>Last Update: 15 August 2012</li><li>By: Muhammad Usman</li><li>Webiste: <a href="http://usman.it">http://usman.it</a></li><li>Email: <a href="mailto:hi@usman.it">hi@usman.it</a></li></ul><p>Thank you for using the template. If you have any questions that are beyond the scope of this file, please feel free to ask on the comment section of the <a href="http://usman.it/free-responsive-admin-template">article page</a>, but there is no warranty.
|
||
|
|
|
||
|
|
Please share the template on your social network.
|
||
|
|
<br/><br/>
|
||
|
|
Apart from this doc there is a <a href="http://usman.it/themes/charisma/" target="_blank">live preview</a> with examples and also the code is commented for your convenience.
|
||
|
|
<br/>
|
||
|
|
<p><b>Please note: when you access it from a server like localhost, by default php-version is served even though you browse using .html extension, remove .htaccess file if you need HTML files to be served.</b></p>
|
||
|
|
<br/><br/>
|
||
|
|
Thanks.</p></section><section id="intro">
|
||
|
|
<h3>Intro</h3><hr class="notop">
|
||
|
|
<p>Charisma is a fully featured, responsive admin template based on Bootstrap from Twitter, which comes with <strong>9 different themes</strong> to suite your style and application type. It is featured with many plugins and UI elements to ease your work. It works on all major browsers and optimizes itself for tablets and mobile phones.</p>
|
||
|
|
</section>
|
||
|
|
<section id="features">
|
||
|
|
<h3>Features</h3><hr class="notop">
|
||
|
|
<ul>
|
||
|
|
<li>9 different themes</li>
|
||
|
|
<li>Fully responsive, optimized UI for tablets and mobile phones</li>
|
||
|
|
<li>Based on Bootstrap, jQuery UI can be also used without hassle</li>
|
||
|
|
<li>HTML5 valid and CSS3, though compatible with HTML4, works on IE8+</li>
|
||
|
|
<li>Commented code</li>
|
||
|
|
<li>Custom product tour, <a target="_blank" href="http://usman.it/themes/charisma/tour.html">see example</a></li>
|
||
|
|
<li>1000+ icons, <a target="_blank" href="http://usman.it/themes/charisma/icon.html">see icons</a> (Glyphicons + Opa Library Icons)</li>
|
||
|
|
<li>Grid system, <a target="_blank" href="http://usman.it/themes/charisma/grid.html">see example</a></li>
|
||
|
|
<li>Charts, including, pie, stack, flot, realtime etc.</li>
|
||
|
|
<li>Data tables</li>
|
||
|
|
<li>Widget boxes, collapsible, sortable, closable, <a target="_blank" href="http://usman.it/themes/charisma/grid.html">see example</a></li>
|
||
|
|
<li>Gallery with fullscreen support, <a target="_blank" href="http://usman.it/themes/charisma/gallery.html">see example</a></li>
|
||
|
|
<li>Ajaxified menus</li>
|
||
|
|
<li>Full calendar, monthly weekly, daily, with todo list.</li>
|
||
|
|
<li>File manager, with create, view, delete, upload, compress and uncompress features</li>
|
||
|
|
<li>Custom error page</li>
|
||
|
|
<li>Auto active link detection and much more.</li>
|
||
|
|
</ul>
|
||
|
|
<h3>UI Elements</h3>
|
||
|
|
<ul>
|
||
|
|
<li>Autocomplete</li>
|
||
|
|
<li>Custom Tooltip</li>
|
||
|
|
<li>Popover</li>
|
||
|
|
<li>Star Rating</li>
|
||
|
|
<li>Toggle Switch</li>
|
||
|
|
<li>Tag Boxes</li>
|
||
|
|
<li>Rich Text Editor</li>
|
||
|
|
<li>Date Picker</li>
|
||
|
|
<li>Multiple File Upload</li>
|
||
|
|
<li>Slider</li>
|
||
|
|
<li>Dialog Box</li>
|
||
|
|
<li>Auto Growing Textarea</li>
|
||
|
|
<li>Ajax Loaders</li>
|
||
|
|
<li>Progress Bars</li>
|
||
|
|
<li>Alerts</li>
|
||
|
|
<li>Pop Notifications</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
<section id="folder_structure">
|
||
|
|
<h3>Folder Structure</h3><hr class="notop">
|
||
|
|
<p>
|
||
|
|
charisma</p>
|
||
|
|
<p> - css</p>
|
||
|
|
<p> - img</p>
|
||
|
|
<p> - js</p>
|
||
|
|
<p> - misc</p>
|
||
|
|
<p> - php-version</p>
|
||
|
|
<p> </p>
|
||
|
|
<p>The root folder contains the template files in HTML format, usable in any backend language.</p>
|
||
|
|
<p>css: contains al the CSS files</p>
|
||
|
|
<p>img: contains all the images.</p>
|
||
|
|
<p>js: contains the JavaScript files</p>
|
||
|
|
<p>misc: contains PHP connector for file manager and handler for Uploadify.</p>
|
||
|
|
<p>php-version: contains the template files in PHP format, using common header and footer.</p>
|
||
|
|
<p> </p>
|
||
|
|
<p>
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
<section id="html_structure">
|
||
|
|
<h3>HTML Structure</h3><hr class="notop">
|
||
|
|
<p>
|
||
|
|
This theme is based on Twitter Bootstrap, so it uses Bootstrap's grid system with 12 grids, <a href="http://twitter.github.com/bootstrap/scaffolding.html#gridSystem">more info</a>.</p>
|
||
|
|
<p>
|
||
|
|
To view Charisma's grid system please check the grid.html file or <a href="http://usman.it/themes/charisma/grid.html">http://usman.it/themes/charisma/grid.html</a></p>
|
||
|
|
<p>
|
||
|
|
The HTML structure </p>
|
||
|
|
<br/>
|
||
|
|
<img src="assets/images/html_structure.png" alt="HTML Structure" />
|
||
|
|
</section>
|
||
|
|
<section id="styling">
|
||
|
|
<h3>Styling</h3><hr class="notop">
|
||
|
|
<p>
|
||
|
|
</p>
|
||
|
|
<h3>
|
||
|
|
Forms:</h3>
|
||
|
|
<p>
|
||
|
|
For form styling please refer to <a data-mce-="" href="http://twitter.github.com/bootstrap/base-css.html#forms">Twitter Bootstrap form styling page</a>.</p>
|
||
|
|
<p style="color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-size: medium; ">
|
||
|
|
</p>
|
||
|
|
<h3>
|
||
|
|
Buttons:</h3>
|
||
|
|
<p>
|
||
|
|
Adding basic class or classes can convert an element to a button, please refer to <a data-mce-="" href="http://twitter.github.com/bootstrap/base-css.html#buttons">Twitter Bootstrap button styling page</a>.</p>
|
||
|
|
<p>
|
||
|
|
</p>
|
||
|
|
<h3>
|
||
|
|
Table:</h3>
|
||
|
|
<p>
|
||
|
|
For table styling please refer to <a data-mce-="" href="http://twitter.github.com/bootstrap/base-css.html#tables">Twitter Bootstrap table stying page</a>.</p>
|
||
|
|
<div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section id="plugins_used">
|
||
|
|
<h3>Plugins Used</h3><hr class="notop">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<a href="http://twitter.github.com/bootstrap/javascript.html">Twitter Bootstarp plugins</a></li>
|
||
|
|
<li>
|
||
|
|
<a href="http://jqueryui.com/">jQuery UI</a></li>
|
||
|
|
<li>
|
||
|
|
<a href="http://harvesthq.github.com/chosen/">Chosen plugin</a> for enhacing select inputs</li>
|
||
|
|
<li>
|
||
|
|
<a href="http://code.google.com/p/flot/">Flot plugin</a> charts</li>
|
||
|
|
<li>
|
||
|
|
<a href="http://arshaw.com/fullcalendar/">FullCalendar plugin</a> for a full calendar</li>
|
||
|
|
<li>
|
||
|
|
<a href="http://elfinder.org/">Elfinder</a> for file manager</li>
|
||
|
|
<li>
|
||
|
|
<a href="http://premiumsoftware.net/cleditor/">CLEditor plugin</a> for rich text editor</li>
|
||
|
|
<li>
|
||
|
|
<a href="http://uniformjs.com/">Uniform</a> for stying checkbox, radio button and file inputs</li>
|
||
|
|
<li>
|
||
|
|
<a href="http://www.jacklmoore.com/colorbox">Colorbox plugin</a> for gallery image viewer</li>
|
||
|
|
<li>
|
||
|
|
<a href="http://needim.github.com/noty/">Noty</a> for advanced notifications</li>
|
||
|
|
<li>
|
||
|
|
<a href="http://www.datatables.net/">DataTable plugin</a> for enhancing HTML tables</li>
|
||
|
|
<li>
|
||
|
|
<a href="http://www.wbotelhos.com/raty/">Raty</a> for star rating</li>
|
||
|
|
<li>
|
||
|
|
<a href="http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html">iPhone-style Checkboxes</a></li>
|
||
|
|
<li>
|
||
|
|
<a href="http://onehackoranother.com/projects/jquery/jquery-grab-bag/autogrow-textarea.html">Auto-Growing Textarea</a></li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
<section id="sources_and_credits">
|
||
|
|
<h3>Sources and Credits</h3><hr class="notop">
|
||
|
|
<p>
|
||
|
|
Without Twitter Bootstrap this template won't be possible, I am grateful to all the jQuery plugin authors, <a href="http://opalang.org/">Opa Library</a> for icons and <a href="http://bootswatch.com/">Bootswatch</a> for skins which are modified.</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|