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!
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.
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.
See sidebar section.
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.
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.
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.
To learn how to use accordions, see http://jqueryui.com/demos/accordion/.
CSS:
- external/jquery-ui-1.8.16.custom.css
You can find a live demo on lists.html.
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.
Alert boxes can easily be generated using jQuery:
$('parent selector').alertBox(message, options);
options is an object with the following parameters:
To get these block lists, simply add an .block-list class to the ul:
<ul class="block-list"> <li>[...]</li> </ul>
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.
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 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.
To get an box with no icon, just drop the <img>.
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>
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>
For information how to use the concact list, please visit http://devgrow.com/slidernav/.
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>
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.
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.
<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>
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:
<!-- 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.
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.
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.
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.
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.
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.
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.
To get a beautifully styled table as shown in tables.html, add .table to the table:
<table class="table"> {Your table content} </table>
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/.
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>
<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!
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>
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>
<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>
<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.
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.
To learn, how to use tipsy, just have a look at tooltips.html.
Learn more at http://onehackoranother.com/projects/jquery/tipsy/
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.
Concerning the usage of jGrowl, see notifications.html and http://stanlemon.net/projects/jgrowl.html.
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/.
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.
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.
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.
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/.
No problem, just add the class no-padding to the box content:
<div class="box no-padding">; {Your Box} </div>
Fixing this is nothing than add a
<div class="clear"></div>
behind the .content respectively .actions.
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
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)