<li><ahref="#sources_and_credits">Sources and Credits</a></li>
</ol>
<divid="documenter_copyright">Copyright Muhammad Usman 2012</div>
</div>
<divid="documenter_content">
<sectionid="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: <ahref="http://usman.it">http://usman.it</a></li><li>Email: <ahref="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 <ahref="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 <ahref="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><sectionid="intro">
<h3>Intro</h3><hrclass="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>
<sectionid="features">
<h3>Features</h3><hrclass="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>Gallery with fullscreen support, <atarget="_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>
<sectionid="folder_structure">
<h3>Folder Structure</h3><hrclass="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>
<sectionid="html_structure">
<h3>HTML Structure</h3><hrclass="notop">
<p>
This theme is based on Twitter Bootstrap, so it uses Bootstrap's grid system with 12 grids, <ahref="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 <ahref="http://usman.it/themes/charisma/grid.html">http://usman.it/themes/charisma/grid.html</a></p>
For form styling please refer to <adata-mce-=""href="http://twitter.github.com/bootstrap/base-css.html#forms">Twitter Bootstrap form styling page</a>.</p>
Adding basic class or classes can convert an element to a button, please refer to <adata-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 <adata-mce-=""href="http://twitter.github.com/bootstrap/base-css.html#tables">Twitter Bootstrap table stying page</a>.</p>
Without Twitter Bootstrap this template won't be possible, I am grateful to all the jQuery plugin authors, <ahref="http://opalang.org/">Opa Library</a> for icons and <ahref="http://bootswatch.com/">Bootswatch</a> for skins which are modified.</p>