1. Start
  2. Getting Started
    1. Included Files
  3. HowTo's
    1. How to start
    2. How to include the sidebar
    3. How to get the fixed version
  4. Sprites
    1. Activity Stream
    2. Accordion
    3. Alert Boxes
    4. Block Lists
    5. Buttons
    6. Boxes
    7. Contact List
    8. Footer Buttons
    9. Forms
    10. Gallery
    11. Toolbar
    12. Shortcuts
    13. Sidebar
    14. Sidebar Navigation
    15. Stats List
    16. Steps
    17. Tables
    18. Tabs
    19. User Info
    20. Wizard
  5. Plugins
    1. Tipsy
    2. Fallr
    3. jGrowl
    4. MiniColors
    5. Flot
    6. elFinder
    7. FullCalendar
    8. jWysiwyg (Rich Text Editor)
  6. FAQ
    1. I want a box with no padding
    2. The boxes have no background and border
  7. Credits
    1. Credits
  8. Final Words

Peach

Clean & Smooth Admin Template


Thank you for purchasing my theme. 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


Peach is a clean and smooth 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.

Included Files

HowTo's


How to start

To start with Peach, I've included an "empty" file (_empty.html). There you'll find the generic markup and structure explained with comments.

The best way to understand Peach is to analyze each demonstration page with FireBug or similar.

How to include the sidebar

See sidebar section.

How to get the fixed version

Simply change the line

<link rel="stylesheet" href="css/960gs/fluid.css">

to

<link rel="stylesheet" href="css/960gs/fixed.css">

Please remember, that in the fixed version the widths aren't relative. So the usage of .grid_8 inside a .grid_4 will fail.

Sprites


Peach comes with a lot of elements (I call them sprites). These include the header toolbar or the sidebar navigation. Let's go through and you'll learn how to use them.

Activity Stream

The activity stream is a list of system messages. It allows you to inform the user about the lastest system messages and updates since his last login. The markup is the following:

<div class="activity">
    <div class="avatar">
        <img src="img/sprites/activity-stream/avatar.png" width="52" height="52">
    </div>
    <div class="description">
        <span></span>
        <a href="#">John Doe</a> added 2 new tasks.
        <small>
            <a href="">Contact host support</a>
        </small>
        <ul class="toolbar">
            <li>
                <a href="#">
                <img src="img/icons/packs/fugue/16x16/shadeless/balloon-facebook-left.png">
                </a>
            </li>
            <li>
                <a href="#">
                <img src="img/icons/packs/fugue/16x16/shadeless/mail-send.png">
                </a>
            </li>
            <li>
                <a href="#">
                <img src="img/icons/packs/fugue/16x16/shadeless/alarm-clock.png">
                </a>
            </li>
        </ul>
    </div>
</div>

An example can be found on lists.html.

Accordion

To learn how to use accordions, see http://jqueryui.com/demos/accordion/.

Requirements:

CSS:
- external/jquery-ui-1.8.16.custom.css

You can find a live demo on lists.html.

Alert Boxes

An alert box is generally coded like this:

<div class="alert message-type">
    <span class="icon"></span><strong>Success</strong>
    Lorem ipsum dolor sit amet.
</div>

The message type is one of the following:

Further examles and possible styles are shown in alert_boxes.html.

Generation of Alert Boxes

Alert boxes can easily be generated using jQuery:

$('parent selector').alertBox(message, options);

options is an object with the following parameters:

Block Lists

To get these block lists, simply add an .block-list class to the ul:

<ul class="block-list">
    <li>[...]</li>
</ul>

Block Lists with icons

To add icons to the list, add the .with-icons-class to the ul:

<ul class="block-list with-icons">
    <li class="i-16-iconname">[...]</li>
</ul>

iconname is the name of the icon, just check icons.css to see which icons are possible. Add your own, if you need.

Well, check lists.html for examples.

Requirements:

Buttons

Peach comes with two kinds of buttons: The blues and reds. The markup is very simple:

<button>Default button</button>
<button class="red">Red button</button>

In a form, the submit button is styled as a default button, the reset button as a red button.

Boxes

Boxes are a basic sprite. Every content in the content area are encapsulated in boxes.

<div class="grid_X">
    <div class="box">
        <div class="header">
            <img src="img/icons/packs/fugue/16x16/ui-panel.png" width=16 height=16>
            <h3>Title</h3>
        </div>
        <div class="content">
            <p>Put your content here</p>
        </div>
    </div>
</div>

