SRABON Responsive, Touch Friendly Admin Template
ots @ tp2p
About Srabon
Srabon is very powerfull responsive admin template. Here have used all latest technology. It is bootstarp compatible so it is very easy to use. It is 3 column fluid and fixed both layout. Here is used CSS3, HTML5, Media query, IOS orientation fix, toch frienly and very much adaptive with any size viewport especially iPhone, iPad, androind phone, tablet.
Being powered by jQuery and Bootstarp with lots of plugins implemented in 23 separated HTML files and having Icons Sprites with different styles, widgets, Charts, Notifications, tooltips this has become a complete admin panel for any kind of web presence.
I always appreciate your good suggestions. If you have any suggestion or if you got any bug, errors then please send me private message by my profile email form.
Feature List
- 100% Rsponsive Template
- Bootstrap Compatible
- 23 Html files
- Nice and clean Dashboard
- 1000+ Sprite Icons
- 2 Diffrent login pagse style
- 2 Different eror pages style
- Lots of cool Widgets
- CSS3 /html5
- IOS orientation fix
- Content post pages and preview pages
- Cool Typography
- jQuery powered
- jQuery UI
- Cool JQuery Chosen Selectbox
- JQuery Uniform
- Nice Dropdown
- Sticky Notification
- jQuery noty
- Sexy UI slider
- Tags Input
- Text Editor
- jQuery tooltip
- jQuery Minichart
- Modal and Dialoge
- Sexy Confirm box
- jQuery Colorbox
- Multifield Extender
- Elfinder File manager
- jQuery Accordion
- Check All and sliding action Menu
- Data Table
- Auto Complete
- Full Calendar
- jQuery Raty
- Smart Wizard
- jQuery Validation
- Collapsible Widget
- JQplo chart
- Syntax Highlighter
- AND many more +++
Html Structure
This is a 3 columns layout responsive admin template. This template have a common html structure.
Initialize
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Admin Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Admin Panel Template">
<meta name="author" content="Westilian: Kamrujaman Shohel">
<!-- styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/themes.css" rel="stylesheet">
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie/ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie/ie8.css" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie/ie9.css" />
<![endif]-->
<!--fav and touch icons -->
<link rel="shortcut icon" href="ico/favicon.ico">
</head>
<body>
<!--BODY HERE-->
<!-- javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- html5.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</body>
</html>
Requires HTML5 doctype
This is basic startup of this tmeplate
<!DOCTYPE HTML> <html lang="en"> <!--BODY--> </html>
Requires Meta Tag
Following meta tag must require to ensure devices display responsive pages properly
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Common Html Structure
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Admin Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-fixed-top">
<!--Top fixed nav here-->
</div>
<div id="sidebar">
<!-- sidebar here-->
<div id="side-accordion">
<!--side accordion here-->
</div>
<ul class="side-nav">
<!--side nvigation here-->
</ul>
</div>
<div id="main-content">
<div class="container-fluid">
<!--Page content here-->
</div>
</div>
</body>
</html>
Boxy Widget
Example
Here is boxy widget block preview. You can use it anywhere in the template
Widget Markup Boxy Widget
This template have a common widget block. Widget block html structure is bellow:
<div class="widget-block">
<div class="widget-head">
<h5><i class="black-icons money"></i> Recent Orders</h5>
<div class="widget-control pull-right">
<!--Widget right dropdown here-->
</div>
</div>
<div class="widget-content">
<div class="widget-selectbox">
<!--search or filter bar here-->
</div>
<div class="widget-box">
<!--Widget content here-->
</div>
<div class="widget-bottom">
<!--Widget bottom here-->
<div class="pagination">
<!--Pagination for widget if require-->
</div>
</div>
</div>
</div>
Widget Bottom Boxy Widget
If you don't want to use Widget Bottom then you can delete following markup form widget.
<div class="widget-bottom">
<!--Widget bottom here-->
<div class="pagination">
<!--Pagination for widget if require-->
</div>
</div>
Widget Head
Widget Head contain header of widget and action drop down of the widget
<div class="widget-head">
<h5><i class="black-icons money"></i> Recent Orders</h5>
<div class="widget-control pull-right">
<!--Widget right dropdown here-->
</div>
</div>
Non Boxy Widget
Widget Markup Non Boxy Widget
Boxy widget and non boxy html structure is same> Just use nonboxy-widget class instead of widget-block class. Non Boxy widget html structure is bellow:
<div class="nonboxy-widget">
<div class="widget-head">
<h5><i class="black-icons money"></i> Recent Orders</h5>
</div>
<div class="widget-content">
<div class="widget-selectbox">
<!--search or filter bar here-->
</div>
<div class="widget-box">
<!--Widget content here-->
</div>
<div class="widget-bottom">
<!--Widget bottom here-->
<div class="pagination">
<!--Pagination for widget if require-->
</div>
</div>
</div>
</div>
Widget Bottom Boxy Widget
If you don't want to use Widget Bottom then you can delete following markup form widget.
<div class="widget-bottom">
<!--Widget bottom here-->
<div class="pagination">
<!--Pagination for widget if require-->
</div>
</div>
Widget Head
Widget Head contain header of widget.
<div class="widget-head"> <h5><i class="black-icons money"></i> Recent Orders</h5> </div>
CSS Structure
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:
.side-nav li a .sidenav-icon {
background:url(../img/sidenav-sprite.png) no-repeat;
}
.side-nav li ul li a .sidenav-icon {
background:url(../img/sidenav-sprite.png) -80px 0 !important;
}
.side-nav li a .dashboard-n-icon {
background-position: -30px 0 !important;
}
---------------- More
.collapsible-widget .widget-head { cursor:pointer;}
.widget-block .widget-head .h-icon{ width:16px; height:16px; display:block; position:absolute; top:12px; right:10px; background:url(../img/collapse.gif) no-repeat;}
.widget-block .active .h-icon{ background-position:left !important}
.widget-block .inactive .h-icon{ background-position:right !important}
.widget-block .widget-head h5 {
padding-left: 10px;
padding-top:11px;
text-transform:uppercase;
font-size:12px;
}
.widget-block .widget-bottom {
height:40px;
background: #f1f1f1; /* Old browsers */
background: -moz-linear-gradient(top, #f1f1f1 0%, #dbdbdb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1f1f1), color-stop(100%, #dbdbdb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f1f1f1 0%, #dbdbdb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f1f1f1 0%, #dbdbdb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f1f1f1 0%, #dbdbdb 100%); /* IE10+ */
background: linear-gradient(to bottom, #f1f1f1 0%, #dbdbdb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#dbdbdb', GradientType=0 ); /* IE6-9 */
border-top: 1px solid #c2c2c2;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-box-shadow: inset 0 1px 0 #f9f9f9, 0 0 3px #ddd;
-moz-box-shadow: inset 0 1px 0 #f9f9f9, 0 0 3px #ddd;
box-shadow: inset 0 1px 0 #f9f9f9, 0 0 3px #ddd;
}
Included CSS
I have included following css files. You can easily customized any css:
<!-- styles --> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap-responsive.css" rel="stylesheet"> <link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet"> <link href="css/jquery.jqplot.css" rel="stylesheet"> <link href="css/prettify.css" rel="stylesheet"> <link href="css/elfinder.min.css" rel="stylesheet"> <link href="css/elfinder.theme.css" rel="stylesheet"> <link href="css/fullcalendar.css" rel="stylesheet"> <link href="js/plupupload/jquery.plupload.queue/css/jquery.plupload.queue.css" rel="stylesheet"> <link href="css/styles.css" rel="stylesheet"> <link id="themes" href="css/themes.css" rel="stylesheet">
CSS IE different version hack
Sometimes Internet explorer's different version may occur different type of css problem. Here I included 3 different css files in conditional commnets for fix IE7 to IE9 css issue. Always use following css files in head section:
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="css/ie/ie7.css" /> <![endif]--> <!--[if IE 8]> <link rel="stylesheet" type="text/css" href="css/ie/ie8.css" /> <![endif]--> <!--[if IE 9]> <link rel="stylesheet" type="text/css" href="css/ie/ie9.css" /> <![endif]-->
If you need to fix any IE7/IE8/IE9 related css issues then just place code in relevant css file. For an example in IE8 is getting extra 20px margin in any elemnts(it may be .sidebar or anywhere) then just open ie8.css and write css like .side-nav{margin:0px;}. Another example if you use filter in css by following way:
.widget-block .widget-bottom {
/*----MORE CODE---*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#dbdbdb', GradientType=0 ); /* IE6-9 */
}
Then you need to change filter:none for IE9. Now open ie9.css and write following code:
.widget-block .widget-bottom {
filter:none;
}
Less than IE9 CSS3 Media Query support.
Normally IE5 to IE8 do not support CSS3 Media Query. But at least IE8 should support for CSS3 Media Query and that is very important for cross-browser responsive web design. This template I have included css3 media query support for less than IE9. Include following file for Less than IE9 CSS3 Media Query support.
<!-- css3-mediaqueries.js for IE less than 9 --> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
You check a blog post for more about Less than IE9 CSS3 Media Query support from here http://goo.gl/jeqy7
Files and Folders Structure
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. php contain elfinder related php files. swf contain datatable plugin's table exporter files.
Components and Plugins
Plugins
I used jquery, jquery UI and twitter bootstarp for this template. And I included some nice plugins also. I used following templates for Srabon:
/*--- Syntax Highlighter ---*/
<script src="js/prettify.js"></script>
/*--- Mini Chart ---*/
<script src="js/jquery.sparkline.min.js"></script>
/*--- Touch Scroll used for sidebar ---*/
<script src="js/jquery.nicescroll.min.js"></script>
/*--- Accordion ---*/
<script src="js/accordion.jquery.js"></script>
/*--- Stepy Wizard ---*/
<script src="js/smart-wizard.jquery.js"></script>
/*--- Form Validation ---*/
<script src="js/vaidation.jquery.js"></script>
/*--- Extendable Form ---*/
<script src="js/jquery-dynamic-form.js"></script>
/*--- Calendar ---*/
<script src="js/fullcalendar.js"></script>
/*--- Start Raty ---*/
<script src="js/raty.jquery.js"></script>
/*--- Notification ---*/
<script src="js/jquery.noty.js"></script>
/*--- Text Editor ---*/
<script src="js/jquery.cleditor.min.js"></script>
/*--- Data Table ---*/
<script src="js/data-table.jquery.js"></script>
<script src="js/TableTools.min.js"></script>
<script src="js/ColVis.min.js"></script>
/*--- File Manager ---*/
<script src="js/elfinder/elfinder.min.js"></script>
/*--- Selectbox ---*/
<script src="js/chosen.jquery.js"></script>
/*--- Sexy Checkbox, Radio, file input ---*/
<script src="js/uniform.jquery.js"></script>
/*--- Tags Input ---*/
<script src="js/jquery.tagsinput.js"></script>
/*--- Color Box ---*/
<script src="js/jquery.colorbox-min.js"></script>
/*--- Check All ---*/
<script src="js/check-all.jquery.js"></script>
/*--- Input Mask ---*/
<script src="js/inputmask.jquery.js"></script>
/*--- Multiple file upload ---*/
<script src="js/plupload.full.js"></script>
<script src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
<script src="js/plupupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
/*--- jQplot Chart ---*/
<script src="js/excanvas.min.js"></script>
<script src="js/jquery.jqplot.min.js"></script>
<script src="js/chart/jqplot.highlighter.min.js"></script>
<script src="js/chart/jqplot.cursor.min.js"></script>
<script src="js/chart/jqplot.barRenderer.min.js"></script>
<script src="js/chart/jqplot.pointLabels.min.js"></script>
<script src="js/chart/jqplot.dateAxisRenderer.min.js"></script>
<script src="js/chart/jqplot.pieRenderer.min.js"></script>
<script src="js/chart/jqplot.donutRenderer.min.js"></script>
<script src="js/chart/jqplot.categoryAxisRenderer.min.js"></script>
<script src="js/chart/jqplot.logAxisRenderer.min.js"></script>
<script src="js/chart/jqplot.canvasTextRenderer.min.js"></script>
<script src="js/chart/jqplot.canvasAxisTickRenderer.min.js"></script>
/*--- All Custom functions related on plugins ---*/
<script src="js/custom-script.js"></script>
<!-- html5.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
/*--- CSS3 Media Query support for IE less than 9 ---*/
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
/*--- Jquery IOS orientation change zoom fix ---*/
<script src="js/ios-orientationchange-fix.js"></script>
Forms
Markup
Overall template I followed same markup structure for forms
<div class="nonboxy-widget">
<div class="widget-head">
<h5><i class="icon-list"></i> Form Elements</h5>
</div>
<div class="widget-content">
<div class="widget-box">
<form class="form-horizontal well">
<fieldset>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge text-tip" id="input01" title="first tooltip">
<p class="help-block"> In addition to freeform text, any HTML5 text-based input appears like so. </p>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-info">Save changes</button>
<button class="btn btn-warning">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
Extendable Form
Markup
<div class="nonboxy-widget">
<div class="widget-head">
<h5><i class="icon-list"></i> Multifiled Extend</h5>
</div>
<div class="widget-content">
<div class="widget-box">
<form class=" form-horizontal well ucase">
<fieldset>
<legend>Contact Form</legend>
<fieldset id="address-form">
<!-- All extendable elements here-->
</fieldset>
</fieldset>
<!-- Extendable Add Remove here-->
<span class="extend-bar"><a id="minus2" href="#" class="remove-element" title="Remove">Remove</a><a id="plus2" href="#" class="add-element" title="Add">Add</a></span>
<div class="form-actions">
<button type="submit" class="btn btn-info">Save changes</button>
<button class="btn btn-warning">Cancel</button>
</div>
</form>
</div>
</div>
</div>
Dependent Files
/*--- Extendable Form ---*/ <script src="js/jquery-dynamic-form.js"></script>
Custom Script custom-script.js
$("#address").dynamicForm("#plus1", "#minus1", {
limit: 5
});
$("#address-form").dynamicForm("#plus2", "#minus2", {
limit: 5
});
Stepy Wizard
Markup
<div id="horizontal-wizard" class="content-wizard">
<ul class="clearfix">
<li><a href="#step-1"><span class="stepNumber">1</span><span class="stepDesc"> Step 1 <small>Fill your account details</small></span></a></li>
<li><a href="#step-2"><span class="stepNumber">2</span><span class="stepDesc"> Step 2 <small>Fill your account details</small></span></a></li>
<li><a href="#step-3"><span class="stepNumber">3</span><span class="stepDesc"> Step 3 <small>Fill your account details</small></span></a></li>
<li><a href="#step-4"><span class="stepNumber">4</span><span class="stepDesc"> Step 4 <small>Fill your account details</small></span></a></li>
</ul>
<div id="step-1">
<h2 class="StepTitle">Step 1 Content</h2>
</div>
<div id="step-2">
<h2 class="StepTitle">Step 2 Content</h2>
</div>
<div id="step-3">
<h2 class="StepTitle">Step 3 Content</h2>
</div>
<div id="step-4">
<h2 class="StepTitle">Step 4 Content</h2>
</div>
</div>
Dependent Files
/*--- Stepy Wizard ---*/ <script src="js/smart-wizard.jquery.js"></script>
Custom Script custom-script.js
$(function () {
// Smart Wizard
$('#horizontal-wizard').smartWizard({
enableFinishButton: false,
onFinish: onFinishCallback
});
function onFinishCallback() {
$('#horizontal-wizard').smartWizard('showMessage', 'Finish Clicked');
//alert('Finish Clicked');
}
$('#vertical-wizard').smartWizard();
});
Form Validation
Dependent Files
/*--- Form Validation ---*/ <script src="js/vaidation.jquery.js"></script>
Custom Script custom-script.js
$(function () {
// validate signup form on keyup and submit
var validator = $("#signupform").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2,
remote: "users.php"
},
password: {
required: true,
minlength: 5
},
password_confirm: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true,
remote: "emails.php"
},
dateformat: "required",
terms: "required"
},
messages: {
firstname: "Enter your firstname",
lastname: "Enter your lastname",
username: {
required: "Enter a username",
minlength: jQuery.format("Enter at least {0} characters"),
remote: jQuery.format("{0} is already in use")
},
password: {
required: "Provide a password",
rangelength: jQuery.format("Enter at least {0} characters")
},
password_confirm: {
required: "Repeat your password",
minlength: jQuery.format("Enter at least {0} characters"),
equalTo: "Enter the same password as above"
},
email: {
required: "Please enter a valid email address",
minlength: "Please enter a valid email address",
remote: jQuery.format("{0} is already in use")
}
},
// set this class to error-labels to indicate valid fields
success: function (label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
Typography
Example body text
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Lead body copy
Make a paragraph stand out by adding .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Using emphasis
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Note: Feel free to use <b> and <i> in HTML5, but their usage has changed a bit. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.
Example addresses
Here are two examples of how the <address> tag can be used:
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
first.last@gmail.com
Example abbreviations
Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover. This gives users extra indication something will be shown on hover.
Add the initialism class to an abbreviation to increase typographic harmony by giving it a slightly smaller text size.
HTML is the best thing since sliced bread.
An abbreviation of the word attribute is attr.
Code
To include a blockquote, wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.
Include an optional <small> element to cite your source and you'll get an em dash — before it for styling purposes.
<pre class="prettyprint linenums"> /*--html, css, php, js Code Here--*/ </pre>
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p> <small>Someone famous</small> </blockquote>
Default blockquotes are styled as such:
<blockquote></blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
To float your blockquote to the right, add class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
Dropcap
L <span class="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus elit in tortor rhoncus blandit. Nunc aliquet urna lorem, eu tempor risus. Donec felis urna, tempus elementum ultrices a, convallis ut mauris. In hac habitasse platea dictumst. In non quam id lectus blandit rutrum. Mauris venenatis dignissim felis, sed blandit magna egestas et. Sed in eleifend lorem. Maecenas sollicitudin ultrices orci, at sodales metus egestas rutrum. Proin tempus pretium lacus et consequat. Nulla ultricies viverra est eu mattis. Cras eu enim ante. Cras non sem eget risus congue gravida et vitae orci. Nam dapibus mi sed sem tempus gravida. Pellentesque fermentum augue imperdiet nunc elementum vel hendrerit elit vestibulum. Vivamus et tellus orci, id condimentum arcu. Nam turpis lorem, luctus eget ultrices ut, tristique vel nulla.
P<span class="dropcapM">L</span>ellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc enim orci, fringilla auctor pellentesque ut, consequat non mauris. Nunc vitae arcu sed dui venenatis tincidunt. Cras eu enim ante. Cras non sem eget risus congue gravida et vitae orci. Nam dapibus mi sed sem tempus gravida. Pellentesque fermentum augue imperdiet nunc elementum vel hendrerit elit vestibulum. Vivamus et tellus orci, id condimentum arcu. Nam turpis lorem, luctus eget ultrices ut, tristique vel nulla.
N <span class="dropcapB">L</span>am porta faucibus risus ac vehicula. Suspendisse potenti. Ut volutpat eros ac urna venenatis dapibus. Nam at laoreet justo. Donec quis faucibus mauris. Proin eros eros, adipiscing eget viverra vel, bibendum et felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eleifend laoreet orci in fringilla. Curabitur vel euismod lacus. Morbi quis sem et magna sagittis pulvinar. Fusce vel odio et purus convallis pulvinar vitae et metus. Curabitur nec mi ut magna malesuada vehicula eget et justo. Duis rutrum, diam vitae tempus venenatis, mauris lacus auctor libero, at cursus quam velit eu eros. In scelerisque purus ut sem dignissim convallis. Ut cursus eleifend magna, a interdum neque euismod adipiscing. Nam commodo mollis nibh, a suscipit justo fermentum nec. Maecenas nisi odio, lobortis at pretium feugiat, ornare sed augue. Phasellus velit massa, blandit a laoreet at, consectetur quis augue.
S <span class="dropcapC">L</span>uspendisse potenti. Vestibulum egestas ante condimentum libero tristique facilisis. Donec facilisis volutpat ornare. Nulla facilisi. Nulla ut mauris neque, vel dignissim justo. Nullam faucibus mauris in quam facilisis ut lacinia augue imperdiet. Praesent faucibus nisi bibendum nibh pellentesque porttitor. Donec viverra hendrerit augue, et iaculis lorem pharetra ut.
P <span class="dropcapG">L</span>roin eget diam est, at lobortis ante. Fusce condimentum massa congue mauris tincidunt suscipit. Maecenas nulla lectus, euismod et sagittis sed, sodales ut odio. Sed non tortor ut massa consequat interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sem dolor, venenatis nec faucibus in, aliquam eu quam. Nulla ut justo vehicula mi tincidunt tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at velit odio, quis auctor ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce condimentum, mi vel consectetur elementum, lectus lorem vulputate massa, non convallis erat purus id ligula. Vivamus suscipit lobortis leo, quis ultrices metus blandit nec. Maecenas eleifend lacinia lectus. Suspendisse interdum elit quis purus feugiat id congue augue congue.
U <span class="dropcapL">L</span>t mi justo, lacinia ac porta sed, ullamcorper vitae felis. Fusce ornare aliquam velit ut ornare. Praesent sit amet enim in enim gravida sagittis. Donec placerat metus at libero consequat semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eleifend laoreet orci in fringilla. Curabitur vel euismod lacus. Morbi quis sem et magna sagittis pulvinar. Fusce vel odio et purus convallis pulvinar vitae et metus. Curabitur nec mi ut magna malesuada vehicula eget et justo. Duis rutrum, diam vitae tempus venenatis, mauris lacus auctor libero, at cursus quam velit eu eros. In scelerisque purus ut sem dignissim convallis. Ut cursus eleifend magna, a interdum neque euismod adipiscing. Nam commodo mollis nibh, a suscipit justo fermentum nec. Maecenas nisi odio, lobortis at pretium feugiat, ornare sed augue. Phasellus velit massa, blandit a laoreet at
Unorder List
<ul class="tick_icn">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul class="alarm_icn">
- Quisque laoreet risus eget lorem vehicula in egestas purus fermentum.
<ul class="award_icn">
- Aliquam a ligula eget velit semper porta at in risus.
<ul class="help_icn">
- Cras non enim sed mauris malesuada tincidunt eget nec enim.
<ul class="clip_icn">
- Suspendisse blandit imperdiet arcu, et ullamcorper lectus lacinia eu.
<ul class="flag_icn">
- Nullam non erat tellus, eget dapibus velit.
<ul class="folder_icn">
- Maecenas id purus lectus, eget fermentum ipsum.
<ul class="globe_icn">
- Nam tristique arcu vitae massa scelerisque id euismod ligula ullamcorper.
<ul class="heart_icn">
- Aenean a tortor nisl, ac feugiat quam.
<ul class="info_icn">
- Sed congue lacus vel risus mollis nec eleifend sapien consequat.
<ul class="medal_icn">
- Vivamus porttitor sapien eleifend mauris condimentum non semper leo vestibulum.
<ul class="pin_icn">
- Donec ac tortor quis nibh rhoncus ultricies.
<ul class="plus_icn">
- Vestibulum sollicitudin velit quis libero adipiscing ut aliquet eros dictum.
<ul class="trophy_icn">
- Suspendisse blandit imperdiet arcu, et ullamcorper lectus lacinia eu.
Order List
<ol class="decimal_order">
- Aenean a tortor nisl, ac feugiat quam.
- Etiam laoreet lectus sit amet leo ullamcorper sit amet semper sem tempus.
- Praesent sodales ipsum sed justo tristique in sollicitudin lacus malesuada.
<ol class="upper_roman">
- Pellentesque tempus varius odio, sit amet bibendum lacus interdum sit amet.
- Curabitur semper elit sit amet eros consequat volutpat.
- Mauris scelerisque elit eu sem pulvinar sed sodales dolor porttitor.
<ol class="lower_roman">
- Sed sit amet lacus mauris, et facilisis augue.
- Donec volutpat augue non ligula facilisis elementum.
- Proin eget dui pretium dui iaculis scelerisque quis non arcu.
- Nam eget libero a lectus adipiscing elementum quis a felis.
- Curabitur at ligula molestie enim ornare ornare a a diam.
<ol class="lower_alpha">
- Integer sed erat non libero porttitor venenatis.
- Nunc nec mi non mauris elementum tincidunt eget quis felis.
- Cras pretium nibh vel ipsum fermentum dictum.
- Fusce ut mi lorem, id lobortis odio.
<ol class="upper_alpha">
- Sed blandit elit ac tortor convallis cursus.
- Duis pretium sem a nunc scelerisque tincidunt ut euismod sapien.
- Nulla non mauris vitae est commodo mattis in a felis.
- Vestibulum sed enim ac nibh molestie adipiscing.
Horizontal description
<dl class="dl-horizontal">
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<blockquote> </blockquote>
Cras erat diam, consequat quis tincidunt nec, eleifend a turpis. Aliquam ultrices feugiat metus, ut imperdiet erat mollis at. Curabitur mattis risus sagittis nibh lobortis vel.
<blockquote class="quote_blue">Cras erat diam, consequat quis tincidunt nec, eleifend a turpis. Aliquam ultrices feugiat metus, ut imperdiet erat mollis at. Curabitur mattis risus sagittis nibh lobortis vel.
<blockquote class="quote_orange">Cras erat diam, consequat quis tincidunt nec, eleifend a turpis. Aliquam ultrices feugiat metus, ut imperdiet erat mollis at. Curabitur mattis risus sagittis nibh lobortis vel.
<blockquote class="quote_pink">Cras erat diam, consequat quis tincidunt nec, eleifend a turpis. Aliquam ultrices feugiat metus, ut imperdiet erat mollis at. Curabitur mattis risus sagittis nibh lobortis vel.
All Widgets
This template I made some nice widgets and all widget html structure are same. You can use easily boxy and non boxy both widgets. In previous widget section I already given widgets html structure. Here have some special widgets those details are bellow:
Calendar Widget Dependent Files
/*--- Calendar ---*/ <link href="css/fullcalendar.css" rel="stylesheet"> <script src="js/fullcalendar.js"></script>
Custom Script Used internal script in the html page
$(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar-widget').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
prev: 'Prev',
next: 'Next',
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day'
},
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
});
Multiple Files Upload Dependent Files
/*--- Multiple file upload ---*/ <link href="js/plupupload/jquery.plupload.queue/css/jquery.plupload.queue.css" rel="stylesheet"> <script src="js/plupload.full.js"></script> <script src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script> <script src="js/plupupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
Custom Script custom-script.js
$(function() {
$("#uploader").pluploadQueue({
// General settings
runtimes : 'gears,flash,silverlight,browserplus,html5',
url : 'upload.php',
max_file_size : '10mb',
chunk_size : '1mb',
unique_names : true,
// Resize images on clientside if we can
resize : {width : 320, height : 240, quality : 90},
// Specify what files to browse for
filters : [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"}
],
// Flash settings
flash_swf_url : 'js/plupupload/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url : 'js/plupupload/plupload.silverlight.xap'
});
// Client side form validation
$('.upload-form').submit(function(e) {
var uploader = $('#uploader').pluploadQueue();
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('StateChanged', function() {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('upload-form')[0].submit();
}
});
uploader.start();
} else {
alert('You must queue at least one file.');
}
return false;
});
});
Accordion Dependent Files
/*--- Accordion ---*/ <script src="js/accordion.jquery.js"></script>
Custom Script custom-script.js
/*===================
LIST-ACCORDION
===================*/
$('#list-accordion').accordion({
header: ".title",
autoheight: false
});
jQuery Raty Dependent Files
/*--- Accordion ---*/ <script src="js/accordion.jquery.js"></script>
Custom Script custom-script.js
/*===================
LIST-ACCORDION
===================*/
$('#list-accordion').accordion({
header: ".title",
autoheight: false
});
Grid
Fluid grid system 12 responsive, percent-based columns
Fluid columns
Percents, not pixels
The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.
Fluid rows
Make any row fluid simply by changing .row to .row-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.
Markup
<div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div>
Fluid nesting
Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.
<div class="row-fluid">
<div class="span12">
Level 1 of column
<div class="row-fluid">
<div class="span6">Level 2</div>
<div class="span6">Level 2</div>
</div>
</div>
</div>
Buttons and Icons
Icons Graciously provided by Glyphicons
How to use
Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
<i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class:
<i class="icon-search icon-white"></i>
There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.
Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
All UI Elements
Data Table
Dependent files
/*--- Data Table ---*/
<script src="js/data-table.jquery.js"></script>
<script src="js/TableTools.min.js"></script>
<script src="js/ColVis.min.js"></script>
Markup
<table class="data-tbl-boxy table">
<thead>
<tr>
<th>---</th>
</tr>
</thead>
<tbody>
<tr>
<td>----</td>
</tr>
</tbody>
</table>
Custom Script custom-script.js
$(function () {
$('.data-tbl-boxy').dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"oLanguage": {
"sLengthMenu": "<span class='lenghtMenu'> _MENU_</span><span class='lengthLabel'>Entries per page:</span>",
},
"sDom": '<"tbl-searchbox clearfix"fl<"clear">>,<"table_content"t>,<"widget-bottom"p<"clear">>'
});
$("div.tbl-searchbox select").addClass('tbl_length');
/*$(".tbl_length").chosen({
disable_search_threshold: 4
});
*/
});
Markup
<table class="data-tbl-tools table">
<thead>
<tr>
<th>---</th>
</tr>
</thead>
<tbody>
<tr>
<td>----</td>
</tr>
</tbody>
</table>
Custom Script custom-script.js
$(function () {
$('.data-tbl-tools').dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"oLanguage": {
"sLengthMenu": "<span class='lenghtMenu'> _MENU_</span><span class='lengthLabel'>Entries per page:</span>",
},
"sDom": '<"tbl-tools-searchbox"fl<"clear">>,<"tbl_tools"CT<"clear">>,<"table_content"t>,<"widget-bottom"p<"clear">>',
"oTableTools": {
"sSwfPath": "swf/copy_cvs_xls_pdf.swf"
}
});
$("div.tbl-tools-searchbox select").addClass('tbl_length');
/* $(".tbl_length").chosen({
disable_search_threshold: 4
});*/
});
Chart And Graph
Dependent files
<link href="css/jquery.jqplot.css" rel="stylesheet"> /*--- Chart And Graph ---*/ <script src="js/excanvas.min.js"></script> <script src="js/jquery.jqplot.min.js"></script> <script src="js/chart/jqplot.highlighter.min.js"></script> <script src="js/chart/jqplot.cursor.min.js"></script> <script src="js/chart/jqplot.barRenderer.min.js"></script> <script src="js/chart/jqplot.pointLabels.min.js"></script> <script src="js/chart/jqplot.dateAxisRenderer.min.js"></script> <script src="js/chart/jqplot.pieRenderer.min.js"></script> <script src="js/chart/jqplot.donutRenderer.min.js"></script> <script src="js/chart/jqplot.categoryAxisRenderer.min.js"></script> <script src="js/chart/jqplot.logAxisRenderer.min.js"></script> <script src="js/chart/jqplot.canvasTextRenderer.min.js"></script> <script src="js/chart/jqplot.canvasAxisTickRenderer.min.js"></script>
Custom Script
Include all custom script in internal script of the file.
$(function () {
var s1 = [[2002, 112000], [2003, 122000], [2004, 104000], [2005, 99000], [2006, 121000],
[2007, 148000], [2008, 114000], [2009, 133000], [2010, 161000], [2011, 173000]];
var s2 = [[2002, 10200], [2003, 10800], [2004, 11200], [2005, 11800], [2006, 12400],
[2007, 12800], [2008, 13200], [2009, 12600], [2010, 13100]];
plot1 = $.jqplot("chart2", [s2, s1], {
// Turns on animatino for all series in this plot.
animate: true,
// Will animate plot on calls to plot1.replot({resetAxes:true})
animateReplot: true,
cursor: {
show: true,
zoom: false,
looseZoom: true,
showTooltip: false
},
series:[
{
pointLabels: {
show: true
},
renderer: $.jqplot.BarRenderer,
showHighlight: false,
yaxis: 'y2axis',
rendererOptions: {
// Speed up the animation a little bit.
// This is a number of milliseconds.
// Default for bar series is 3000.
animation: {
speed: 2500
},
barWidth: 15,
barPadding: -15,
barMargin: 0,
highlightMouseOver: false
}
},
{
rendererOptions: {
// speed up the animation a little bit.
// This is a number of milliseconds.
// Default for a line series is 2500.
animation: {
speed: 2000
}
}
}
],
axesDefaults: {
pad: 0
},
axes: {
// These options will set up the x axis like a category axis.
xaxis: {
tickInterval: 1,
drawMajorGridlines: false,
drawMinorGridlines: true,
drawMajorTickMarks: false,
rendererOptions: {
tickInset: 0.5,
minorTicks: 1
}
},
yaxis: {
tickOptions: {
formatString: "$%'d"
},
rendererOptions: {
forceTickAt0: true
}
},
y2axis: {
tickOptions: {
formatString: "$%'d"
},
rendererOptions: {
// align the ticks on the y2 axis with the y axis.
alignTicks: true,
forceTickAt0: true
}
}
},
highlighter: {
show: true,
showLabel: true,
tooltipAxes: 'y',
sizeAdjust: 7.5 , tooltipLocation : 'ne'
}
});
});
$(function(){
var data = [
['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],
['Out of home', 16],['Commuting', 7], ['Orientation', 9]
];
var plot1 = jQuery.jqplot ('chart3', [data],
{
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);
});
$(function(){
plot2 = jQuery.jqplot('chart4',
[[['Verwerkende industrie', 9],['Retail', 0], ['Primaire producent', 0],
['Out of home', 0],['Groothandel', 0], ['Grondstof', 0], ['Consument', 3], ['Bewerkende industrie', 2]]],
{
title: ' ',
seriesDefaults: {
shadow: false,
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
startAngle: 180,
sliceMargin: 4,
showDataLabels: true }
},
legend: { show:true, location: 'w' }
}
);
});
$(function(){
var s1 = [200, 600, 700, 1000];
var s2 = [460, -210, 690, 820];
var s3 = [-260, -440, 320, 200];
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = ['May', 'June', 'July', 'August'];
var plot1 = $.jqplot('chart5', [s1, s2, s3], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true}
},
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series:[
{label:'Hotel'},
{label:'Event Regristration'},
{label:'Airfare'}
],
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
pad: 1.05,
tickOptions: {formatString: '$%d'}
}
}
});
});
$(function () {
$.jqplot._noToImageButton = true;
var prevYear = [["2011-08-01",398], ["2011-08-02",255.25], ["2011-08-03",263.9], ["2011-08-04",154.24],
["2011-08-05",210.18], ["2011-08-06",109.73], ["2011-08-07",166.91], ["2011-08-08",330.27], ["2011-08-09",546.6],
["2011-08-10",260.5], ["2011-08-11",330.34], ["2011-08-12",464.32], ["2011-08-13",432.13], ["2011-08-14",197.78],
["2011-08-15",311.93], ["2011-08-16",650.02], ["2011-08-17",486.13], ["2011-08-18",330.99], ["2011-08-19",504.33],
["2011-08-20",773.12], ["2011-08-21",296.5], ["2011-08-22",280.13], ["2011-08-23",428.9], ["2011-08-24",469.75],
["2011-08-25",628.07], ["2011-08-26",516.5], ["2011-08-27",405.81], ["2011-08-28",367.5], ["2011-08-29",492.68],
["2011-08-30",700.79], ["2011-08-31",588.5], ["2011-09-01",511.83], ["2011-09-02",721.15], ["2011-09-03",649.62],
["2011-09-04",653.14], ["2011-09-06",900.31], ["2011-09-07",803.59], ["2011-09-08",851.19], ["2011-09-09",2059.24],
["2011-09-10",994.05], ["2011-09-11",742.95], ["2011-09-12",1340.98], ["2011-09-13",839.78], ["2011-09-14",1769.21],
["2011-09-15",1559.01], ["2011-09-16",2099.49], ["2011-09-17",1510.22], ["2011-09-18",1691.72],
["2011-09-19",1074.45], ["2011-09-20",1529.41], ["2011-09-21",1876.44], ["2011-09-22",1986.02],
["2011-09-23",1461.91], ["2011-09-24",1460.3], ["2011-09-25",1392.96], ["2011-09-26",2164.85],
["2011-09-27",1746.86], ["2011-09-28",2220.28], ["2011-09-29",2617.91], ["2011-09-30",3236.63]];
var currYear = [["2011-08-01",796.01], ["2011-08-02",510.5], ["2011-08-03",527.8], ["2011-08-04",308.48],
["2011-08-05",420.36], ["2011-08-06",219.47], ["2011-08-07",333.82], ["2011-08-08",660.55], ["2011-08-09",1093.19],
["2011-08-10",521], ["2011-08-11",660.68], ["2011-08-12",928.65], ["2011-08-13",864.26], ["2011-08-14",395.55],
["2011-08-15",623.86], ["2011-08-16",1300.05], ["2011-08-17",972.25], ["2011-08-18",661.98], ["2011-08-19",1008.67],
["2011-08-20",1546.23], ["2011-08-21",593], ["2011-08-22",560.25], ["2011-08-23",857.8], ["2011-08-24",939.5],
["2011-08-25",1256.14], ["2011-08-26",1033.01], ["2011-08-27",811.63], ["2011-08-28",735.01], ["2011-08-29",985.35],
["2011-08-30",1401.58], ["2011-08-31",1177], ["2011-09-01",1023.66], ["2011-09-02",1442.31], ["2011-09-03",1299.24],
["2011-09-04",1306.29], ["2011-09-06",1800.62], ["2011-09-07",1607.18], ["2011-09-08",1702.38],
["2011-09-09",4118.48], ["2011-09-10",1988.11], ["2011-09-11",1485.89], ["2011-09-12",2681.97],
["2011-09-13",1679.56], ["2011-09-14",3538.43], ["2011-09-15",3118.01], ["2011-09-16",4198.97],
["2011-09-17",3020.44], ["2011-09-18",3383.45], ["2011-09-19",2148.91], ["2011-09-20",3058.82],
["2011-09-21",3752.88], ["2011-09-22",3972.03], ["2011-09-23",2923.82], ["2011-09-24",2920.59],
["2011-09-25",2785.93], ["2011-09-26",4329.7], ["2011-09-27",3493.72], ["2011-09-28",4440.55],
["2011-09-29",5235.81], ["2011-09-30",6473.25]];
var plot1 = $.jqplot("chart6", [prevYear, currYear], {
seriesColors: ["#6a8c9b", "#d44703"],
title: 'Monthly TurnKey Revenue',
highlighter: {
show: true,
sizeAdjust: 1,
tooltipOffset: 9
},
grid: {
background: '#fff',
drawBorder: false,
shadow: false,
gridLineColor: '#666666',
gridLineWidth: 1
},
legend: {
show: true,
placement: 'outside'
},
seriesDefaults: {
rendererOptions: {
smooth: true,
animation: {
show: true
}
},
markerOptions: {
show: true, // wether to show data point markers.
style: 'filledCircle', // circle, diamond, square, filledCircle.
// filledDiamond or filledSquare.
lineWidth: 2, // width of the stroke drawing the marker.
size: 10, // size (diameter, edge length, etc.) of the marker.
color: '#ff8a00', // color of marker, set to color of line by default.
shadow: true, // wether to draw shadow on marker or not.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1, // offset from the line of the shadow,
shadowDepth: 3, // Number of strokes to make when drawing shadow. Each stroke
// offset by shadowOffset from the last.
shadowAlpha: 0.07 // Opacity of the shadow
}
},
series: [
{
fill: true,
label: '2010'
},
{
label: '2011'
}
],
axesDefaults: {
rendererOptions: {
baselineWidth: 1.5,
baselineColor: '#444444',
drawBaseline: false
}
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: "%b %e",
angle: -30,
textColor: '#dddddd'
},
min: "2011-08-01",
max: "2011-09-30",
tickInterval: "7 days",
drawMajorGridlines: false
},
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
pad: 0,
rendererOptions: {
minorTicks: 1
},
tickOptions: {
formatString: "$%'d",
showMark: false
}
}
}
});
});
File Manager
Dependent files
<link href="css/elfinder.min.css" rel="stylesheet"> <link href="css/elfinder.theme.css" rel="stylesheet"> /*--- Elfinder ---*/ <script src="js/elfinder/elfinder.min.js"></script>
Custom Script custom-script.js
$(function () {
var elf = $('#file-manager').elfinder({
url: 'php/connector.php' // connector URL (REQUIRED)
// lang: 'ru', // language (OPTIONAL)
}).elfinder('instance');
});
Color Box
Dependent files
<script src="js/jquery.colorbox-min.js"></script>
Custom Script custom-script.js
/*colorbox*/
$(".group1").colorbox({rel:'group1'});
$(".portfolio a").colorbox();
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".inline-modal").colorbox({inline:true, width:"50%"});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
Pages
In this template I included 6 predefined pages. All Pages structure are same as like as other pages.
Themes And Layout
This template I have included 8 predefined themes and fluid and fixed both layout. Here have a nice theme switcher.
Themes
Here have 8 predefined themes. In head section here have a default theme file name:
<link id="themes" href="css/themes.css" rel="stylesheet">
When you click any theme by choosing theme switcher then relevant theme file is dynamically replacing on <link id="themes" href="css/themes.css" rel="stylesheet">here
Dependent Script custom-script.js
$(function()
{
$('#sidebar-off').click(function()
{
$(this).attr('disabled','disabled');
$(this).siblings('button').removeAttr('disabled');
$('#sidebar').addClass('side-hide');
$('.top-nav').addClass('full-fluid');
$('#main-content').addClass('full-fluid');
});
$('#sidebar-on').click(function()
{
$(this).attr('disabled','disabled');
$(this).siblings('button').removeAttr('disabled');
$('#sidebar').removeClass('side-hide');
$('.top-nav').removeClass('full-fluid');
$('#main-content').removeClass('full-fluid');
});
$('#right-sidebar').click(function()
{
$(this).attr('disabled','disabled');
$(this).siblings('button').removeAttr('disabled');
$('#sidebar').addClass('right-sidebar');
$('.top-nav').addClass('merge-left');
$('#main-content').addClass('merge-left');
});
$('#left-sidebar').click(function()
{
$(this).attr('disabled','disabled');
$(this).siblings('button').removeAttr('disabled');
$('#sidebar').removeClass('right-sidebar');
$('.top-nav').removeClass('merge-left');
$('#main-content').removeClass('merge-left');
});
});
$(function()
{
$('.theme-color').click(function()
{
var stylesheet = $(this).attr('title').toLowerCase();
$('#themes').attr('href','css'+'/'+stylesheet+'.css');
});
});
How you add new theme?
It is very easy to make new theme here. For an example if you want to make brown theme then first make a css file name theme-brown.css and then place all classes properties and values as like as other themes css files. Make all relevant classen with brown color as your choice. After complete css file then add it in theme switcher.
How to add a theme in theme switcher
Just go to top fixed nav themes dropdown menu form here:
<div class="nav-collapse collapse"> <ul class="nav">
In nav go to <li class=" clearfix color-block"> here in dropdown menu. Here have all themes in list. Individual themes code is:
<span class="theme-color theme-blue" title="theme-blue"></span>
Add new theme here. If your theme is theme-brown.css then add html code by following way.
<span class="theme-color theme-brown" title="theme-brown"></span>
In above code .theme-color define height width abd .theme-brown define color thumb of theme. And title="" define theme name.
I have included following 8 predefine themes:
<link href="css/theme-default.css" rel="stylesheet"> <link href="css/theme-chrome.css" rel="stylesheet"> <link href="css/theme-blue.css" rel="stylesheet"> <link href="css/theme-gray.css" rel="stylesheet"> <link href="css/theme-light-blue.css" rel="stylesheet"> <link href="css/theme-orange.css" rel="stylesheet"> <link href="css/theme-pink.css" rel="stylesheet"> <link href="css/theme-blue.css" rel="stylesheet">
Layout
This template have fluid and fixed both layout. Both layout is responsive. You can switch layout by theme switcher. Layout switch dependent css is in styles.css. Layout switch depend on following codes:
/*===============
Theme Settings
=================*/
.color-block {
margin-left:10px;
}
.theme-color {
width:20px;
height:20px;
display:inline-block;
float:left;
margin-right:3px;
margin-bottom:3px;
cursor:pointer;
}
.theme-settings {
margin-left:10px;
}
.theme-settings .btn-group {
padding:0px;
}
.theme-settings label {
margin-right:10px;
}
.side-hide {
display:none !important;
}
.right-sidebar {
left:auto !important;
right:-1px !important;
border-left:#1D1C1C 1px solid;
}
.merge-left {
margin-right:210px !important;
margin-left:0px !important;
}
.full-fluid {
margin:0px !important;
}
Psd Files
This is very mordern template where is used CSS3. No image is used for themes and layout unless icons and background pattern. No PSD file is require for this template. Everything is depend on css. So here .psd file is not important. I included two .psd files though psd is no need here. Those two file I made only make a visual outline for my work. one is for layout and another is for error page. If you need it may help you but I think no need that at all.
Sources and Credits
Plugins
Icons
| Name | Source |
| Iconsweets | http://iconsweets.com/ by yummygum |
| Led Icons | Led Icons by Gasyoun |
| glyphicons | Glyphicons |
| pc.de | http://pc.de/ico/ http://creativecommons.org/licenses/by-sa/3.0/deed.de |
Images & Patterns
| Name | Source |
| Patterns | http://subtlepatterns.com/ |