Thank you for purchasing my first theme here on ThemeForest. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Grape is a professional and very flexible admin template for huge and small backend solutions. It includes custom plugins, forms, validations, charts, tables, notifications and much more. The template is built on HTML5 with CSS3 features powered by jQuery and modernizr.
Icons
The best way to understand Grape is to analyze each demonstration page with FireBug.
Grape provides a simple markup to easily create blocks around your content.
General markup
<div class="block-border"> <div class="block-header"> <h1>Title</h1> </div> <div class="block-content"> <p>Put your content here.</p> </div> </div>
Closable Block
Simply add a <span></span> after the <h1>Title</h1> in the block-header.
<div class="block-border"> <div class="block-header"> <h1>Title</h1><span></span> </div> <div class="block-content"> <p>Put your content here.</p> </div> </div>
Combined Blocks
You can also add more "block-content"s in a block-border.
<div class="block-border"> <div class="block-header"> <h1>Title</h1> </div> <div class="block-content"> <p>Put your content here.</p> </div> <div class="block-content"> <p>Put your second content here.</p> </div> <div class="block-content"> <p>Put your third content here.</p> </div> </div>
Dark Background
To give a content-block a dark-bg, just use the class "dark-bg".
<div class="block-border"> <div class="block-header"> <h1>Title</h1> </div> <div class="block-content dark-bg"> <p>Put your content here.</p> </div> </div>
Action Bar
<div class="block-border"> <div class="block-header"> <h1>Title</h1> </div> <div class="block-content"> <p>Put your content here.</p> <div class="block-actions"> </div> </div> </div>
Grid
<div class="block-border"> <div class="block-header"> <h1>Title</h1> </div> <form id="form" class="block-content form" action="" method="post"> <div class="_100"> <p><label for="100">100%</label><input id="100" type="text" value=""/></p> </div> <div class="_50"> <p><label for="50">50%</label><input id="50" type="text" value=""/></p> </div> <div class="_50"> <p><label for="50">50%</label><input id="50" type="text" value=""/></p> </div> <div class="_25"> <p><label for="25">25%</label><input id="25" type="text" value=""/></p> </div> <div class="_75"> <p><label for="75">75%</label><input id="75" type="text" value=""/></p> </div> <div class="_25"> <p><label for="25">25%</label><input id="25" type="text" value=""/></p> </div> <div class="_25"> <p><label for="25">25%</label><input id="25" type="text" value=""/></p> </div> <div class="_25"> <p><label for="25">25%</label><input id="25" type="text" value=""/></p> </div> <div class="_25"> <p><label for="25">25%</label><input id="25" type="text" value=""/></p> </div> </div> </div>
For more examples please look at the forms.html.
Grape uses the DataTables-plugin. Standalone tables are coming in the next updates.
HTML
<div class="block-border"> <div class="block-header"> <h1>Title</h1> </div> <div class="block-content"> <table id="table-example" class="table"> <thead> <tr> <th>Head 1</th> <th>Head 2</th> </tr> </thead> <tbody> <tr> <td>Entry 1.1</td> <td>Entry 2.1</td> </tr> <tr> <td>Entry 1.2</td> <td>Entry 2.2</td> </tr> </tbody> </table> </div> </div>
JavaScript
$().ready(function() { $('#table-example').dataTable(); });
Please have a look at charts.html, to see examples. A completion for this documentation comes in the next update.
Please have a look at list_block.html, list_shortcut.html and list_contact.html, to see examples. A completion for this documentation comes in the next update.
Please have a look at tabs.html, to see examples. A completion for this documentation comes in the next update.
This template uses jGrowl for the notifications. The usage is very simple:
$.jGrowl("Message", { theme: 'success' });
Available 'themes':
Please have a look at alert_boxes.html, to see examples. A completion for this documentation comes in the next update.
Please have a look at tooltips.html, to see examples. A completion for this documentation comes in the next update.
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.
And remember: I made this theme with love, so I hope you can enjoy it.
Simon Stamm (Stammi)