Because Peach uses the 960 grid system, the width of the box is set by the wrapping div.grid_X, where X is the column span of totally 12 columns. If you use the fluid layout, .grid_X gives an percentual value for the width, so you can nest grid_12 elements. If you use the fixed layout, you have to take care about not getting the child elements of .container_12 longer than 12 columns.

Boxes without Icon

To get an box with no icon, just drop the <img>.

Closable Box

Simply add a <span></span> after the <h3>Title</h3> in the .box .header.

<div class="grid_X">
    <div class="box">
        <div class="header">
            <img src="img/icons/packs/fugue/16x16/ui-panel.png" width=16 height=16>
            <h3>Title</h3>
            <span></span>
        </div>
        <div class="content">
            <p>Put your content here</p>
        </div>
    </div>
</div>
Boxes with Action Bar

The action bar isdivided into left and right, just where you want to place your items. It is very usefull for forms.

<div class="grid_X">
    <div class="box">
        <div class="header">
            <img src="img/icons/packs/fugue/16x16/ui-panel.png" width=16 height=16>
            <h3>Title</h3>
            <span></span>
        </div>
        <div class="content">
            <p>Put your content here</p>
        </div>
        <div class="actions">
            <div class="actions-left"><input type="reset"></div>
            <div class="actions-right"><input type="submit"></div>
        </div>
        <div class="clear"></div>
    </div>
</div>

Contact List

 

For information how to use the concact list, please visit http://devgrow.com/slidernav/.

Requirements:

If you want to see the contact list in action, just take a look at lists.html.

 

If you want to use the footer buttons, just insert the following code into the footer:

<div id="button_bar">
    <ul>
        <li>
            <span><a href="index.html">Dashboard</a></span>
        </li>
        <li>
            <span><a href="#">Settings</a></span>
        </li>
    </ul>
</div>
Requirements:

Forms

Validation

To add validation to a form, add the .validate class to the form:

<form class="validate" [...]>
    [...]
</form>

You can set an input as required, add the required-class to it:

<input name="username" type="text" placeholder=" Your Name" class="required" />

Instead of listing every style possibility one after another, it's easier to simply inspect the live example on forms.html. Just use your favorite web inspector, and here we go.

Requirements:

To get this beautiful image gallery, use this simple markup:

<ul class="gallery">
    <li>
        <a rel="prettyPhoto[galleryX]" href="img/sprites/gallery/l/1.jpg">
            <img src="img/sprites/gallery/1.jpg">
        </a>
        {Actions List}
    </li>
    [...]
</ul>

Replace galleryX with an identifier for the gallery, if you want to use the PrettyPhoto plugin and you have multiple galleries per page.
You can disable the PrettyPhoto plugin by removing the rel-tag.

Currently an image height of 135px is recommended. This may be fixed next update.

Actions List
<ul class="action-list">
    <li>
        Actions
    </li>
    <li>
        <a href="#">View</a>
    </li>
    <li>
        <a href="#">Edit</a>
    </li>
    <li>
        <a href="#">Remove</a>
    </li>
</ul>

Toolbar

The header toolbar contains the page title and some toolbar buttons.

<div id="header-toolbar">
    <div class="container_12">
        <div class="grid8"><h1>Peach - Smooth & Clean Admin Template</h1></div>
        <div class="grid_4">
            {Toolbar buttons}
        </div>
    </div>
</div>

Toolbar buttons are the following:

Large Toolbar Button

<!-- A large toolbar button -->
<div class="toolbar_large">
    <div class="toolbutton">
        <div class="toolicon">
            <img src="img/sprites/toolbar/user.png" width="15" height="15" />
        </div>
        <div class="toolmenu">
            <div class="toolcaption">
                <span>Administrator</span>
            </div>
            <!-- Start of menu -->
            <div class="dropdown">
                <ul>
                    <li>
                        <a href="#">Settings</a>
                    </li>
                    <li>
                        <a href="#">Logout</a>
                    </li>
                </ul>
            </div><!-- End of menu -->
        </div>
    </div>
</div><!-- End of large toolbar button -->

The .toolicon is optional.

Small Toolbar Button

Beside the large toolbar button there is a small one.

<div class="toolbar_small">
    <div class="toolbutton">
        <span>3</span>
        <img src="img/sprites/toolbar/mail.png" width="15" height="11" />
    </div>
    {Toolbox}
</div>

The <span></span> is optional.

The small toolbutton contains a toolbox which can contain any content. In my example I made a mail overview of it (you can check it on the pages).

<div class="toolbox" >
    <span class="arrow"></span>
    <h3>Title</h3>
    {Content}
</div>

