1. Start
  2. Getting started
    1. About Grape
    2. Files
    3. Credits
    4. Start
  3. Elements
    1. Blocks
    2. Forms
    3. Table
    4. Charts
    5. Lists
    6. Tabs
    7. Notifications
    8. Alert Boxes
    9. Tooltips
  4. Final Words

Grape

Professional & Flexible Admin Template

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!

Getting started

About Grape

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.

Files

Credits

Icons

The best way to understand Grape is to analyze each demonstration page with FireBug.

Elements

Blocks

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>

 

 

Forms

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.

 

 

Table

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();
});

 

 

Charts

Please have a look at charts.html, to see examples. A completion for this documentation comes in the next update.

 

 

Lists

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.

 

 

Tabs

Please have a look at tabs.html, to see examples. A completion for this documentation comes in the next update.

 

 

Notifications

This template uses jGrowl for the notifications. The usage is very simple:

$.jGrowl("Message", { theme: 'success' });

Available 'themes':

 

 

Alert Boxes

Please have a look at alert_boxes.html, to see examples. A completion for this documentation comes in the next update.

 

 

Tooltips

Please have a look at tooltips.html, to see examples. A completion for this documentation comes in the next update.

Final Words

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. heart

Simon Stamm (Stammi)