"Shamcey Metro Style Admin Template" Documentation v1.1
Created: 01/23/2013 By: themepixels
Thank you for downloading my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our contact page. Thanks so much!
In this template, the <body> tag uses class name for login page as class="loginpage". This class name will be added to determine which background style to use in the body element for the login page. For example, in the login page it use <body class="loginpage"> and the rest of the page have no class.
This theme is a flexible layout with 2 columns with multiple columns in the main panel and a collapsible left menu.
All of the information within the page area is nested within a div with a class of "mainwrapper".
<body>
<div class="mainwrapper">
<div class="header"> ... </div>
<div class="leftpanel"> ... </div>
<div class="righpanel"> ... </div>
</div><!--mainwrapper-->
</body>
All of the information within the left panel area of the page is wrapped with a class of "header".
<div class="header">
<div class="logo"> ... </div>
<div class="headerinner">
<ul class="headmenu"> ... </ul>
</div>
</div>
All of the information within the left panel area of the page is wrapped with a class of "leftpanel".
<div class="leftpanel"> <div class="leftmenu"> ... </div> </div><!--leftpanel-->
The structure for left menu is using the bootstrap menu using a class of "nav nav-tabs nav-stacked"
<div class="nav nav-tabs nav-stacked"> <li class="nav-header">Navigation</li> <li>...</div> ... </div><!--nav-->
All of the information within the right panel area of the page is wrapped with a class of "rightpanel".
<div class="rightpanel"> <div class="breadcrumbs"> ... </div> <div class="pageheader"> ... </div> <div class="maincontent"> ... </div> </div>
The main content is where you can see the main content of the page that wraps inside the element with a class name of "maincontentinner".
<div class="maincontent">
<div class="maincontentinner">
...
</div><!--maincontentinner-->
</div><!--maincontent-->
All of the information found in the main content of the page should put inside the element with a class name of "maincontentinner". Make sure not to insert elements outside of this to prevent breaking the layout. Inside this element you can now use bootstrap components for your page. To learn more about bootstrap you can refer to this link - http://twitter.github.com/bootstrap/base-css.html.
This template use bootstrap to some of the elements used in this template.. Keep in mind, that these values might be overridden somewhere else in the file. Below is what css styles are arranged in style.default.css. CSS files are located in folder /css. Third party css styles can be found in same folder.
1. Reset Browser Styles 2. Login Page Styles 3. Header 4. Left Panel 5. Main Panel 6. Dashboard 7. Headers & Boxes 8. Form Styles 9. Buttons & Icons 10. Content Slider 11. Slim Scroll 12. Media Styles 13. Messages Styles 14. Tables 15. Graphs & Charts 16. Typography 17. Elements & Widgets 18. Form Wizards 19. Edit Profile 20. Search Results 21. Error Page 22. Invoice Page 23. Footer Styles 24. Custom Styles 25. Fonts 26. Bootstrap Override 27. IE Fixes 28. Media Queries
This file imports 17 other css files required for this page to display properly. Refer below.
@import url('bootstrap.min.css');
@import url('bootstrap-responsive.min.css');
@import url('jquery.ui.css');
@import url('animate.min.css');
@import url('animate.delay.css');
@import url('isotope.css');
@import url('colorbox.css');
@import url('flexslider.css');
@import url('uniform.tp.css');
@import url('colorpicker.css');
@import url('jquery.jgrowl.css');
@import url('jquery.alerts.css');
@import url('jquery.tagsinput.css');
@import url('ui.spinner.css');
@import url('jquery.chosen.css');
@import url('fullcalendar.css');
@import url('roboto.css');
@import url('lato.css');
@import url('font-awesome.min.css');
Style switching works by adding additional line of codes right next to the main stylesheet.
<link rel="stylesheet" href="css/style.default.css" type="text/css" />
<link id="skinstyle" rel="stylesheet" href="css/style.red.css" type="text/css" />
The second stylesheet in line 2 of the code above should always have an id of "skinstyle" to make theme switching works. This will automatically add using javascript when user click on the style switcher.
// change skin color
jQuery('.skin-color').hover(function(){
var s = jQuery(this).attr('href');
if(jQuery('#skinstyle').length > 0) {
if(s!='default')
jQuery('#skinstyle').attr('href','css/style.'+s+'.css');
else
jQuery('#skinstyle').remove();
} else {
if(s!='default')
jQuery('head').append('<link id="skinstyle" rel="stylesheet" href="css/style.'+s+'.css" type="text/css" />');
}
return false;
});
Changing the default style of this template is simple. You can manually add the line below inside of your <head> element.
<head> <link rel="stylesheet" href="css/style.default.css" type="text/css" />
<link id="skinstyle" rel="stylesheet" href="css/style.red.css" type="text/css" /> </head>
This theme imports 3rd party javascript files to some of the pages in this template.
Before using any of the plugins above in your page, make sure to add the jQuery in your head before adding any jQuery plugins.
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
This template is using TinmyMCE as wysiwyg editor. To learn more about using TinyMCE, just go to their website http://www.tinymce.com/
For this editor to work, the code below should be present in your <head> tag element
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/wysiwyg.js"></script>
In your page, the code below should be present
<textarea class="tinymce"></textarea>
This template uses jQuery Character Count to count the number of character inside a textarea. This plugin is executed in forms.html. By using the plugin, the code below must be present in your page.
<script type="text/javascript" src="js/charCount.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#textarea").charCount({
allowed: 120,
warning: 20,
counterText: 'Characters left: '
});
});
</script>
// ADD THE CODE BELOW ANYWHERE INSIDE <BODY> ELEMENT
<textarea cols="80" rows="5" id="textarea"></textarea>
To learn more about this plugin, go to Character Count
This template uses FullCalendar v1.6.0 by Adam Shaw. You can read the full documentation for this calendar to http://arshaw.com/fullcalendar/docs/
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/fullcalendar.min.js"></script>
This template is using jQuery Alerts plugin to have a custom alert box instead of using browser's alert box. jQuery alerts works by adding the following code below in your page.
Add the line of code below in your <head> tag
<script type="text/javascript" src="js/jquery.alerts.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.alertboxbutton').click(function(){
jAlert('This is a custom alert box', 'Alert Dialog');
return false;
});
});
</script>
//ADD THIS ANYWHERE IN THE <BODY> ELEMENT OF YOUR PAGE//
<a href="" class="alertboxbutton">Basic Alert</a>
The first parameter is the alert message and the second parameter is the title of the alert box. To know more about using this plugin, you may go to site http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
This plugins allows texarea to grow vertically when text is typed in. Below codes must be present in your page when you want to use this plugin.
<script type="text/javascript" src="js/jquery.autogrow-textarea.js"></script>
<script type="text/javascript"> jQuery(document).ready(function(){
jQuery('#textarea').autogrow(); }); </script> //ADD THIS ANYWHERE INSIDE OF <BODY> ELEMENT OF YOUR PAGE <textarea id="textarea"></textarea>
To use colorbox in any of your page by using this template, code below must be present in your page.
// ADD THIS IN YOUR <head> TAG //
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascrpt">
jQuery(document).ready(function(){
jQuery('#medialist a').colorbox();
});
</script>
// ADD THIS ANYWHERE ON YOUR <body> ELEMENT //
<a href="images/pic1.png" class="preview">View File</a>
Datepicker is part of the jQuery UI plugin. To add this in your page a below code is added in the head.
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( "#datepicker" ).datepicker();
});
</script>
//add this anywhere in your page
<input id="datepicker" type="text" class="width50" />
This template uses growl notification (jGrowl) by Stan Lemon. You can use growl in any events of your scripts to display notification. You can use growl by adding the code below.
<script type="text/javascript" src="js/jquery.jgrowl.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
//you can insert the below code in any events like click, hover,submit, focus, etc.
jQuery.jGrowl("Hello world!");
});
</script>
Tabs is part of the jQuery UI plugin. To add this in your page a below code is added in the head.
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( "#tabs" ).tabs();
});
</script>
//add this anywhere in your page
<div id="tabs">
<ul>
<li><a href="#tabs-1">Sample Tab A</a></li>
<li><a href="#tabs-2">Sample Tab B</a></li>
<li><a href="#tabs-3">Sample Tab C</a></li>
</ul>
<div id="tabs-1"> ... </div>
<div id="tabs-2"> ... </div>
<div id="tabs-3"> ... </div>
</div><!-- #tabs -->
Accordion is part of the jQuery UI plugin. To add this in your page a below code is added in the head.
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( ".accordion" ).accordion();
});
</script>
//add this anywhere in your page
<div class="accordion">
<h3>Title here</h3>
<div> content goes here... </div>
<h3>Title here</h3>
<div> content goes here... </div>
<h3>Title here</h3>
<div> content goes here... </div>
</div><!-- accordion -->
Slider is part of the jQuery UI plugin. More options available in jQuery UI website. To add this in your page a below code is added in the head.
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#slider").slider({value: 40});
});
</script>
//add this anywhere in your page
<div id="slider"></div>
This template uses Flot to create chart for your reports or anywhere on your page. To use this plugin just add the line of code below.
<script type="text/javascript" src="js/jquery.flot.min.js"></script> <script type="text/javascript" src="js/jquery.flot.pie.min.js"></script>
To know how this theme implemented the flot you can open the file charts.js at js/custom/ folder.
To know more how to use this plugin you can visit the page at http://code.google.com/p/flot/
This template uses form validation by Jorn Zaefferer. To use this plugin, simply add the line of code below
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#form").validate({
rules: {
name: "required",
email: {
required: true,
email: true,
},
occupation: "required"
},
messages: {
name: "Please enter your name",
email: "Please enter a valid email address",
occupation: "Please select your occupation"
}
});
});
</script>
<form id="form" action="" method="post"> ... </form>
In this template, I use jQuery plugin called smartWizard for wizard form template. This plugin is developed by TechLaboratory. You can visit http://techlaboratory.net/products.php?product=smartwizard for more information. The code below is the one on how I use it for this template.
jQuery(document).ready(function(){
// Smart Wizard
jQuery('#wizard').smartWizard({onFinish: onFinishCallback});
function onFinishCallback(){
alert('Finish Clicked');
}
// A Wizard form in modal box
jQuery(".inline").colorbox({inline:true, width: '60%', height: '500px'});
});
I've used the following images, icons or other files as listed.
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. No guarantees, but 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 forums and asking your question in the "Item Discussion" section.
ThemePixels