If you want to use the mail overview, just observe the code on the pages.

Shortcuts

An usage example for the shortcuts is shown in dashboard.html.

<ul class="shortcuts">
    <li>
        <div class="shortcut-icon">
            <img src="img/icons/25x25/blue/user.png" width="25" height="25">
            <div class="divider"></div>
        </div>
        <a class="shortcut-description" href="#"> <strong>Dashboard</strong> <span>Your
            description here.</span> </a>
    </li>
    {Further shortcuts}
</ul>

Check lists.html for a demonstration.

Sidebar

The sidebar in Peach is optional. In the demonstration it is included only on the main page but feel free to use it everywhere or even not use it - as you like it.

<div role="main" class="container_12" id="content-wrapper">
    <aside>
        {User Info Box}
        <div id="sidebar_content">
            {Sidebar content}
        </div>
    </aside>
    <div id="main_content">
        {As you know it}
    </div>
</div>


The User Info Box is optionally. Read about them here.

Besides usual text or simple elements the sidebar can contain a sidebar navigation and an user info box.

Requirements:

Sidebar Navigation

The sidebar navigation is coded as following:

<nav>
    <ul class="menu collapsible">
        <li class="first-child">
            <a href="#" class="current">State: current</a>
        </li>
        <li class="expand">
            <a href="#">State: normal</a>
            <ul class="sub">
                <li>
                    <a href="#">State: normal</a>
                </li>
                <li>
                    <a href="#">State: normal</a>
                </li>
                <li>
                    <a href="#">State: normal</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">State: normal</a>
        </li>
        <li class="last-child">
            <a href="#">State: normal</a>
        </li>
    </ul>
</nav>

The current menu item is marked with .current as you see it. If you want to expand an sub menu by default, add .expand to the corresponding list item.

.first-child and .last-child are for x-browser compatibility. If you have no need to support old browser, just drop this classes.

Requirements:

Stats List

The stats list is used to show the user some interesting stats eg. from Piwik. The creation of the list isn't more than this:

<ul class="stats-list">
    <li>
        <a href="#">Total Visits <span>12132</span></a>
    </li>
    <li>
        <a href="#">Today Visits <span>875</span></a>
    </li>
    <li>
        <a href="#">Comments <span>312</span></a>
    </li>
    <li>
        <a href="#">Support Tickets <span>12</span></a>
    </li>
</ul>

On lists.html you can find an example.

Steps

You can use the steps sprite to give an newly registred user an overview, what he can do next.

<div class="grid_X">
    <div class="box">
        <div class="content no-padding">
            <div class="step">
                <span>1</span>
                <div class="circle"></div>
                <a href="#"> <strong>Check out the dashboard</strong>
                <small>
                    You'll find a sneak preview of
                    <br>
                    the theme's elements.
                </small> </a>
            </div>
            <div class="step">
                <span>2</span>
                <div class="circle"></div>
                <a href="#"> <strong>Check out the other pages</strong>
                <small>
                    There is a lot to discover.
                    <br>
                    Honestly!
                </small> </a>
            </div>
            <div class="step">
                <span>3</span>
                <div class="circle"></div>
                <a href="#"> <strong>Fill your Profile</strong>
                <small>
                    Don't forget to fill
                    <br>
                    your profile.
                </small> </a>
            </div>
        </div>
</div>

Want to know, how it looks like? Go to lists.html.

Requirements:

Tables

Standalone tables

To get a beautifully styled table as shown in tables.html, add .table to the table:

<table class="table">
    {Your table content}
</table>
Requirements:
Data-tables

The data tables are very easy to get: simply use the following line of Javascript:

$('#table-example').dataTable();

Please also add the .table-class as mentioned above.

There is a lot of possibilities with data tables, just check http://datatables.net/.

Requirements:

Tabs

Using tabs, one box can easily contain multiple contents. Just use the following structure:

<div class="box">
    <div class="header">
        <img src="img/icons/packs/fugue/16x16/ui-tab.png">
        <h3>Tabs</h3>
        <ul>
            <li><a href="#tab-1">Lorem</a></li>
            <li><a href="#tab-2">Dolor</a></li>
            <li><a href="#tab-3">Consectetur</a></li>
        </ul>
    </div>
    <div class="content">
        {Tab content}
    </div>
</div>
Tab content
<div class="tab-content" id="tab-1">
     First tab content}
</div>
<div class="tab-content" id="tab-2">
    {Second tab content}
</div>
<div class="tab-content" id="tab-3">
    {Third tab content}
</div>

