Charisma

free, responsive, multiple skin admin template

• Last Update: 15 August 2012
• By: Muhammad Usman
• Webiste: http://usman.it
• Email: hi@usman.it

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 article page, but there is no warranty. Please share the template on your social network.

Apart from this doc there is a live preview with examples and also the code is commented for your convenience.

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.

Intro

Charisma is a fully featured, responsive admin template based on Bootstrap from Twitter, which comes with 9 different themes 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.

Features

• 9 different themes
• Fully responsive, optimized UI for tablets and mobile phones
• Based on Bootstrap, jQuery UI can be also used without hassle
• HTML5 valid and CSS3, though compatible with HTML4, works on IE8+
• Commented code
• Custom product tour, see example
• 1000+ icons, see icons (Glyphicons + Opa Library Icons)
• Grid system, see example
• Charts, including, pie, stack, flot, realtime etc.
• Data tables
• Widget boxes, collapsible, sortable, closable, see example
• Gallery with fullscreen support, see example
• Ajaxified menus
• Full calendar, monthly weekly, daily, with todo list.
• File manager, with create, view, delete, upload, compress and uncompress features
• Custom error page
• Auto active link detection and much more.

UI Elements

• Autocomplete
• Custom Tooltip
• Popover
• Star Rating
• Toggle Switch
• Tag Boxes
• Rich Text Editor
• Date Picker
• Multiple File Upload
• Slider
• Dialog Box
• Auto Growing Textarea
• Ajax Loaders
• Progress Bars
• Alerts
• Pop Notifications

Folder Structure

charisma

   - css

   - img

   - js

   - misc

   - php-version

The root folder contains the template files in HTML format, usable in any backend language.

css: contains al the CSS files

img: contains all the images.

js: contains the JavaScript files

misc: contains PHP connector for file manager and handler for Uploadify.

php-version: contains the template files in PHP format, using common header and footer.

HTML Structure

This theme is based on Twitter Bootstrap, so it uses Bootstrap's grid system with 12 grids, more info.

To view Charisma's grid system please check the grid.html file or http://usman.it/themes/charisma/grid.html

The HTML structure 

Styling

Forms:

For form styling please refer to Twitter Bootstrap form styling page.

Buttons:

Adding basic class or classes can convert an element to a button, please refer to Twitter Bootstrap button styling page.

Table:

For table styling please refer to Twitter Bootstrap table stying page.

Plugins Used

• Twitter Bootstarp plugins
• jQuery UI
• Chosen plugin for enhacing select inputs
• Flot plugin charts
• FullCalendar plugin for a full calendar
• Elfinder for file manager
• CLEditor plugin for rich text editor
• Uniform for stying checkbox, radio button and file inputs
• Colorbox plugin for gallery image viewer
• Noty for advanced notifications
• DataTable plugin for enhancing HTML tables
• Raty for star rating
• iPhone-style Checkboxes
• Auto-Growing Textarea

Sources and Credits

Without Twitter Bootstrap this template won't be possible, I am grateful to all the jQuery plugin authors, Opa Library for icons and Bootswatch for skins which are modified.