The href of the header > ul > li > a has to point to a .tab-content element in the .content of the .box

To initialize and set up the tabs, run the following line of Javascript:

$(<select the box>).createTabs();

Et voila, the tabs are ready!

Requirements:

User Info

The user info box is a sprite used in the sidebar. It is optionally.

<div id="sidebar_top">
    <div class="userinfo">
        <div class="info">
            <div class="avatar">
                <img width="49" height="69" src="img/sprites/userinfo/avatar.png">
            </div>
            <a href="#">3 Messages</a>
        </div>
        <ul class="links">
            <li>
                <strong><a href="#">Administrator</a></strong>
            </li>
            <li>
                <a href="#">Settings</a>
            </li>
            <li>
                <a href="#">Logout</a>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
</div>
Requirements:

Wizard

The wizard is structured as follows:

<div data-step="1" class="box wizard">
    <div class="header">
        <img width="16" height="16" src="img/icons/packs/fugue/16x16/application--arrow.png">
        <h3>Wizard</h3>
        <span></span>
    </div>
    <div class="content">
    {Steps}
    {Pages}
    </div>
    <div class="actions">
        <div class="actions-left">
            <button class="prev">
                « Back
            </button>
        </div>
        <div class="actions-right">
            <button class="next">
                Forward »
            </button>
        </div>
    </div>
    <div class="clear"></div>
</div>
Steps:
<ul>
    <li class="current">
        <a href="#step_1"> <span>1</span>
        <div>
            <strong>Register</strong>
            <small>
                It only takes a minute
            </small>
        </div> </a>
    </li>
    [...]
</ul>
Pages:
<div class="wiz_page step_1">
    <div class="wiz_sidebar grid_3">
        <span>1</span>
        <div>
            <strong>Lorem</strong>
            <small>
                Ipsum
            </small>
        </div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.
        </p>
    </div>
    <div class="wiz_content">
        <h3>Database setup</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.
        </p>
    </div>
</div>
[...]

The .wiz_sidebar is optional.

The class step_X corresponds to the step_X in the steps.

You can find an example wizard on wizard.html.

Requirements:

Plugins


Additional to the sprites, you've got a bunch of usefull Javascript Plugins. Let's check them out:

In some cases, the plugin's javascript code is modified. If you need an updated plugin version, just write me a message.

Tipsy

To learn, how to use tipsy, just have a look at tooltips.html.

Learn more at http://onehackoranother.com/projects/jquery/tipsy/

Requirements:

Fallr

Fallr is more than only a jGrowl remake: Check it's huge possibilities at http://amatyr4n.com/codecanyon/fallr/. messages.html shows the icons, you can use with fallr.

Requirements:

jGrowl

Concerning the usage of jGrowl, see notifications.html and http://stanlemon.net/projects/jgrowl.html.

Requirements:

MiniColors

MiniColors are used for color inputs. To use it, simply use:

<input type="color" name="..." />

For an example of the color input, check forms.html. Check also http://abeautifulsite.net/blog/2011/02/jquery-minicolors-a-color-selector-for-input-controls/.

Requirements:

Flot

Using flot, you can plot graphs and charts very easily.

Check charts.html and http://code.google.com/p/flot/ for further information.

You can set the chart's height by adding .small, .medium or .large to the surrounding div.

Requirements:

elFinder

elFinder is a great file explorer plugin. Just check ../explorer.html to see it in action. Please note, that this plugin needs a PHP or Python based backend. Have a look at http://elrte.org/elfinder for details and check the ../code/elfinder/-directory.

Requirements:

FullCalendar

You can use FullCalendar for a beautiful and simple calendar. Have a look at calendar.html and also check http://arshaw.com/fullcalendar/ for details.

Requirements:

jWysiwyg (Rich Text Editor)

Using jWysiwyg you can easily provide an rich text edior.

You can find a demonstration on editor.html. Please also check http://github.com/akzhan/jwysiwyg/.

Requirements:

FAQ


I want a box with no padding

No problem, just add the class no-padding to the box content:

<div class="box no-padding">;
    {Your Box}
</div>

The boxes have no background and border

Fixing this is nothing than add a

<div class="clear"></div>

behind the .content respectively .actions.

Credits


Credits

Icons

Copyright © 2011 Yusuke Kamiyamane. All rights reserved.
http://p.yusukekamiyamane.com

Copyright © 2011 Yusuke Kamiyamane. All rights reserved.
http://p.yusukekamiyamane.com

Copyright © 2011 by yummyGum. All rights reserved.
http://iconsweets2.com/

JavaScripts

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)